jquery 下拉菜单niceForm插件,支持单选和多选

来源:转载

在html中select总是那么不好看,秀多时候我们想对select下拉菜单进行美化都要用九牛二虎之力才可以做出来,但是可能还不兼容,下面我来介绍一个jquery的niceForm插件来美化select控件。

jquery+%CF%C2%C0%AD%B2%CB%B5%A5/" target="_blank">jquery 下拉菜单插件

使用方法

 代码如下 复制代码

$(function(){

   //调用方式

   $("select").niceForm({

   eventType:'click',  //默认为单击事件

  change:function(){} //下拉菜单发生change事件时触发的回调函数

      });

});

html代码如下定义:

(html部分和平常写的方式一样,其中data-width用来自定义宽度)

单选菜单

 代码如下 复制代码

<select name="select" id="select0" data-width="100">

 <option value="0">--请选择--</option>

 <option value="1">陕西</option>

 <option value="2" selected="selected" >广东</option>

 <option value="3">北京</option>

 <option value="4">四川</option>

 <option value="5">山东</option> <option value="6">河南</option>
</select>

多选菜单

 代码如下 复制代码

<select name="select1" id="select1" multiple="multiple">
 <option value="0">选择省份</option>
 <option value="1">陕西</option>
 <option value="2" selected="selected" >广东</option>
 <option value="3" selected="selected" >北京</option>
 <option value="4">四川</option>
 <option value="5">山东</option>
 <option value="6">河南</option>
</select>

实例

 代码如下 复制代码

<!doctype html>
<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" href="css/jquery.niceForm.css" type="text/css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.niceForm.js"></script>
<style type="text/css">
body, td, th {
 font-size: 12px;
}
</style>
<script type="text/javascript">
$(function(){
 $("select").niceForm({
   eventType:'click',
  change:function(){}
      });
  });
</script>
</head>

<body>
//下拉框美化 <br>
<br>
<br>
<p>单选菜单</p>
<select name="select" id="select0" data-width="100">
 <option value="0">--请选择--</option>
 <option value="1">陕西</option>
 <option value="2" selected="selected" >广东</option>
 <option value="3">北京</option>
 <option value="4">四川</option>
 <option value="5">山东</option>
 <option value="6">河南</option>
</select>

<select id="visitLimit" name="blogUserBean.visitLimit" class="select" data-width="100">
 <option value="">--请选择--</option>
 <option value="VISIT_LIMIT_CLASS">仅班级可见</option>
 <option value="VISIT_LIMIT_ALL">所有人可见</option>
 <option value="VISIT_LIMIT_FRIEND">好友可见</option>
 <option value="VISIT_LIMIT_SELF">仅自己可见</option>
</select>
<br>
<br>
<br>
<br>
<p>多选菜单</p>
<select name="select1" id="select1" multiple="multiple">
 <option value="0">选择省份</option>
 <option value="1">陕西</option>
 <option value="2" selected="selected" >广东</option>
 <option value="3" selected="selected" >北京</option>
 <option value="4">四川</option>
 <option value="5">山东</option>
 <option value="6">河南</option>
</select>
 
</body>
</html>

友情提示,实例中的jquery与nicform插件大家要到官方下载之后才可以,本文章只提供实例不提供效果。




分享给朋友:
您可能感兴趣的文章:
随机阅读: