jQuery插件之Select选择框

简介: 在blueidea上看到lzyy发的这个帖子,发现不错就转过来了。 起因是在实践中发现输入框input的高度无法改变,他的四周都会有空隙,也就是说无论你怎么调整,当然只作用于IE,如果调整一下的话,FF下效果又不理想,没有什么好的解决方法,除非用图片,为了追求完美,模拟就模拟吧。

在blueidea上看到lzyy发的这个帖子,发现不错就转过来了。
起因是在实践中发现输入框input的高度无法改变,他的四周都会有空隙,也就是说无论你怎么调整,当然只作用于IE,如果调整一下的话,FF下效果又不理想,没有什么好的解决方法,除非用图片,为了追求完美,模拟就模拟吧。

本人习惯用jQuery,于是就找到了nicejform,专门用来美化表单的jquery插件。(我知道坛子上有相关的文章,我也参考过,但是美化不是我的强项,所以就想找现成的)

效果查看

看源码,可以发现没有另外添加样式,id之类的,所以如果不用这个插件了,页面也无需改动。众所周知,表单美化里面select是最不好模拟的,同样nicejforms也没有很好的模拟,那就自己动手改造吧。彻底地模拟美化了select表单,可以说功能上一点都不差,修改了原版本的一些不足。


  •         
  • 点击页面空白处,弹出的options不能缩回
  • 无法设置option的value值,一律都是"#"
  • 由于都设置为了"#",所以如果select放置到了页面的下方,选择后会回到页面顶部


现在这些问题全都解决了,可以正式派上用场了,oh,yeah!

效果查看

点击下载修改后的文件

10.1日添加

其实上面那个select美化有一个非常大的问题,不过好像没有人注意到,就是当页面载入完后,在页面的底部会出现这些选项,这次重新操刀,不再是对原插件的修修补补,自己重新写了code。

  • 仅IE有效,FF下保持原状
  • 不接受键盘响应,所以上下键无效,滚轴也无效
  • 其他的应该都模仿的差不多了

由于前台编程也只是我的业余爱好,所以更加细致的模仿,只能靠大家了。

其实我自己也觉得写这么一堆未必有用,但是既然都写出来了,还是放上来吧,有用没用让大家来评价。



浏览地址: http://www.live-my-life-with-yuyi.com/lab/jquery/form_select/
目录
相关文章
|
2月前
|
JavaScript
用JQuery实现选中select里面的option显示对应的div
用JQuery实现选中select里面的option显示对应的div
|
2月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
26天前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
21 1
|
28天前
|
JavaScript PHP Perl
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
10 0
|
2月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
32 0
|
2月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
71 1
|
2月前
|
JavaScript 索引
jquery操作select(取值,设置选中)
jquery操作select(取值,设置选中)
|
2月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
42 0
|
8月前
|
存储 JavaScript 前端开发
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
83 1
|
8月前
|
JavaScript 前端开发 数据格式
Jquery前端分页插件pagination使用
Jquery前端分页插件pagination使用
87 1