通过JS模拟select表单,达到美化效果[demo]
.m-form{background:#fff;padding:50px;font-family:12px/1.5 arial,\5b8b\4f53,sans-serif;}
.m-form ul,.m-form li,.m-form dl,.m-form dt,.m-form dd{padding:0;margin:0;list-style:none;}
.m-form label{color:#6E6E6E;display:inline-block;height:36px;float:left;line-height:36px;width:120px;text-align:right;padding-right:20px;}
.m-form .item{height:46px;margin-bottom:10px;}
.m-form .t{display:block;height:36px;line-height:36px;padding:0 10px;float:left;}
.m-select{height:36px;float:left;width:234px;background-image:url(http://dreamback.github.io/selectorjs/src/images/selector.png);background-repeat:no-repeat;background-position:100% 0;border-radius: 5px;}
.m-select-w{width:100px;}
.m-focus{background-position:100% 100%;position:relative;}
.m-select dt{line-height:32px;border:2px solid #E3E3E3;text-align:center;text-indent:-31px;cursor:pointer;height:32px;border-radius: 5px;}
.m-select dd{width:100%;overflow-y:auto;background:#fff;position:absolute;left:0;top:34px;display:none;border-top:2px solid #E3E3E3;border-bottom:2px solid #E3E3E3;border-radius: 5px;box-shadow:0 6px 12px rgba(0,0,0,0.175)}
.m-select dd a{display:block;font-size:14px;text-indent:1em;line-height:32px;border-right:2px solid #E3E3E3;border-left:2px solid #E3E3E3;height:32px;}
.m-select dd a:hover{text-decoration:none;background:#eee;}
.m-select dd.age,.m-select dd.height{width:400px;border:2px solid #E3E3E3;}
.m-select dd.age a,.m-select dd.height a{float:left;width:40px;text-align:center;border:none;display:inline-block;text-indent:0;height:24px;line-height:24px;}
.m-select dd.region{width:460px;height:200px;border:2px solid #E3E3E3;}
.region .tab{height:28px;padding:10px 0 0 10px;}
.region .tab li{float:left;height:24px;line-height:24px;padding:0 20px;border:1px solid #E3E3E3;margin-right:5px;cursor:pointer;}
.region .tab li.on{border:2px solid #7DB3D4;cursor:default;position:relative;background:#7DB3D4;color:#fff;}
.region .tab-con{border-top:2px solid #7DB3D4;margin:0 10px 10px 10px;position:relative;top:-2px;background:#fff;}
.m-select dd.region a{float:left;text-align:center;border:none;width:62px;overflow:hidden;overflow:hidden;display:inline-block;text-indent:0;}
.m-form .form-item{position:static;margin-bottom:200px;}
通过JS模拟select表单,达到美化效果
Demo
- 未婚
至
至
至
Code
//普通模式 new SelectorJS.selector.init({ id:'#Marriage', data: [["1", "未婚"], ["3", "离异"], ["4", "丧偶"] ], value:'未婚' }); //年龄联动 new SelectorJS.age('#Age0','#Age1',25,27); //身高联动 new SelectorJS.heightMulti('#Height0','#Height1',168,178); //地区联动 二级 new SelectorJS.area.init('#AreaSelector','101020600', false); //地区联动 三级 new SelectorJS.area.init('#AreaSelector2','101151202', true); //自定义联动 var salaryCode = [["1", "1000"], ["2", "2000"], ["3", "3000"], ["4", "5000"], ["5", "8000"], ["6", "10000"], ["7", "20000"], ["8", "50000"], ["9", "50000以上"] ]; var salaryDefault1 = '1'; var salaryDefault2 = '4'; new SelectorJS.selector.init({ id:'#Salary0', data: salaryCode, value:salaryDefault1, click: function(val, index){ new SelectorJS.selector.init({ id:'#Salary1', data: salaryCode.slice(index), value: Math.max(salaryCode[index][0], parseInt(salaryDefault2) ) }).select.click(); } }); new SelectorJS.selector.init({ id:'#Salary1', data: salaryCode.slice(parseInt(salaryDefault1)), value: salaryDefault2 });
说明
Selector.js与address.json两个文件必须放在同一个目录下。当调用地区的方法的时候才加载adrress文件
github下载地址:http://dreamback.github.io/selectorjs/index.html
通过JS模拟select表单,达到美化效果[demo]的更多相关文章
- 通过JS模拟select表单,达到美化效果[demo][转]
转自: http://www.cnblogs.com/dreamback/p/SelectorJS.html 通过JS模拟select表单,达到美化效果 Demo ------------------ ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- js 模拟form表单post提交
var generateHideElement = function (name, value) { var tempInput = document.createElement("inpu ...
- select表单元素详解及下拉列表模拟实现
原文地址:→看过来 写在前面 select 是HTML表单元素中很常用的一个,其中很重要的几个属性常被忽略,但这几个属性却能帮助我们完成很多的功能,当然,select下拉列表默认样式很不友好,所以更多 ...
- div仿checkbox表单样式美化及功能
div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...
- .Net模拟提交表单
2016-09-0210:49:20 以中邮速递API为服务接口,由于提交方式为表单提交,我要获取返回值来处理其他业务,所以一开始尝试采用Js后台获取返回值,但是涉及到跨域请求限制问题,那边服务端接口 ...
- nodejs 模拟form表单上传文件
使用nodejs来模拟form表单进行文件上传,可以同时上传多个文件. 以前项目里有这个方法,最近在客户那里出问题了,同事说,这个方法从来就没管用过,SO,用了一天时间把这个方法给搞出来了(觉得花费的 ...
- js_ajax模拟form表单提交_多文件上传_支持单个删除
需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...
- 杂记-格式化Date默认格式,日期加一天,jstl判断字符类型,ajax模拟from表单后台跳转页面,jstl访问数据库并在页面显示
1.格式化Date默认格式 String str="Sun Oct 08 22:36:45 CST 2017"; SimpleDateFormat sdf = new Simple ...
随机推荐
- Qt信号槽的一些事
注:此文是站在Qt5的角度说的,对于Qt4部分是不适用的. 1.先说Qt信号槽的几种连接方式和执行方式. 1)Qt信号槽给出了五种连接方式: Qt::AutoConnection 0 自动连接:默认的 ...
- C++之程序时间统计类实现
/********** TimeCounter.h huangsy13@gmail.com **********/ #ifndef TIMECOUNTER #define TIMECOUNTER #i ...
- tomcat:run和tomcat7:run的区别,以及Apache Tomcat Maven Plugin 相关
起因: 同事部署的maven项目,之前使用 jetty,现在切换到 tomcat,但是他使用的命令是 tomcat:run ,而不是 tomcat7:run,能启动,但出现问题了. 于是搜索了一番,想 ...
- 初识EseNt
转自:http://www.cnblogs.com/goosao/archive/2011/09/23/2186412.html 一.什么是EseNtEseNt(Extensible Storage ...
- HDU 1020:Encoding
pid=1020">Encoding Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
- 【Java面试题】30 子线程循环10次,接着主线程循环100,接着又回到子线程循环10次,接着再回到主线程又循环100,如此循环50次,请写出程序。
题目如下: 子线程循环10次,接着主线程循环100,接着又回到子线程循环10次, 接着再回到主线程又循环100,如此循环50次 思路如下: 子线程语主线程为互斥,可用SYNCHRONIZED.很容易想 ...
- AOP技术应用和研究--AOP简单应用
为了更好的理解AOP实践和体现AOP的优势.我们始终将OOP和AOP的比較贯穿到下文中.并在终于总结出AOP与OOP相比所拥有的长处,AOP的缺点以及AOP一般的使用场景. 1.1 问题空间到解空间的 ...
- v$Session详解
从Oracle10gR1开始,Oracle在V$SESSION中增加关于等待事件的字段,实际上也就是把原来V$SESSION_WAIT视图中的所有字段全部整合到了V$SESSION视图中,开始的时候我 ...
- oracle解决多表关联分组查询问题
做了一个功能需要分组查询,同时查询A表分组查询的ID需要关联B表的数据,本来想两个表关联查询,但是报group by 语法不正确.所以做了以下修改. select count(*), cindexid ...
- 类似股软(大智慧)之键盘精灵的 vc2008--UNICODE 环境实现
键盘精灵是指,当按下键盘上任意一个数字.字母或符号的时候,都会弹出“键盘精灵”,其类似于股票软件(如大智慧)中的.可以在这里面输入中英文和数字搜索您想要的东西.可以通过输入代码.名称或名称的汉语拼音首 ...