easy ui 使用總結

頭部引用

<link type="text/css" rel="stylesheet" href="js/easy_ui/themes/metro-green/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/easy_ui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/map.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/easy_ui/jquery.easyui.min.js"></script>

頁面總體佈局：

<div id="container" class="easyui-layout" style="width:100%; height: 100%;">

        <div id="west_div" data-options="region:'west',split:false,collapsible:false" title="" style="width:200px;overflow: hidden;">

           //region:'west' 表示左邊收縮面板 對應的還有 north south east center

          <div class="easyui-accordion" style="width:180px;height: 100%; margin-left: 5px; overflow: hidden;">
            <div title="xx" data-options="iconCls:'ico-actor'" style="overflow:auto;padding:10px; text-align: center;">
              <a href="#" class="easyui-linkbutton" style="width:150px; margin-top: 5px;"></a>
              <a href="#" class="easyui-linkbutton" style="width:150px; margin-top: 8px;" ></a>
             <a href="#" class="easyui-linkbutton" style="width:150px; margin-top: 8px;" ></a>
             <a href="#" class="easyui-linkbutton" style="width:150px; margin-top: 8px;"></a>
         </div> 

        //easyui-accordion 爲上下收縮面板樣式

        </div>

</div>

定義一個彈出窗口代碼：

<div id="boundaryLine_w" class="easyui-window" title="飛行控制" data-options="iconCls:'ico-flyset',minimizable:false,maximizable:false,top:0,left:205" style="width:300px;height:160px;padding:0px;">

</div> //top left 設置窗口顯示時距離左邊和頂部的距離

關閉窗口：$("#lightSet_w").window('close');

水平拉桿：

<input class="easyui-slider" id="light_slider" data-options="showTip:true,max:18,min:6,value:12,rule:[6,'|',9,'|',12,'|',15,'|',18],tipFormatter:tipFormatter,onChange:sliderOnChange" style="width:250px; height:100px;">

//標尺提示格式化過程
   function tipFormatter(value) {
    return "<font size=\"5px\">" + value + ':00</font>';
   }

 //標籤改變時執行
   function sliderOnChange(value) {

   }