记:团队数据组需要,临时紧急接到一个改造内部工具平台的项目,第一次接触然后直接上手开始优化 。。。前端是require.js + jquery.js 实现,然后就是很多坑
实际上 jquery-ui 中就有实现,但是在新版本中,项目是个老项目,版本陈旧;鉴于最小改动快速优化的原则,很多现成的不能用。先按照 https://www.cnblogs.com/janes/p/5417387.html 的样例使用新增的插件比较合适减少现有项目的影响,实际验证发现各种不兼容,包括组件依赖顺序,ui版本和现有项目的兼容等。
使用现成multiselect插件化 ,git地址 https://github.com/ehynds/jquery-ui-multiselect-widget
要注意:select标签的multiple属性要设置multiple,切记在ready方法里面初始化select下拉框。
最关键的一步:刷新生效(其实在页面添加了一个button)
$('#test').multiselect("refresh");
最不能忘记的一步:初始化
$("#test").multiselect({
multiple: true, header: false, noneSelectedText: '请选择', selectedList:5, minWidth:200,//隐藏显示框的宽 height:160 });
否则报错:
cannot call methods on multiselect prior to initialization; attempted to call method 'refresh'
这个是插件的一部分,很多情况如此:例如瀑布流的一个插件
cannot call methods on masonry prior to initialization; attempted to call method 'appended'
找到解决问题,需要在使用的时候,初始化一次,代码。
错误用法:
$('#itemshere').masonry( 'appended', $boxes );
正常用法
$('#itemshere')
// initialize Masonry
.masonry()
// now okay to use methods
.masonry( 'appended', $boxes );
其实,http://www.jb51.net/article/55833.htm 这样的简单最好,需要美观自己在修饰即可,简单无依赖才是拿来就能用的的关键。(先记录下,后面有时间再自己实现一个依赖少的组件附上)
相关推荐
一个非常简单且易用的JavaScript下拉复选框插件
javascript写的下拉多选框,使用简便,代码量少,看一下就能明白,个人觉得比jquery multiselect还是很有优势的。
项目中遇到一种情况:某个复选条件选项太多,把页面撑得很难看。如果有一个下拉复选框,就可以非常好地解决此问题。
Javascript语言开发带复选框的下拉列表代码……
Javascript下拉和弹出复选框列表,同时以Asp.net实现,内附一个很实用的JS窗口效果。都是实用的东东。
利用jQuery扩展方法实现input标签下拉复选框,不依赖任何插件,原生样式,使用简单,方便扩展
JavaScript实现GridView中单选框,复选框,下拉列表的嵌套
基于bootstrap, jQuery,ztree的下拉树状复选框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ; charset=GBK" /> <title>Untitled Document div{ padding:0px; font-size:12px;... <input value...
复选框的全选 、反选、使用javascript 项目中经常使用
下拉复选框基于JQuery的下拉复选框列表(JQuery 1.7.2+) dropdown-checkbox是基于JQuery的下拉复选框列表,用于轻松地将HTML select标签替换为添加的“ multiple”属性,并使用复选框将其转换为下拉列表。...
JS多选下拉框,实现多选。点击显示下拉。 <script type="text/javascript"> <!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status')....
一个注册表单(文本框、单选按钮、复选框、下拉列表、文本域……) JavaScript验证
但是,考虑到如果要做一个选项数不确定、可能非常多,用标签会容易视觉疲劳,同时要求随着选项数的变化,最小程度影响网页布局和效果,于是选择用层级的多选框,也就是设置电脑的那种常见效果。第二层选项可以折叠...
10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框...
10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框...
收集的33个表格排序空间,需要的朋友可以参考下。自从选择。
6.7.html 各种使用JavaScript获取复选框值的方法。 6.8.html JavaScript控制复选框。 6.9.html 复选框的JavaScript特效。 6.10.html JavaScript取单选框的值。 6.11.html JavaScript控制单选框...
注册表格React性的使用TextInput,单选按钮,复选框,下拉菜单
阿贾克斯-此仓库包含用于实际应用的ajax代码,例如“使用ajax提供建议,自动填充复选框,例如当我们选择国家/地区时,该国家/地区下的城市将自动填充在城市下拉列表框中,等等。” -此文件正在使用html,php,ajax,...