div 变成option

div模拟select/option解决兼容性问题及增加可拓展性

个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此导致在IE8及以下版本浏览器中的各种问题. 这个模拟思路很简单,也很清晰,我就直接上代码了 html: 第一层div是模拟select标签,第二层div是模拟option下拉列表 <div> <div class="sim-select"></div>

jquery双向列表选择器DIV模拟版

前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:http://www.cnblogs.com/tie123abc/p/6018912.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向列表选择器DIV

IE6 select穿透问题(div 定位无法遮盖select)!

此问题,早有耳闻,可是一直都没有亲身碰到过,也就没有过多的去在意这些问题. 这一回总算是见识到了ie的厉害.虽是在ie选项中大大的写着ie版本号是ie11 .可是有些部分确实走的ie6的内核.怪不得微软天天在各种window update. 解决此问题的方法非常easy.给你须要显示的内容的后面加一个iframe,让他去挡住select不要穿透过来.这样世界就算是清净了. 例如以下html: <body> <div> <select> <option value=

div+css模拟select下拉框

<!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="lib/jquery-1.11.3.min.js" type=&q

轻松使用div模拟select下拉菜单

没有办法,平时不是万不得已我是不喜欢去模拟各类控件的,一个是麻烦,二个是对性能也有些影响,还是原生的来的实在.老板昨天发话,必须模拟赶紧的,老外最喜欢简洁干净的风格,说的貌似都很在理的样子,业务部也是一样,都是一些不懂产品的人来提需求哈哈,不说啦.功能也不难就是多耗了我一点点时间,本来是不用做的,任务早就做完了.为了满足老板提的需求我还是改了,尊重她的选择,毕竟人家是老板,这叫“做事不依东,累死都无功”,在读我文章的朋友们你要牢记了. 下面直接看我代码. <!DOCTYPE html PUBLI

Jquery 动态添加option 并给option添加数据,并帮定事件

//添加下拉框 function append_add(data) { $('#add').append( '<div class="form-group" id='+form_group_id+'>' + '<label for="shebeis">起始设备</label>' + '<select id=' + select_id + ' name="shebeis">' + '<optio

select下拉框option的样式修改

select原样式: 进行样式修改后的样式: 附上修改代码: //select外面必须包裹一个div,用来覆盖select原有的样式<div class="option"> <select name=""> <option value=" ">筛选实验类型</option> <option value="实验1">实验1</option> <opti

D3.js学习（七）

上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来的基础上添加两个东西. 添加一个按钮 <div id="option"> <input name="updateButton" type="button" value="Update" onclick="

前端开发面试题收集(css部分)

http://davidshariff.com/quiz/ 做了下这里面前端开发面试的题,发现有些不会,所以在此做个整理以供自己学习,参考,总结. 1.问: CSS属性是否区分大小写? ul { MaRGin: 10px; } 答:不区分.(HTML, CSS都不区分,但为了更好的可读性和团队协作,一般都小写,而在XHTML 中元素名称和属性是必须小写的.) 2.问:对行内元素设置margin-top 和margin-bottom是否起作用答:不起作用.(需要注意行内元素的替换元素img.in

jquery双向列表选择器select版

这个是select版的,若想美化某些样式是不支持得,可以用div模拟版的,功能基本实现能用了,需要其他功能自己加上. div模拟版链接:http://www.cnblogs.com/tie123abc/p/6018755.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向列表选择器select版</title> <script

javascript 技巧总结积累（正在积累中）

1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 <input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if (value=='') {value='郭强'}">点击时文字消

React学习笔记-8-属性和状态详解

属性的含义和用法props=properties 英文中属性的意思.属性不可以修改,也就是属性不可以由组件进行修改,组件的属性是由父组件传递过来的,相当于组件在出生的时候带的.用法第一种:直接在调用组件的时候传入一个键值对, 这个键值对可以是字符串: <HelloWorld name="李明"></HelloWorld> 可以是大括号:大括号本质上是一个js的求值表达式,里面可以写很多内容,最简单的就是写数据,直接拿到的数字 <HelloWorld na

JS技巧

2016-08-09 200多个js技巧代码(Down) word下载 200多个js技巧代码目录 1.文本框焦点问题... 6 2.网页按钮的特殊颜色... 6 3.鼠标移入移出时颜色变化... 6 4.平面按钮... 6 5.按钮颜色变化... 6 6.平面输入框... 7 7.使窗口变成指定的大小... 7 8.使文字上下滚动... 7 9.状态栏显示该页状态... 7 10.可以点击文字实现radio选项的选定... 7 11.可以在文字域的font写onclick事件... 7 12

使用CSS3 制作一个material-design 风格登录界面

心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码在编写的过程中,没有使用任何图片或者字体图标,全部使用css3完成,还是遇到一些难点和bug,所以想笔记下来,以后方便查阅. 响应式设计在这个页面中,使用下面3点来完成响应式设计最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容. margin : 20px auto; 使其保持时刻居中组件使用像素关于响应式的设计要点还有很多

Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

Angular Chart 简介在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表展示一周搜索引擎抓取变化的需求,因为之前使用过 Chart.js, 所以去查了些资料果然是有既有的模块的. Angular Chart 就是基于 Chart.js 以及 Angular 构件的图标展示组件. Angular Chart 的使用分别下载 Chart.js 和 Angular Chart,下载

HTLM5表单

1.HTML5占位符文本使用placeholder可以给文本框,搜索框添加提示性文本 <input type="text" name="url" placeholder="输入地址" /> 2.自动聚焦当页面加载完成时让输入焦点自动落到某个元素上:这个动作用autofocus属性完成.  <input autofocus="autofocus&

基于jquery封装通用的控制显示隐藏的方法

应用场景在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏如果每次遇到这类需求都单独写方法,不光费时间,还会让我们的代码显得异常冗余,因此我们写个通用方法! 附上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

JS 功能弹框封装

// 功能提示弹框 function messageBox ( option ) { var html = ''; html += '<div class="message-box-head">' + option.title; html += '<i class="icon iconfont message-close"></i></div>'; if ( option.type == 'using' ) { ht

jQuery插件：模拟select下拉菜单

没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery插件:模拟select下拉菜单</title> <style> /* css reset */ body,ul,ol,li,dl,dt,dd,h1,table,tr,td,thead,tbody,tfoot,h2,h3,h4,h5,h6,

[ html canvas globalCompositeOperation ] canvas绘图属性设置合成图像如何显示属性演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="

[ html canvas 透明度 globalApha ] canvas绘图属性透明度 globalApha 属性演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="

div 变成option

热门专题