导航菜单

Ddlist - Select下拉菜单美化插件

创客主机


这是一款用于美化下拉列表菜单控件的jquery插件ddlist。使用该ddlist下拉列表美化插件可以为下拉列表添加图标,增强下拉列表的默认功能等。在美化的同时使下拉列表功能得到增强。该下拉列表插件通过<select>元素开发,使用jQuery将其隐藏,并生成新的html结构。

HTML结构

要使用该插件,首先要在html的header中引入以下文件:

  1. <link rel="stylesheet" type="text/css" href="[your-path]/service.ddlist.jquery.css" />
  2. <script src="[your-path]/service.ddlist.jquery.min.js"></script>

然后在html中对于一个select元素,例如:

  1. <select id="myList">
  2.   <option value="0">Text 0</option>
  3.   <option value="1" selected="selected">Text 1</option>
  4.   ...
  5.   <option value="9">Text 9</option>
  6. </select>

然后通过jQuery调用该下拉列表插件:

  1. <script type="text/javascript">
  2.   // Execute on page load
  3.   $(function () {
  4.       $('#myList').ddlist({
  5.         width: 270,
  6.         onSelected: function (index, value, text) {
  7.           // Do something with selected option
  8.           ...
  9.         }
  10.       });
  11.   });
  12. </script>

获取下拉列表的值,有三种方法可以指定列表项的值:

在某个选项上设置“selected”;

你可以在插件初始化的时候设置“selectionIndex”的值来选择指定的项;

如果以上两个选项都未被设定,那么第一个选项将被执行

Example 1:

  1. <select id="myList">
  2.   <option value="0">Red</option>
  3.   <option value="1" selected="selected">Green</option>
  4.   <option value="2">Blue</option>
  5. </select>

'Green'将被选择为默认选项。

Example 2:

  1. <select id="myList">
  2.   <option value="0">Red</option>
  3.   <option value="1">Green</option>
  4.   <option value="2">Blue</option>
  5. </select>
  6. <script type="text/javascript">
  7.   // Execute on page load
  8.   $(function () {
  9.       $('#myList').ddlist({
  10.         width: 270,
  11.         selectionIndex: 2,
  12.         onSelected: function (index, value, text) {
  13.           // Do something with selected option
  14.           ...
  15.         }
  16.       });
  17.   });
  18. </script>

例子2中,"Blue"将被设置为默认选项。

带图片选项

你可以为每一个选项指定一张图和段描文本。你必须通过HTML5的data-imagesrc 和data-description属性来指定它们。

  1. <select id="myList">
  2.   <option value="0" data-imagesrc="/images/option0img.png" data-description="A description for the option">text - 0</option>
  3.   ...
  4.   <option value="4" data-imagesrc="/images/option4img.png" data-description="A description for the option">text - 4</option>
  5. </select>

编写CSS样式

在该下拉列表插件带有一个CSS文件包含当前列表的内部元素的各种样式,但是如果你想自定义下拉列表的样式,那么你必须知道该下拉列表的DOM结构:

  1. <div id="ddList-[select-id]" class="ddListContainer">
  2.   <a>
  3.     <img src="option-image-url" />
  4.     <label>option-text</label>
  5.     <small>option-description</small>
  6.   </a>
  7.   <span class="ddListArrow"></span>
  8.   <ul>
  9.     <li>
  10.       <a>
  11.         <img src="option-image-url" />
  12.         <label>option-text</label>
  13.         <small>option-description</small>
  14.     </li>
  15.     ...
  16.     <li>..</li>
  17.   </ul>
  18. </div>

根元素是一个id为ddList-开头的select元素

第一个<a>元素是下拉列表的可见选项:

<label>元素用于显示选项

<img>元素和<small>元素是可选的,它们用于显示选项前面的图标和选项的描述文本

第二个<span>元素是下拉列表的上下箭头

第三个<ul>元素包含所有的选项

API

初始化方法:

  1. [jqObject(s)].ddlist(options)

可选参数:

width:Integer default:260-该参数对于下拉列表的宽度。

selectionIndex:Integer default:0-该参数指定初始化是哪个选项被选择。

disabled:Boolean default:false-设置为“true”则下拉列表不可用。

showSelectionTextOnly:Boolean default:false-设置为“true”仅下拉列表的文本。

onSelectedOnInit:Boolean default:false-设置为“true”时onSelected回调函数被触发。

onSelected:callback function Signature: onSelected: function (index, value, text) { }。

index:列表被选择项的index

value:列表被选择项的value

text:列表被选择项的text
详细参考:https://github.com/JosHuybrighs/service.ddlist.jquery

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!