頭部引用

<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) {

???}



轉載于:https://www.cnblogs.com/caowei-it/p/4145746.html

總結

以上是生活随笔為你收集整理的easy ui 使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。