easyui問題小結

標籤：高度自適應   style   http   color   os   io   使用   java   strong   

問題一：如何將easyui的west面板上的收縮箭頭隱藏？

效果:

做法：

   <div data-options="region:‘west‘" style="width:200px;">

       <div class="easyui-panel" data-options="title:‘功能導航‘,border:false,fit:true">

           <div class="easyui-accordion" data-options="fit:true,border:false">

               <div title="系統功能表" data-options="iconCls:‘icon-save‘">

<ul class="easyui-tree" data-options=

"url:‘${pageContext.request.contextPath}/menuAction!allTreeNode.action‘,

parentField:‘pid‘,lines:true,onClick:function(node){

                 var url =‘${pageContext.request.contextPath}‘+node.attributes.url;

                 addTab({title:node.text,href:url});}">

            </ul> 

               </div>

           </div>

       </div>

</div>

  

  1.不指定west面板的title屬性就得到上一張圖的效果：

   <div data-options="region:‘west‘" style="width:200px;"></div>

 

 2.在west面板內增加一個panel面板來實現west面板的相似介面，從而影藏了箭頭：title屬性給panel寫上即可；

 border:false讓邊框變窄，fit:true讓面板自適應視窗變化；所得介面如：

   <div data-options="region:‘west‘" style="width:200px;">

       <div class="easyui-panel" data-options="title:‘功能導航‘,border:false,fit:true">

       </div>

   </div>

layout小擴充:設定是否顯示region的收縮按鈕

http://www.easyui.info/archives/1279.html

 

問題二：如何讓layout面板中任何一個面板失去這個標題顯示橫條？

待處理圖：

做法：

<div data-options="region:‘east‘" style="height:60px;"></div>

不指定面板的title屬性即可；

 

問題三;如何顯示一個filedSet？

效果

 

做法：使用<fieldset>標籤

    <form id="user_login_loginForm" method="post">

     <fieldset>

       <legend>使用者登入</legend>

     <table>

 <tr><</th>使用者名稱</th><</td><input name="name" class="easyui-validatebox"

        data-options="required:true,missingMessage:‘使用者名稱為必填項‘"/></>td></</tr>

           <tr></th>密碼<th><td><input name="pwd" type="password"  class="easyui-validatebox"

                  data-options="required:true,missingMessage:‘密碼為必填項‘"/></td></</tr>

     </table>

    </fieldset>

    </form>

問題四：點擊tree節點通過panel的href屬性在center中載入一個頁面?

  注意：panel的href屬性引入的頁面內容只能為該jsp頁面<body>標籤內的內容，所以引入頁面就不要寫其它標籤了，直接寫需要的程式碼片段。Javascript直接寫上即可。

問題五:如何畫一條虛線？

 如下：

 

 

代碼：

<div style="width:380px;border-top:1px silverdashed;border-color:#99BBE8;"></div>

問題六：如何動態改變center面板下data-options中的title屬性的值？

效果：

代碼：

 $(‘#index_layout‘).layout(‘panel‘,‘center‘).panel(‘setTitle‘,‘當前位置》‘+options.title);

 

 

問題七：如何讓combobox高度自適應：

 panelHeight: ‘auto‘

 

問題八：擷取data-option的寬度:

 $(‘#index_layout‘).layout(‘panel‘,‘east‘).panel("options").width;

easyui問題小結