注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

带分页的多功能下拉选择框jquery插件  

2017-10-10 15:44:30|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
麦子学院
简要教程

combo-select是一款带分页的多功能下拉选择框jquery插件。它基于jQuery、Bootstrap2(Bootstrap3未支持)开发,可以完成下拉列表,自动补全,分页,多选,键盘操作等功能。combo-select下拉列表框的特点有:

  • 基于jQuery、Bootstrap2开发。
  • 输入自动查找。
  • 列表结果分页展示。
  • 使用键盘快速操作基本功能及分页功能。
  • 多项选择以标签(Tag)形式展现。
  • 结果列表自动判断屏幕边缘,避免内容超出可视范围。

多功能下拉选择框

 使用方法

在页面中引入comboselect.css文件,comboselect.js和b.comboselect.js文件。

de ><!-- 插件使用的样式表文件 -->de>
de ><de>de >linkde> de >relde>de >=de>de >"stylesheet"de> de >hrefde>de >=de>de >"lib/comboselect/comboselect.css"de> de >typede>de >=de>de >"text/css"de>de >>de>
de ><!-- 插件核心脚本 -->de>
de ><de>de >scriptde> de >typede>de >=de>de >"text/javascript"de> de >srcde>de >=de>de >"lib/comboselect/comboselect.js"de> de >>< /de>de >scriptde>de >>de>
de ><!-- 插件快速使用脚本 -->de>
de ><de>de >scriptde> de >typede>de >=de>de >"text/javascript"de> de >srcde>de >=de>de >"lib/comboselect/b.comboselect.js"de> de >>< /de>de >scriptde>de >>de>
 HTML结构

使用de ><input>de>文本框作为下拉菜单的基本元素。

de ><de>de >inputde> de >typede>de >=de>de >"text"de> de >idde>de >=de>de >"comboSelect"de> de >classde>de >=de>de >"input-block-level"de> de >>de>
 初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该多功能下拉选择框插件。

de >//定义数组,在服务端返回的数据也以该格式返回:Array[{Object},{...}]de>
de >varde> de >tag_data = [de>
de >    de>de >{id:1 ,name:de>de >'Chicago Bulls'de>de >,desc:de>de >'芝加哥公牛'de>de >},de>
de >    de>de >{id:2 ,name:de>de >'Cleveland Cavaliers'de>de >,desc:de>de >'克里夫兰骑士'de>de >},de>
de >    de>de >{id:3 ,name:de>de >'Detroit Pistons'de>de >,desc:de>de >'底特律活塞'de>de >},de>
de >    de>de >{id:4 ,name:de>de >'Indiana Pacers'de>de >,desc:de>de >'印第安纳步行者'de>de >}de>
de >];de>
de >//初始化插件de>
de >$(de>de >'#comboSelect'de>de >).bComboSelect({de>
de >    de>de >showField : de>de >'desc'de>de >,de>
de >    de>de >keyField : de>de >'id'de>de >,de>
de >    de>de >data : tag_datade>
de >});          de>

关于combo-select多功能下拉选择框jquery插件完整的文档请访问:https://terryz.github.io

本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/jQuery/Form/201706084561.html
  评论这张
 
阅读(21)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017