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");/*这是教程的写法*/

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值