表单/表格

Image DropDown下拉菜单表单jQuery插件

创客主机


Image DropDown是一款用于美化select下拉菜单的jQuery插件。它能为select下拉菜单的每个选项添加一个小图标,并对下拉菜单的界面进行各种美化效果。Image DropDown v2.3 jQuery下拉菜单美化插件的新特性:

每个下拉菜单都有各自的属性

兼容W3C标准

纯jQuery制作的插件

可用键盘进行操作

可进行多项选择

同一个页面可以使用不同的皮肤

支持CSS Sprite

面向对象

通过对象可以完成“打开/关闭”操作

通过对象可以完成“添加/删除”操作

通过对象可以完成“禁用/可用”操作

通过对象可以设置大部分的属性
基本使用方法jQuery版本需要大于1.2.6版本。

HTML结构

先来看看原生的select下拉框。

  1. <select name="webmenu" id="webmenu"  onchange="showValue(this.value)">
  2.     <option value="calendar">Calendar</option>
  3.     <option value="shopping_cart">Shopping Cart</option>
  4.     <option value="cd">CD</option>
  5.     <option value="email"  selected="selected">Email</option>
  6.     <option value="faq">FAQ</option>
  7.     <option value="games">Games</option>
  8. </select>

我们要使用的select下拉框的结构如下:

  1. <select name="webmenu" id="webmenu" onchange="showValue(this.value)">
  2.     <option value="calendar" title="icons/icon_calendar.gif">Calendar</option>
  3.     <option value="shopping_cart" title="icons/icon_cart.gif">Shopping Cart</option>
  4.     <option value="cd" title="icons/icon_cd.gif">CD</option>
  5.     <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
  6.     <option value="faq" title="icons/icon_faq.gif">FAQ</option>
  7.     <option value="games" title="icons/icon_games.gif">Games</option>
  8. </select>

引入js文件:

  1. <script src="msdropdown/js/jquery-1.3.2.min.js" type="text/javascript"></script>
  2. <script src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>
  3. <link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />

调用方法:

  1. <script language="javascript">
  2.   $(document).ready(function(e) {
  3.   try {
  4.   $("body select").msDropDown();
  5.   } catch(e) {
  6.   alert(e.message);
  7.   }
  8.   });
  9. </script>

通过ID创建下拉框

  1. // target only one id
  2. $("#combo2").msDropDown();
  3. // target multiple ids
  4. $("#combo1, #combo2").msDropDown();
  5. //by wild card
  6. $("body select").msDropDown();
  7. //or
  8. $("#divid select").msDropDown();
  9. //or 
  10. $("#formid select").msDropDown();

方法和属性

  1. //convert normal combobox to image comboxbox
  2. 1. $("#comboboxid").msDropDown();
  3. //Show/hide icon on title bar. by default its "true"; 
  4. 2. $("#combo1").msDropDown({showIcon:false}); 
  5. //Use inline style
  6. 3. $("#combo1").msDropDown({style:'background-color:#333, font-size:24px'}); 
  7. //Visible rows (it would be good if you enter "rowHeight" when using "visibleRows");
  8. 4. $("#combo1").msDropDown({visibleRows:5, rowHeight:23});
  9. 5. $("#combo1").msDropDown({onInit:'callinitmethod'}); //this method will be called when your dropdown is initialized.

如何更改皮肤?

  1. //Multiple skin on same page
  2. $("#comboboxid").msDropDown({mainCSS:'dd2'}); //dd2 is your main CSS
  3. $("#comboboxid2").msDropDown(); //dd is default;

dd2.css是你定义的css样式。

面向对象

  1. var oDD = $('#comboboxid').msDropDown().data("dd");
  2. oDD.add(new option({text:'lorem', value:'lorem'})); // behavior is same as original dropdown. 
  3. //or
  4. oDD.add({text:'lorem', value:'lorem', title:'images/ok.gif'}); //will add icon too.

函数

  1. var oHandler = $('#comboboxid').msDropDown().data("dd");
  2. oHandler.open();
  3. //open dropdown
  4.  
  5. var oHandler = $('#comboboxid').msDropDown().data("dd");
  6. oHandler.close();
  7. //close dropdown
  8.  
  9. var oHandler = $('#comboboxid').msDropDown().data("dd");
  10. oHandler.remove(index);
  11. //remove options
  12.  
  13. var oHandler = $('#comboboxid').msDropDown().data("dd");
  14. oHandler.form();
  15. //Returns form name
  16.  
  17. var oHandler = $('#comboboxid').msDropDown().data("dd");
  18. oHandler.set(property, value);
  19. //set property
  20.  
  21. var oHandler = $('#comboboxid').msDropDown().data("dd");
  22. oHandler.get([property]);
  23. //get property - get all properties without passing any argument.
  24.  
  25. var oHandler = $('#comboboxid').msDropDown().data("dd");
  26. oHandler.item([index]);
  27. //Returns option item
  28.  
  29. var oHandler = $('#comboboxid').msDropDown().data("dd");
  30. oHandler.namedItem(nm);
  31. //Returns the the named option item from a <select> element.
  32.  
  33. var oHandler = $('#comboboxid').msDropDown().data("dd");
  34. oHandler.visible([true,false]);
  35. //Set or get the visible property
  36.  
  37. var oHandler = $('#comboboxid').msDropDown().data("dd");
  38. oHandler.disabled(true|false);
  39. //Set the disabled property
  40.  
  41. var oHandler = $('#comboboxid').msDropDown().data("dd");
  42. oHandler.multiple([true|false]);
  43. //Set or get the multiple property
  44.  
  45. var oHandler = $('#comboboxid').msDropDown().data("dd");
  46. oHandler.size([true|false]);
  47. //Set or get  the size property
(0)

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

阿里云

热评文章

发表评论

嘿,欢迎咨询!