基于jQuery select下拉框美化插件
分享一款基于jQuery select下拉框美化插件。该插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:
实现的代码。
html代码:
<table>
<tr>
<td>
<h2>
演示1</h2>
<select name="drop1" class="ui-select">
<option value="">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
<option selected value="4">structure 4</option>
<option value="5">structure 5</option>
<option value="6">structure 6</option>
<option value="7">structure 7</option>
<option value="8">structure 8</option>
<option value="9">structure 9</option>
<option value="10">structure 10</option>
<option value="11">structure 11</option>
</select>
</td>
<td>
<h2>
演示2</h2>
<select name="drop2" class="ui-select">
<option value="">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
</select>
</td>
<td>
<h2>
演示3</h2>
<select name="drop3" class="ui-select" disabled="disabled">
<option value="0">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
</select>
</td>
<td>
<input type="reset" value="Reset" />
<input type="submit" value="Send" />
</td>
</tr>
</table>
</form>
<form action="" method="get">
<table>
<tr>
<td>
<h2>
Select 演示</h2>
<select name="drop1" class="ui-select">
<option value="">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
<option selected value="4">structure 4</option>
<option value="5">structure 5</option>
<option value="6">structure 6</option>
<option value="7">structure 7</option>
<option value="8">structure 8</option>
<option value="9">structure 9</option>
<option value="10">structure 10</option>
<option value="11">structure 11</option>
</select>
</td>
<td>
<h2>
Select 演示</h2>
<select name="drop2" class="ui-select">
<option value="">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
</select>
</td>
<td>
<h2>
Select 关闭演示</h2>
<select name="drop3" class="ui-select" disabled="disabled">
<option value="0">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
</select>
</td>
<td>
<input type="reset" value="Reset" />
<input type="submit" value="Send" />
</td>
</tr>
</table>
via:http://www.w2bc.com/Article/23958
基于jQuery select下拉框美化插件的更多相关文章
- Jquery Select 下拉框处理
$("#select").empty();//清空 $("#select").append($("<option/>").val ...
- select下拉框美化
其实用下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...
- 【Select2】带搜索框的下拉框美化插件
1 引入js css 文件 <script src="js/jquery-1.11.1.min.js"></script> <script src= ...
- 一款基于jQuery的联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)
效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- 基于Bootstrap的下拉框插件bootstrap-select
写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
随机推荐
- [Angular-Scaled web] 3. Basic State with ui-router
1. Install ui-route, include js file in html and add dependence in js file. bower install angular-ui ...
- Android单个进程内存分配策略
android不同设备单个进程可用内存是不一样的,可以查看/system/build.prop文件. # This is a high density device with more memory, ...
- 微信群的id
今天网速慢了,竟然把微信群的id卡出来了,记录一下. 格式应该是一个像QQ群一样的数字,然后+@chatroom 看图! 文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论.
- Python 更新dict
更新dict 对需要更新的key-value 直接赋值即可dict是可变的,也就是说,我们可以随时往dict中添加新的 key-value.比如已有dict:d = { 'Adam': 95, 'Li ...
- javascript:void(0)和onclick=fn(this)
今天在写代码中遇到一个这样的问题.关于点击在html中添加点击事件,顺便把this对象通过参数传过去. <a href='#' \>查看详情</a> <a href='j ...
- linux 16进制 产看文件
hexdump - ascii, decimal, hexadecimal, octal dump 查看十六机制的首选工具. -c 每单元以字节为单位,显示出对应的ASCII码 -C 每单元以字 ...
- 04-maven学习-pom.xml解析
pom.xml里面各个配置的含义如下: <!-- 主项目标识,表示当前maven属于哪个实际项目,与包是一样的 --> <groupId>反写的公司网址+项目名</gro ...
- 执行 maven 命令 报错Unable to add module to the current project as it is not of packaging type 'pom'[转]
今天学习在本地搭建Maven工程时,执行了mvn archetype:generate 命令,报错. Unable to create project from archetype [org.apac ...
- oracle 错误码查看命令oerr ora及常用错误码总结--不断更新
oracle 错误码查看命令oerr ora及常用错误码总结--不断更新 1.ORA-00907: 缺失右括号 我自己的问题出在 字段的default 和 not null 顺序反了,defalut ...
- github get 请求指定页面的代码
https://raw.githubusercontent.com/dragon8github/wx-h5/master/push.sh