最近使用了mcDropdown插件,百度一查,资料较少,只看到了mcDropdown官网的英文说明文档,所以今天就写点,以便以后使用。
第一步:引用jquery库和css
- jQuery v1.2.6 (or higher)*
- jquery.mcdropdown.js Plug-in
- jquery.bgiframe.js Plug-in (Optional; for fixing overlay issues in IE6)
- <link href="/Content/css/jquery.mcdropdown.min.css" rel="stylesheet" type="text/css" />
好像我引用一个jQuery 1.8有一个方法不支持,不知为什么。
第二步:实例化 一个对象
$("#mcdropdown").mcDropdown(list, [options]);
如: $("#txtNewsCategory").mcDropdown("#categorymenu");
txtNewsCategory是一个文本框 <input type="text" id="txtNewsCategory" disabled="disabled" value=''/>
categorymenu 是一个数据源 格式如下:
<ul id="categorymenu" class="mcdropdown_menu"> <li rel="1"> Arts & Humanities <ul> <li rel="2"> Photography <ul> <li rel="3"> 3D </li> <li rel="4"> Digital </li> </ul> </li> <li rel="5"> History </li> <li rel="6"> Literature </li> </ul> </li> <li rel="7"> Business & Economy </li> <li rel="8"> Computers & Internet </li> <li rel="9"> Education </li> <li rel="11"> Entertainment <ul> <li rel="12"> Movies </li> <li rel="13"> TV Shows </li> <li rel="14"> Music </li> <li rel="15"> Humor </li> </ul> </li> <li rel="10"> Health </li> </ul>
如果要绑定数据到插件上则需:
var mc= $("#txtNewsCategory").mcDropdown();
mc.setValue($("#hidLevel").val()); //设置下拉列表的值
不知为什么,直接把值绑定到value好像不行?
使用的话大概就是这样了,详情请参考英文文档
http://www.givainc.com/labs/mcdropdown_jquery_plugin.cfm