jquery仿QQ登录账号选择下拉框效果_jquery_脚本之家

2019-12-09 16:01 来源:未知

QQ登陆的时候,能够筛选早先登陆过的账户,那么些事物也得以在网址登陆的时候利用,所以自身就想做叁个那样的插件;在英特网查了重重,未有找到符合自身的,所以决定机关制作三个。

原理便是四个textbox加二个ul模拟下拉框,用font模拟多少个下拉按键。

豆蔻梢头、制作静态效果

先用css和html,做出一个应有有的样子。这里那五个自个儿利用的是字体,能够在icomoon网址上边自个儿构建。用字体的好处是和输入框定位很有利,何况还足以调节大小颜色等,唯生龙活虎的阙如是IE6和IE7由于不支持:before选拔器,招致敬谢不敏展现这种字体,但能够透过有个别别样方式完毕,我们能够本身尝尝下。上边是html代码

   选项一 选项二 选项三 选项四 

1、标签中有style和class,这几个style就是必需属性,一定要有

2、最外面是用span来做包裹的,然后给了个inline-block属性,之所以用行内成分是为着今后布局的造福,换到块成分也是足以的,但广大时候块成分会陪伴着float浮动等体制,调整起来相比麻烦

3、ficomoon icon-angle-bottom在概念字体

4、span的属性position是relative,下拉自己就筹算用ul定位来模拟,ul的position是absolute,top将来能够依照jquery来赢得span的莫斯中国科学技术大学学设置,left就写死了

5、li里面包车型地铁内容本人加了个a标签,这里就是想偷懒一下,a标签有个:hover伪类,移上去能够转移CSS,那样笔者就会少写这一个移到剧情上去变样式的特效

@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-fl11l'); src:url('fonts/icomoon.eot?#iefix-fl11l') format, url('fonts/icomoon.woff?-fl11l') format, url('fonts/icomoon.ttf?-fl11l') format, url('fonts/icomoon.svg?-fl11l#icomoon') format; font-weight: normal; font-style: normal;}.ficomoon{font-family:'icomoon';}.icon-angle-top:before {content: "f102"}.icon-angle-bottom:before {content: "f103"}/*下面的可根据自己的实际情况做修改*/.combox_border{border:1px solid #c2c2c2;height:28px;width:245px}.combox_input{border:0;line-height:25px;height:25px;padding-left: 5px;width:85%;vertical-align: middle;}.combox_button{width:12%;text-align:center;vertical-align: middle;cursor:pointer;border-left:1px solid #c2c2c2}.combox_select{border:1px solid #c2c2c2;border-top:0;width:100%}.combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;}.combox_select a {display: block;line-height: 28px;padding: 0 8px;text-decoration: none;color: #666;}.combox_select a:hover {text-decoration: none;background:#f5f5f5}

这里的combox_border等体制能够自定义,能够加CSS3样式美化,小编那边就做了个留心的体裁。

二、制作JS特效

在做JS的时候,蒙受个意外的难题,正是坐落其余浏览器中都不会报错,然而在IE6死活提示未安装的靶子属性的荒唐,最终开掘是因为js文件编码的主题材料,不是UTF-8,改换下编码就足以了。

首先三个jquery插件格式

{ $.fn.combox = function;

var defaults = { borderCss: "combox_border", inputCss: "combox_input", buttonCss: "combox_button", selectCss: "combox_select", datas:[]};var options = $.extend;

this.each { var _this = $; _this = _initBorder;//初始化外框CSS IE6中需要有返回值 _this = _initInput;//初始化输入框 _initSelect;

动态的改造输入框,按键,下拉框,附上样式和时间。笔者将八个渲染分别坐落于了几个函数中,那样明晰一点

function _initBorder {//初始化外框CSS $border.css({'display':'inline-block', 'position':'relative'}).addClass; return $border; } function _initInput{//初始化输入框 $border.append(''); $border.append(''); //绑定下拉特效 $border.delegate('font', 'click', function() { var $ul = $border.children; if == 'none') { $ul.slideDown.removeClass.addClass; }else { $ul.slideUp.removeClass.addClass; } }); return $border;//IE6需要返回值 } function _initSelect {//初始化下拉列表 $border.append('

一句话就足以了,挺低价的。

补偿表明:近年在事实上项目中动用了那么些插件,碰着了些新主题素材:

1.在骨子里项目中,最后是要取那么些动态变化的输入框中的值的,这样的话就得一定那么些输入框,可以在暗许参数中新扩张了二个inputId,控制它

2.如若下拉列表中未有内容,那就没须求调用_initSelect那个主意了

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

3.点击了下来按键后,下拉内容突显,一定要选中有些内容后,工夫把下拉框隐敝掉,那一个不太实惠,在英特网搜寻了连带代码

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

万一大家还想深刻学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总举办学习。

上述便是本文的全体内容,希望对大家学习javascript程序设计具备助于。

TAG标签:
版权声明:本文由金沙澳门唯一官网发布于金沙澳门登陆网站,转载请注明出处:jquery仿QQ登录账号选择下拉框效果_jquery_脚本之家