时间:2021-05-25
具体思路就不说了,比较常规, 代码中也有注释. 使用方法也不费话了, 就是一个简单的全局函数封装, 不懂的看下源码中注释或Google .
另外, 有兴趣的朋友,可以尝试在本插件基础上改一个可输入的下拉列表. 思路差不多,哈.
演示及代码: 演示代码代码下载
运行代码:
用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think body{font-size:0.8em;letter-spacing:1px;font-family:\5fae\8f6f\96c5\9ed1;line-height:1.8em} div,h2,p,fieldset,legend,span,em,dl,dt,dd{margin:0;padding:0} input{font:12px/1.5 tahoma,arial,sans-serif;vertical-align:middle} h1{font-size:1em;font-weight:normal} h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none} h1 a:hover{background:#a40000;color:#fff;text-decoration:underline} h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative} #demo{position:relative;width:500px;height:260px;border:1px solid #ccc} #demo dl.tips{margin:2px;padding:8px;background:#f2f2f2;line-height:24px} #demo dl.tips dt{font-size:14px;font-weight:bolder} #demo dl.tips dd{text-indent:24px} #demo .demo_b{top:180px;margin-left:-90px;z-index:888} #demo .demo_c{top:220px;margin-left:-60px;z-index:777} .selectitem{position:absolute;top:140px;left:50%;margin-left:-120px;overflow:hidden;width:180px;height:30px;background:#dff0f0;font-size:14px;line-height:30px;filter:alpha(opacity:80);opacity:0.8;cursor:pointer;z-index:999} .selectitem dt,.selectitem dd{padding-left:28px;background:transparent url(http://mrthink.net/demo/images/20101031sprite.png) 30px 0 no-repeat} .selectitem dt.drop{background-position:0 -30px;} .selectitem dt.shrink{background-position:0 0} .selectitem dd.hover{background-color:#b6e2e2} .selectitem dl .tag_news{background-position:0 -60px;color:#bd0000} .selectitem dl .tag_it{background-position:0 -90px;color:#0759E0} .selectitem dl .tag_reading{background-position:0 -120px;color:#409513} .selectitem dl .tag_interests{background-position:0 -150px;color:#EE7D0E} .selectitem dl .tag_career{background-position:0 -180px;color:#000382} .selectitem dl .tag_living{background-position:0 -210px;color:#733900} .selectitem dl .tag_sports{background-position:0 -240px;color:#9B018B}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用HTML自身的select下拉列表。然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用
因为做的,自定义列表比较多,现在想用自定义页面吧所有的列表调用出来。用灵动标签可以调用出列表的名字,但是连接无法调出解决方法:[e:loop={"select*
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的
很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用js+div来模拟了,
简介这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明。同时也可自定义弹出框。项目地址:http