jquery仿QQ登录账号选择下拉框效果(2)

三个函数中的参数我都加了个$符号,便于自己知道这是一个jquery对象。这几个函数中没什么技术难点,都是非常普通自然的逻辑,大家也可以随时根据自己的不同需求改变代码,插件总共只有50几行,非常容易修改。

下面是调用插件:

<script type="text/javascript"> $(document).ready(function() { $('#combox').combox({datas:['选项一','选项二','选项三']}); }) </script> </head> <body>   <span></span> </body> </html>

一句话就可以了,挺方便的。 

补充说明:
最近在实际项目中使用了这个插件,碰到了些新问题:

1.在实际项目中,最后是要取那个动态生成的输入框中的值的,这样的话就得定位这个输入框,可以在默认参数中新增了一个inputId,控制它

2.如果下拉列表中没有内容,那就没必要调用_initSelect这个方法了

if(options.datas.length > 0) _initSelect(_this, this);//初始化下拉列表

3.点击了下来按钮后,下拉内容显示,一定要选中某个内容后,才能把下拉框隐藏掉,这个不太方便,在网上搜索了相关代码

//点击其他地方影藏下拉列表 $(document).click(function(e) { e = window.event || e; // 兼容IE7 var $obj = $(e.srcElement || e.target); if($obj.closest($border).length <= 0) { $ul.hide(); $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变 } });

如果大家还想深入学习,可以点击jquery下拉框效果汇总JavaScript下拉框效果汇总进行学习。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgyjzd.html