easyUI之Combo
Combo组件为自定义下拉列表组件,无class的加载方式,主要是通过jquery的方式。它依赖于validatebox,可以用它的很多属性。例如:
前台:
<div id="box"></div>
<id id="food">
<div style="width:150px;padding:50px">请选择</div>
<div style="padding:50px"><input type="radio" value="gz1"><span>果子1</span></div>
<div style="padding:50px"><input type="radio" value="gz2"><span>果子2</span></div>
<div style="padding:50px"><input type="radio" value="gz3"><span>果子3</span></div>
</div>
后台(jq):
$(function()
$("box").combo() /*到这里,就能够显示一个空的下拉列表框*/
{ require:true,/*不能为空*/
??如何放进去?
在menu组件中,通过属性menu:'#box'能够将菜单项进行关联,在此处必须用其它方式。打开firebug的方式进行观察:
console:log($("#box").combo("panel")); /*主要同通过panel属性进行关联*/
$("#food").appendTo($("#box").combo("panel"));/*即可完成显示,这是重点*/
};
第一步:??如何获得点击的下拉列表的值?
$("#foond input").click(funciotn(){
var v=$(this).val();/*选择的值*/
var t=$(this).next("span").text(); /*获取点击的input的同级span对象,这也是重点*/
});
第二步:赋值:
$("#box").combo("setvalue",v); /*所选择的值*/
$("#box").combo("setText",t);/*所选择的文本*/
$("box").combo("hidePanel");/*隐藏弹出的面板*/
$("#box").combo("setvalue",v).combo("settext",t).combo("hidePanel");/*这是教程的写法*/
})
easyUI之Combo的更多相关文章
- 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件
jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...
- 扩展自easyui的combo组件的下拉多选控件
首先上效果图 代码片段: 有需要的朋友微信联系我. 如果这篇文章对您有帮助,您可以打赏我 技术交流QQ群:15129679
- Combo( 自定义下拉框) 组件
本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于ValidateBox(验证框)组件 一. 加载方式自定义下拉框不能通过标签的方式进行创建.<input ...
- 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树
EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...
- easyui combo下拉框多选框
按照自己的方式,先晒下效果图: 选一个值,那么就在input里面显示一个,去掉勾选,那么input就会少一个 其实做法很简单,今天就是快下班了,闲着没事加篇博客而已,下面带上代码. 1.页面的展示,i ...
- easyui使用时出现这个Uncaught TypeError: Cannot read property 'combo' of undefined
easyui使用时出现这个Uncaught TypeError: Cannot read property 'nodeName' of undefined 最后检查发现是必须给select一个id,光 ...
- easyui combo+pagination 图标选择器
从数据库读取分页显示 $(function () { initTable(1, 180); $('#cc').combo({ editable: false, panelWidth: 'auto', ...
- EasyUI - Combo组件
-自定义下拉组件,有别于ComboBox下拉组件. 效果: html代码: <input id ="box" /> <div id ="fruits&q ...
- easyui combo自动高度(下拉框空白问题)
设置.combo-panel {max-height:200px;} 在用到easyui-combobox时,设置panelHeight:'auto'
随机推荐
- WebService的原理和过程
转自:http://blog.csdn.net/xiaoqiang081387/article/details/5694304 (一).XML WebService作用 XML WebService ...
- Ubuntu 14.10 下awk命令详解
简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...
- (function($){...})(jQuery) 含义
最近在项目js文件末端中发现这样的代码,对于前端技术比较薄弱的我,着实还是有点晕,好在查阅到了相关资料,现解释如下: (function($){ $.plugin = new org.plugin. ...
- 在VS2010 中兼容Qt4和Qt5
1,同时安装Qt4和Qt5 Qt_add,然后在 2. 如果之前的项目使用Qt4编写的,如果新添加新的类和ui的话,一定要选择Qt Add_in 1.1.11,不然就无法生成moc文件,随便选择 Ch ...
- Intellij IDEA Help
https://www.jetbrains.com/idea/help/intellij-idea.html https://www.jetbrains.com/idea/help/creating- ...
- kali 2016的基础配置
1.Kali 2016的更新源 deb http://http.kali.org/kali kali-rolling main contrib non-free 2.安装虚拟机 apt-get upd ...
- exit(-1)或者return(-1)为什么shell得到的退出码是255?
写一段hello world: // filename: main.c #include <stdio.h> int main(void) { printf("hello wol ...
- Difference Between Performance Testing, Load Testing and Stress Testing
http://www.softwaretestinghelp.com/what-is-performance-testing-load-testing-stress-testing/ Differen ...
- 转--->svn的使用
在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...
- tinyhttpd-0.1.0_hacking
/**************************************************************************** * * tinyhttpd-0.1.0_ha ...