欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)Twitter的自動(dòng)文字補(bǔ)齊特效

 更新時(shí)間：2014年11月28日 16:52:58   投稿：hebedich  
本文介紹了一款jQuery實(shí)現(xiàn)的文字自動(dòng)補(bǔ)全特效的插件，該插件可以結(jié)合本地?cái)?shù)據(jù)進(jìn)行一些操作。推薦關(guān)注一下H5的幾種數(shù)據(jù)存儲(chǔ)的方式（localstorage與sessionstorage、IndexedDB、離線(xiàn)緩存manifest文件）

上圖效果可以使用jQuery插件Typeahead.js來(lái)實(shí)現(xiàn)，這款jQuery插件來(lái)自于Twitter的一個(gè)新的項(xiàng)目，支持遠(yuǎn)程和本地的數(shù)據(jù)集。比較有特色的地方在于你可以將數(shù)據(jù)集使用本地存儲(chǔ)(local storage)來(lái)保存在本地，有效的提高用戶(hù)體驗(yàn)。同時(shí)也擁有很多遠(yuǎn)程數(shù)據(jù)集的處理選項(xiàng)，例如（請(qǐng)求頻率，最大的并發(fā)請(qǐng)求數(shù)，等等）。

主要特性

支持?jǐn)?shù)據(jù)本地保存，客戶(hù)端加載，優(yōu)化加載速度
支持多語(yǔ)言，并且支持阿拉伯文
支持Hogan.js模板引擎整合
支持多數(shù)據(jù)集拼裝
支持本地和遠(yuǎn)程的數(shù)據(jù)集

項(xiàng)目地址

http://twitter.github.io/typeahead.js

如何使用

首先在網(wǎng)頁(yè) head 中引入 jQuery 框架和 Typeahead.js 插件的相關(guān) JS 和 CSS 文件

復(fù)制代碼 代碼如下:

<link href=  "typeahead.min.css"   rel=  "stylesheet"  >
<script src=  "jquery-1.9.1.min.js"  ></script>
<script src=  "typeahead.min.js"  ></script>

然后添加要想實(shí)現(xiàn)動(dòng)畫(huà)的 HTML 元素，如

復(fù)制代碼 代碼如下:

<input id=  "demo"   class  =  "typeahead"   type=  "text"   placeholder=  "test"  >

最后初始化

復(fù)制代碼 代碼如下:

view source
$(  '#demo'  ).typeahead({
name:  'test'  ,
local: [  "Site518"  ,  "Lwolf"  ],
limit: 10
});

相關(guān)文章

最新評(píng)論