头部引用

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

}