好看的Select下拉框是如何制造的
现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?
使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它。
CSS代码部分
<style type="text/css">
.mod_select{position:absolute;left:30%;top:100px;font-familY:Arial, Helvetica, sans-serif;}
.mod_select ul{margin:;padding:;}
.mod_select ul li{list-style-type:none;float:left;margin-left:20px;height:24px;}
.select_label{color:#982F4D;float:left;line-height:24px;padding-right:10px;font-size:12px;font-weight:;}
.select_box{float:left;border:solid 1px #EDE7D6;color:#444;position:relative;cursor:pointer;width:165px;background:url(../select_bg.jpg) repeat-x;font-size:12px;}
.selet_open{display:inline-block;border-left:solid 1px #E5E5E5;position:absolute;right:;top:;width:30px;height:24px;background:url(../select_up.jpg) no-repeat center center;}
.select_txt{display:inline-block;padding-left:10px;width:135px;line-height:24px;height:24px;cursor:text;overflow:hidden;}
.option{width:165px;;border:solid 1px #EDE7D6;position:absolute;top:24px;left:-1px;z-index:;overflow:hidden;display:none;}
.option a{display:block;height:26px;line-height:26px;text-align:left;padding:0 10px;width:100%;background:#fff;}
.option a:hover{background:#FDE0E5;}
</style>
Js代码部分
<script type="text/javascript">
$(document).ready(function(){
$(".select_box").click(function(event){
event.stopPropagation();
$(this).find(".option").toggle();
$(this).parent().siblings().find(".option").hide();
});
$(document).click(function(event){
var eo=$(event.target);
if($(".select_box").is(":visible") && eo.attr("class")!="option" && !eo.parent(".option").length)
$('.option').hide();
});
/*赋值给文本框*/
$(".option a").click(function(){
var value=$(this).text();
$(this).parent().siblings(".select_txt").text(value);
$("#select_value").val(value)
})
})
</script>
Html代码部分
<div class="mod_select">
<ul>
<li>
<span class="select_label">sort buy:</span>
<div class="select_box">
<span class="select_txt"></span><a class="selet_open"><b></b></a>
<div class="option">
<a>1</a>
<a>2</a>
<a>3</a>
</div>
</div>
<br clear="all" />
</li>
<li>
<span class="select_label">View:</span>
<div class="select_box">
<span class="select_txt"></span><a class="selet_open"></a>
<div class="option">
<a>1</a>
<a>2</a>
<a>3</a>
</div>
</div>
</li>
</ul>
<input type="hidden" id="select_value" />
</div>
选中的值我们从这个元素里取$("#select_value")
就可以了。
好看的Select下拉框是如何制造的的更多相关文章
- 非常实用的select下拉框-Select2.js
在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...
- 自定义样式的select下拉框深入探索
第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
- s:select下拉框validation验证
S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- js如何获取select下拉框的value以及文本内容
select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...
- css配合js模拟的select下拉框
css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- select下拉框选择触发事件
我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...
- JavaScript获取Select下拉框Option的Value和Text值的方法
Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
随机推荐
- Android NDK编程,引入第三方.so库
android自带的编译工具NDK进行编译时(非单纯的调用第三方.so而是进行ndk编程),armeabi以及armeabi-v7a文件夹下的第三方so文件将会被删除,只会产生编译后的so文件,其他的 ...
- C# 导出word文档及批量导出word文档(3)
在初始化WordHelper时,要获取模板的相对路径.获取文档的相对路径多个地方要用到,比如批量导出时要先保存文件到指定路径下,再压缩打包下载,所以专门写了个关于获取文档的相对路径的类. #regio ...
- 软件测试 homework1
申明数组变量后,在使用的时候,出现了向上溢出的情况(程序运行过程中出现的),导致最后答案不正确,经过输出数组数据发现错误, 现在在申明数组的时候都会大致估算一下,确认申明什么样的数组不会导致溢出. 在 ...
- 百度SEO优化
下面是一些SEO优化的基本步骤: 一.内部优化 (1)TITLE,KEYWORDS,DESCRIPTION等的优化 (2)内部链接的优化,包括相关性链接,锚文本链接,各导航等链接页 (3)每天保持站内 ...
- Python3 如何优雅地使用正则表达式(详解三)
模块级别的函数 使用正则表达式也并非一定要创建模式对象,然后调用它的匹配方法.因为,re 模块同时还提供了一些全局函数,例如 match(),search(),findall(),sub() 等等.这 ...
- STL之优先队列(priority_queue)
转自网上大牛博客,原文地址:http://www.cnblogs.com/summerRQ/articles/2470130.html 先回顾队列的定义:队列(queue)维护了一组对象,进入队列的对 ...
- 转:VmWare下安装CentOS6图文安装教程
文章来自于:http://www.cnblogs.com/seesea125/archive/2012/02/25/2368255.html 查看文章索引请通过http://www.cnblogs.c ...
- PullToRefreshListView组件的OnItemClickListener中的position下标问题
/** * Pass-through method for {[url=home.php?mod=space&uid=91636]@link[/url] PullToRefreshBase#g ...
- 关于mysql的自增
http://my.oschina.net/zimingforever/blog/136599 http://flandycheng.blog.51cto.com/855176/280224 http ...
- js中()()问题
var aa=function(){}(); var bb=(function(){})(); 今天被问到这个问题,这段js有撒区别. 总结一下,两个函数都是立即执行的意思.但是不同之处是执行的顺序, ...