easyUI之Combo
2015-09-20 15:41
288 查看
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");/*这是教程的写法*/
})
前台:
<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");/*这是教程的写法*/
})
相关文章推荐
- UVa1584——Circular Sequence
- 23设计模式之建造者模式(Builder)
- Android Gradle 构建工具(Android Gradle Build Tools)是什么?
- 如何把一个UITableView滚动到tableFooterView?
- ios9兼容系列之解决iPad提交报错“iPad Multitasking support requires launch story board in bundle '”
- Mycat全局Sequence详解
- Maven打包web项目报错Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/web.xml if
- Android UI高级控件之SimpleAdapter
- 徒手用Java来写个Web服务器和框架吧<第二章:Request和Response>
- 在UIButton中如何将imageView和titleView居中且上下分布
- android 事件处理机制之requestDisallowInterceptTouchEvent
- 使用Libcef+Duilib创建自己的Chrome内核浏览器
- Minor issue about class define and the valid scope of scope operator
- iOS:搜索栏控件UISearchBar and SearchDisplayController的使用
- IOS基础UI之(五)UIAlertView、UIActionSheet和UIAlertController详解
- JAVA基础学习(十三)--String、StringBuilder、StringBuffer与包装类
- UIMenuController的使用,对UILabel拷贝以及定制菜单
- A014-values资源
- UCGUI使用外部字库芯片显示汉字
- poj 2031--Building a Space Station(prim)