Image DropDown下拉菜单表单jQuery插件

PetitQ 表单/表格 2018-11-10 2.12K 0 0

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

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

也想出现在这里？联系我们吧

兼容 W3C 标准

纯 jQuery 制作的插件

可用键盘进行操作

可进行多项选择

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

支持 CSS Sprite

面向对象

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

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

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

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

HTML 结构

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

<select name="webmenu" id="webmenu"  onchange="showValue(this.value)">

    <option value="calendar">Calendar</option>

    <option value="shopping_cart">Shopping Cart</option>

```
    <option value="cd">CD</option>
```

    <option value="email"  selected="selected">Email</option>

```
    <option value="faq">FAQ</option>
```

    <option value="games">Games</option>

```
</select>
```

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

<select name="webmenu" id="webmenu" onchange="showValue(this.value)">

    <option value="calendar" title="icons/icon_calendar.gif">Calendar</option>

    <option value="shopping_cart" title="icons/icon_cart.gif">Shopping Cart</option>

    <option value="cd" title="icons/icon_cd.gif">CD</option>

    <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>

    <option value="faq" title="icons/icon_faq.gif">FAQ</option>

    <option value="games" title="icons/icon_games.gif">Games</option>

```
</select>
```

引入 js 文件：

<script src="msdropdown/js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />

调用方法：

```
<script language="javascript">
```
```
  $(document).ready(function(e) {
```
```
  try {
```
```
  $("body select").msDropDown();
```
```
  } catch(e) {
```
```
  alert(e.message);
```
```
  }
```
```
  });
```
```
</script>
```

通过 ID 创建下拉框

```
// target only one id
```
```
$("#combo2").msDropDown();
```
```
// target multiple ids
```
```
$("#combo1, #combo2").msDropDown();
```
```
//by wild card
```
```
$("body select").msDropDown();
```
```
//or
```
```
$("#divid select").msDropDown();
```
```
//or 
```
```
$("#formid select").msDropDown();
```

方法和属性

//convert normal combobox to image comboxbox

```
1. $("#comboboxid").msDropDown();
```

//Show/hide icon on title bar. by default its "true";

2. $("#combo1").msDropDown({showIcon:false});

```
//Use inline style
```

3. $("#combo1").msDropDown({style:'background-color:#333, font-size:24px'});

//Visible rows (it would be good if you enter "rowHeight" when using "visibleRows");

4. $("#combo1").msDropDown({visibleRows:5, rowHeight:23});

5. $("#combo1").msDropDown({onInit:'callinitmethod'}); //this method will be called when your dropdown is initialized.

如何更改皮肤？

```
//Multiple skin on same page
```

$("#comboboxid").msDropDown({mainCSS:'dd2'}); //dd2 is your main CSS

$("#comboboxid2").msDropDown(); //dd is default;

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

面向对象

var oDD = $('#comboboxid').msDropDown().data("dd");

oDD.add(new option({text:'lorem', value:'lorem'})); // behavior is same as original dropdown.

```
//or
```

oDD.add({text:'lorem', value:'lorem', title:'images/ok.gif'}); //will add icon too.

函数

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.open();
```
```
//open dropdown
```
```
 
```

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.close();
```
```
//close dropdown
```
```
 
```

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.remove(index);
```
```
//remove options
```
```
 
```

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.form();
```
```
//Returns form name
```
```
 
```

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.set(property, value);
```
```
//set property
```
```
 
```

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.get([property]);
```

//get property - get all properties without passing any argument.

```
 
```

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.item([index]);
```
```
//Returns option item
```
```
 
```

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.namedItem(nm);
```

//Returns the the named option item from a <select> element.

```
 
```

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.visible([true,false]);
```
```
//Set or get the visible property
```
```
 
```

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.disabled(true|false);
```
```
//Set the disabled property
```
```
 
```

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.multiple([true|false]);
```
```
//Set or get the multiple property
```
```
 
```

var oHandler = $('#comboboxid').msDropDown().data("dd");

```
oHandler.size([true|false]);
```
```
//Set or get  the size property
```

Image DropDown 下拉菜单表单 jQuery 插件

已有 530 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

表单/表格

Image DropDown下拉菜单表单jQuery插件

HTML 结构

调用方法：

面向对象

函数

Image DropDown 下拉菜单表单 jQuery 插件

相关文章

基于vue2.0的input输入框文字特效

炫酷设计表单浮动标签jQuery效果

可分页排序和搜索jQuery表格插件

发表回复取消回复

热销模板

表单/表格

HTML 结构

调用方法：

面向对象

函数

Image DropDown 下拉菜单表单 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复