通过本文主要向大家介绍了jQuery,模拟下拉框等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
很多群员问了关于下拉框美化的问题,现打一个下拉框美化的制作过程,其实是模拟出来的下拉框。
问题1:为什么要模拟下拉框?
1,浏览器自带的 下拉框样式不好看。
2,在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面。
OK,明白这个问题后,我们就开始用jQuery制作模拟下拉框。
第一步:先搭建好结构
这是普通的下拉框代码:
XML/HTML代码
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
第二步:构建效果
主要就是Jquery代码:
JavaScript代码
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
其实到这里已经算是完成了。为了方便利用,就做成插件吧。
http://demo.jb51.net/js/JQuery_select/demo3.html
完整实例打包下载
问题1:为什么要模拟下拉框?
1,浏览器自带的 下拉框样式不好看。
2,在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面。
OK,明白这个问题后,我们就开始用jQuery制作模拟下拉框。
第一步:先搭建好结构
这是普通的下拉框代码:
XML/HTML代码
1,先搭建好结构
VS 选项一- 选项一
- 选项二
- 选项三
- 选项四
- 选项五
- 选项六
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
第二步:构建效果
主要就是Jquery代码:
JavaScript代码
2,构建效果(需要刷新下,才能看到效果)
选项一- 选项一
- 选项二
- 选项三
- 选项四
- 选项五
- 选项六
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
其实到这里已经算是完成了。为了方便利用,就做成插件吧。
http://demo.jb51.net/js/JQuery_select/demo3.html
完整实例打包下载