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

})

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM