开发者社区> lzhdim> 正文

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/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery插件制作 -- 5.提示框插件
  今天我们介绍的是提示框插件tooltip的制作,其中还会介绍到自定义选择器插件的开发。   我们首先来介绍自定义选择器的开发,他的代码结构如下: (function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code }; })(jQuery); 调用时候的写法: $(a:customselector)   现在我们先解释下函数中所使用到的各个参数。
762 0
jquery插件开发样例-jquery插件开发(1)
/*! * jQuery lightweight plugin boilerplate * Original author: @ajpiano * Further changes, comments: @addyosmani * Licensed under the MIT license */ // the semi-colon before the function inv
1008 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
20910 0
jquery插件制作 -- 2.图片走廊:gallery
  本文主要内容是讲解图片走廊-gallery的实现。   首先创建jquery.gallery.js的插件文件,构建程序骨架。 (function ($) {   $.fn.gallery = function () {     return this.
866 0
jquery插件制作教程 txtHover(转载)
http://www.jb51.net/article/31082.htm 该系列文章是我阅读
687 0
+关注
lzhdim
人在20岁以意志力著称,在30岁以智慧取胜,在40岁则靠的是理智的判断。 一个人只有时刻保持幸福快乐的感觉,才会使自己更加热爱生命,热爱生活。只有快乐,愉快的心情,才是创造力和人生动力的源泉;只有不断自己创造快乐,与自己快乐相处的人,才能远离痛苦与烦恼,才能拥有快乐的人生。
522
文章
4
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载