实现浏览器遗漏的原件 jQuery.selectCheckbox
工作中遇到了一个下拉需要实现checkbox的效果,如下图
或许网上已经有实现了,但简单的功能自己实现就好了,
结构
<div class="form-control-wrap">
<div class="form-item-inputcheckbox"> </div>
</div>
样式,这里使用scss编写
.form-item-inputcheckbox{
.form-checkbox-label{
margin-bottom: 4px;margin-right: 16px;
input{
vertical-align: top;margin-right: 4px;
}
}
.form-item-input{
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.form-item-checkboxwrap{
margin:;background: #fff;border:1px solid #66afe9;padding: 10px;
max-height: 150px;overflow-y: auto;position: absolute;width: 100%;
display: none;z-index:;
}
.form-item-line {
font-weight: normal;
padding: 0 4px;
}
}
下面是脚本,比较少写jQuery的插件,写法可能不够地道,不足之处忘指出
~(function ($) {
var __root;
var checkItemTpl = '<label class="form-checkbox-label">'+
"<input type='checkbox' value='${value}' text='${text}' ${check}>${text}"+
'</label>'; function template(str, data, regexp) {
return str.replace(regexp || /\${([^{}]*)}/g, function (str, p1) {
return (data[p1]!==undefined&&data[p1]!==null&&data[p1].toString())||"";
});
}
function rander() {
__root.html('<div class="form-control form-item-input"></div><div class="form-item-checkboxwrap checkbox"></div>');
var texts = '',valHtmls = [],datas = [];
$.each(__data, function(index, val) {
val.check= val.checked ?'checked':'';
texts += template(checkItemTpl,val);
if(val.checked){
valHtmls.push(val.text);
datas.push(val.value);
}
});
__root.find('.form-item-checkboxwrap').html(texts);
renderInput(__root.find('.form-item-input'),valHtmls,datas);
}
function renderInput(input,texts,datas) {
input.html(texts.join(';')).attr('title',texts.join(';'))
.val(datas.join(';')).data('value', datas).data('text', texts);
}
function ctrl() {
var $selectWrap = __root.find('.form-item-checkboxwrap');
__root.click(function(e) {
$(this).find('.form-item-checkboxwrap').show();
e.stopPropagation();
});
__root.find('input').click(function () {
var __input = $(this).parents('.form-item-checkboxwrap').siblings('.form-item-input');
var val = $(this).val(),
text = $(this).attr('text'),
datas = __input.data('value'),
texts = __input.data('text');
if($(this)[0].checked){
datas.push(val);
texts.push(text); }else{
var i = datas.indexOf(val);
datas.splice(i,1);
texts.splice(i,1);
}
renderInput(__input,texts,datas);
});
$('body').click(function() {
$selectWrap.hide();
});
}
$.fn.selectCheckbox = function(option){
__root = $(this);
__data = option.data;
rander();
ctrl();
}
})(jQuery)
调用脚本
var values = [{
checked: true,
text: "男",
value: "male"
}, {
checked: true,
text: "女",
value: "female"
}, {
checked: false,
text: "未知",
value: "unknown"
}];
$('.form-item-inputcheckbox').selectCheckbox({data:values});
生成的效果:
取出数据的时候已经选择的数据时候需要调用
$('.form-item-input').data()
实现浏览器遗漏的原件 jQuery.selectCheckbox的更多相关文章
- 在火狐、360等浏览器中,用jquery创建表单并发送的问题
某些浏览器无法使用js或者jquery直接创建表单并发送,这是由于这些浏览器在提交页面表单时要求页面有完整的标签项即<html><head><title></ ...
- 深入浏览器兼容 细数jQuery Hooks 属性篇
关于钩子:http://www.cnblogs.com/aaronjs/p/3387906.html 本章的目的很简单,通过钩子函数更细节的了解浏览器差异与处理方案, 版本是2.0.3所以不兼容ie6 ...
- 浏览器下载/导出文件 及jQuery表单提交
1 比如以下按钮, 用于导出文件,如EXCEL文件. <li> <button class="whiteBg btn2" onclick="doExp( ...
- 能跨域和跨浏览器的flashcookie for jquery插件
对于写网站时需要跨域和跨浏览器的可以看看这个. 引入jquery 和 swfstore.min.js 就可以了,蛮简单好用的,会jquery基础就可以咯. mySwfStore.set('myKey ...
- pasteimg浏览器中粘贴图片jQuery插件
pasteimg是一款可以在浏览器中实现图片粘贴的jQuery插件,兼容Chrome.Firefox.IE11以及其他使用这些内核的浏览器,比如,国内著名的360浏览器. pasteimg可以识别浏览 ...
- chrome浏览器模拟手机端:jquery click()点击无效解决方法
$(".sku-wrap .ok").click(); chrome浏览器模拟手机端,在油猴插件中写JS代码,然后发现click()点击失效. 解决方法:jquery的click( ...
- 浏览器console中加入jquery,测试选择元素
一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery ...
- 浏览器后退按钮导致jquery动态添加的select option值丢失的解决方法
监控浏览器返回功能 判断浏览器返回功能 禁用浏览器的后退按钮 JS禁止浏览器后退键 http://volunteer521.iteye.com/blog/830522/ 浏览器返回功能 判断上一页面来 ...
- 浏览器console中加入jquery方便调试
var jquery = document.createElement('script'); jquery.src = "http://apps.bdimg.com/libs/jquery/ ...
随机推荐
- centOS下恢复win8引导
正题(非原创): shutdown两次以后确信我的win8引导没有了 百度后找到一个修改grub.cfg文件的方法 这个文件在普通用户下是没有修改的权利的 要在sudo su之后用root权限 vi ...
- poj 1056 IMMEDIATE DECODABILITY(KMP)
题目链接:http://poj.org/problem?id=1056 思路分析:检测某字符串是否为另一字符串的前缀,数据很弱,可以使用暴力解法.这里为了练习KMP算法使用了KMP算法. 代码如下: ...
- HDU 4731 Minimum palindrome 2013 ACM/ICPC 成都网络赛
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4731 题解:规律题,我们可以发现当m大于等于3时,abcabcabc……这个串的回文为1,并且字典数最小 ...
- 浅谈长尾理论--《Makers》读后感
近期有幸读了一本好书<Makers>,作者是克里斯·安德森.作为3D Robotics和DIY Drones的联合创始人,自然对于正步入的“第三次工业革命”有较为深刻的体会.清晰的逻辑中, ...
- java类和对象的基础(笔记)
在Java类的设计中,有时希望一个类在任何时候只能有一个实例.这时可以将该类设计为单例模式(singleton).要将一个类设计为单例模式,需要把类的构造方法的访问修饰符声明为private,然后在类 ...
- m序列产生器
扩频通讯中会用的到伪随机数列 —— m序列 代码中是5bit原始码 module m_generate ( clock , reset , m_code ); input clock ,reset ; ...
- java.util.zip.Deflater 压缩 inflater解压 实例
原文:java压缩解压缩类实例[转] package com.example.helloworld; import java.io.ByteArrayOutputStream; import java ...
- ethtool命令
用途 显示或修改以太网卡的配置信息. 语法 ethtool [ -a | -c | -g | -i | -d | -k | -r | -S |] ethX ethtool [-A] ethX [aut ...
- LTP介绍
1.LTP介绍 LTP--linut test project ,ltp套件是由Linux Test Project所开发的一套系统測试套件.它基于系统资源的利用率统计开发了一个測试的组合,为系 ...
- 同步内核缓冲区 sync、fsync和fdatasync函数
同步内核缓冲区 1.缓冲区简单介绍 人生三大错觉之中的一个:在调用函数write()时,我们觉得该函数一旦返回,数据便已经写到了文件里.可是这样的概念仅仅是宏观上的.实际上.操作系统实现某些文件I/O ...