master

分支 (1)

管理

管理

master

JQuery-EasyUI-1.5.x-Of-Insdep-Theme
/
index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="edge" />
<link rel="shortcut icon" href="example/favicon.ico" />
<title>jQuery EasyUI 1.5.1 - Insdep of theme</title>
<!--
	注意样式表优先级
    主题样式必须在easyui组件样式后。

    jQuery EasyUI 1.5.1 - Insdep of theme
    www.insdep.com
    20170211
    QQ交流群：184075694

-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="themes/insdep/jquery.insdep-extend.min.js"></script>

<link href="themes/insdep/easyui.css" rel="stylesheet" type="text/css">
<link href="themes/insdep/master.css" rel="stylesheet" type="text/css">
<link href="themes/insdep/icon.css" rel="stylesheet" type="text/css">
<style type="text/css">
    .layout-panel-west{ border-right: 1px solid #c5c5c5; }
</style>
</head>

<body>
	<div id="master-layout">
        <div data-options="region:'north',border:false,bodyCls:'master-header-layout'">
        	<div class="navigate">
                <div class="left">
                    <a href="#" class="easyui-menubutton navigate-user-button" data-options="menu:'.navigate-user-panel'">匿名</a>
                    <a href="#" class="easyui-menubutton" data-options="menu:'#mm1',hasDownArrow:false">文件</a>
                    <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',hasDownArrow:false">编辑</a>
                    <a href="#" class="easyui-menubutton" data-options="menu:'#mm3',hasDownArrow:false">消息<span class="badge color-default">15</span></a>
                    <select id="cc1" class="easyui-combobox navigate-combobox" name="dept" style="width:120px;">
                        <option>选择样式</option>
                        <option>Insdep</option>
                        <option>Bootstrap</option>
                        <option>Gray</option>
                        <option>Metro</option>
                        <option>Material</option>
                    </select>

                    <div id="mm1" class="navigate-menu-panel">
                    	<div>新建</div>
                        <div>打开</div>
                        <div>
                        	<span>打开最近文件</span>
                            <div>
                                <div>1 index.html</div>
                                <div>2 calendar-custom.html</div>
                                <div>3 combo-animation.html</div>
                                <div>4 datebox-restrict.html</div>
                                <div>5 datetimespinner-icon.html</div>
                                <div>6 filebox-button-align.html</div>
                                <div>7 menubutton-alignment.html</div>
                                <div>8 messager-interactive.html</div>
                                <div>9 propertygrid-group-format.html</div>
                                <div class="menu-sep"></div>
                                <div>启动时重新打开文件</div>
                            </div>
                        </div>
                        <div>关闭</div>
                        <div>全部关闭</div>
                        <div class="menu-sep"></div>
                        <div data-options="disabled:true,iconCls:'icon-save'">保存</div>
                        <div>另存为</div>
                        <div data-options="disabled:true">保存为全部</div>
                        <div class="menu-sep"></div>
                        <div>
                            <span>导入</span>
                            <div>
                                <div>XML 到模板</div>
                                <div>表格式数据</div>
                                <div data-options="disabled:true">Word 文档</div>
                                <div data-options="disabled:true">Excel 文档</div>
                            </div>
                        </div>
                        <div>
                            <span>导出</span>
                            <div>
                                <div>表格</div>
                            </div>
                        </div>
                        <div class="menu-sep"></div>
                        <div>退出</div>
                    </div>

                    <div id="mm2" class="navigate-menu-panel">
                        <div>撤销</div>
                        <div data-options="disabled:true">重做</div>
                        <div class="menu-sep"></div>
                        <div>剪切</div>
                        <div>复制</div>
                        <div data-options="disabled:true">粘贴</div>
                        <div data-options="disabled:true">选择性粘贴</div>
                        <div data-options="disabled:true">清除</div>
                        <div class="menu-sep"></div>
                        <div>全选</div>
                        <div>选择父标签</div>
                        <div>选择子标签</div>
                        <div class="menu-sep"></div>
                        <div>查找和替换</div>
                        <div>查找所选</div>
                        <div>查找下一个</div>
                        <div class="menu-sep"></div>
                        <div>快捷键</div>
                        <div>首选项</div>
                    </div>

                    <div id="mm3" class="navigate-menu-panel" style="width:180px;">
                        <div>产品消息<span class="badge color-success">5</span></div>
                        <div>安全消息<span class="badge color-important">10</span></div>
                        <div>服务消息</div>
                        <div class="menu-sep"></div>
                        <div>查看历史消息</div>
                        <div class="menu-sep"></div>
                        <div>清除消息提示</div>
                    </div>


                    <div class="navigate-user-panel">
                       <dl>
                       		<dd>
                            	<img src="themes/insdep/images/portrait86x86.png" width="86" height="86">
                                <b class="badge-prompt">匿名<i class="badge color-important">10</i></b>
                                <span>examples@insdep.com</span>
                                <p>安全等级：<i class="text-success">高</i></p>
                            </dd>
                            <dt>
                            	<a class="navigate-user-modify">修改资料</a>
                                <a class="navigate-user-logout">注销</a>
                            </dt>
                       </dl>
                    </div>
                </div>
                <div class="right">
                    <select id="cc2" class="easyui-combobox navigate-combobox" name="dept" style="width:180px;">
                    	<option>Choose a language</option>
                        <option>Chinese</option>
                        <option>English</option>
                        <option>Korean</option>
                        <option>Japanese</option>
                        <option>Arabic</option>
                    </select>
                    <input class="easyui-searchbox navigate-search" data-options="prompt:'输入搜索的关键词..',menu:'#mm',searcher:doSearch" style="width:300px"></input>
                    <a href="#" class="easyui-menubutton navigate-more-button" data-options="menu:'#more',hasDownArrow:false"></a>
                    <div id="more" class="navigate-more-panel">
                    	<div>联系我们</div>
                        <div>参与改进计划</div>
                        <div>检测更新</div>
                        <div>关于</div>
                    </div>
                    <div id="mm" class="navigate-menu-panel">
                        <div data-options="name:'all'">全部内容</div>
                        <div data-options="name:'sports'">标题</div>
                        <div data-options="name:'sports'">作者</div>
                        <div data-options="name:'sports'">内容</div>
                    </div>
                </div>
            </div>

        </div>
        <div data-options="region:'west',split:true,border:false" title="组件" style="width:300px; padding:10px 20px;">
        <ul class="easyui-tree">

            <li>
                <span>Application</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/user-panel1.html')">用户信息面板1</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/user-panel2.html')">用户信息面板2</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/user-panel3.html')">用户综合面板3</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/prompt.html')">提示条</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/form.html')">表单集合</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/form-radius.html')">表单集合(圆角)</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/form-label.html')">表单集合Label</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/tables.html')">带控件表格</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/base-tables.html')">普通表格</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/table-complextoolbar.html')">带工具栏的表格</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/cacheeditor.html')">表格编辑</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/highcharts.html')">Highcharts</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/ueditor.html')">ueditor</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/application/cropper.html')">cropper</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Panel</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/panel/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/panel/paneltools.html')">Panel Tools</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/panel/customtools.html')">Custom Tools</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/panel/footer.html')">Panel Footer</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/panel/loadcontent.html')">Load Content</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/panel/nestedpanel.html')">Nested Panel</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/panel/fluid.html')">Fluid Panel</a></span></li>
                    <li>
                    	<span>更多样式</span>
                        <ul>
                        	<li><span><a href="#" onClick="$.insdep.control('example/panel/radius.html')">边框圆角</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/unradius.html')">强制禁用边框圆角</a></span></li>
                        	<li><span><a href="#" onClick="$.insdep.control('example/panel/unborder.html')">不显示外边框</a></span></li>
                        	<li><span><a href="#" onClick="$.insdep.control('example/panel/panel-red.html')">红色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-red1.html')">红色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-red2.html')">红色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-red3.html')">红色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-red4.html')">红色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-orange.html')">橙色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-orange1.html')">橙色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-orange2.html')">橙色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-orange3.html')">橙色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-orange4.html')">橙色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-green.html')">绿色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-green1.html')">绿色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-green2.html')">绿色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-green3.html')">绿色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-green4.html')">绿色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-blue.html')">蓝色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-blue1.html')">蓝色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-blue2.html')">蓝色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-blue3.html')">蓝色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-blue4.html')">蓝色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-deepblue.html')">深蓝色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-deepblue1.html')">深蓝色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-deepblue2.html')">深蓝色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-deepblue3.html')">深蓝色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-deepblue4.html')">深蓝色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-black.html')">黑色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-black1.html')">黑色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-black2.html')">黑色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-black3.html')">黑色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-black4.html')">黑色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-simple.html')">简约风格</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-simple1.html')">简约风格（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-simple2.html')">简约风格（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-simple3.html')">标题线主题（不显示标题线）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-simple4.html')">标题线主题（不显示标题背景色）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-simple5.html')">标题块主题（不显示标题线）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/panel/panel-simple6.html')">标题块主题（不显示标题背景色）</a></span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Accordion</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/accordion/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/accordion/tools.html')">Accordion Tools</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/accordion/ajax.html')">Loading Content with AJAX</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/accordion/actions.html')">Accordion Actions</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/accordion/expandable.html')">Keep Expandable</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/accordion/multiple.html')">Multiple Accordion Panels</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/accordion/fluid.html')">Fluid Accordion</a></span></li>
                </ul>
            </li>
			<li data-options="state:'closed'">
                <span>Tabs</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/autoheight.html')">Auto Height</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/hover.html')">Hover Tabs</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/nestedtabs.html')">Nested Tabs</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/striptools.html')">Strip Tools</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/tabstools.html')">Tabs Tools</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/style.html')">Tabs Style</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/tabposition.html')">Tab Position</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/fixedwidth.html')">Fixed Tab Width</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/tabimage.html')">Tabs with Images</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/dropdown.html')">Tabs with DropDown</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tabs/fluid.html')">Fluid Tabs</a></span></li>
                    <li>
                    	<span>更多样式</span>
                        <ul>
                        	<li><a href="#" onClick="$.insdep.control('example/tabs/tab.html')">tab 默认样式</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-plain.html')">tab 默认样式(使用样式表去除选项卡背景)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-justified.html')">tab 默认样式(宽标题选项卡)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-narrow.html')">tab 默认样式(删除选项卡标题之间的空间)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-pill.html')">tab 默认样式(选项卡标题样式改为气泡状)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-simple.html')">tab 简约样式</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-simple-unborder.html')">tab 简约样式(去除边框)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-red-line.html')">tab 红色下划线样式</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-blue-line.html')">tab 蓝色下划线样式</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-green-line.html')">tab 绿色下划线样式</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-black-line.html')">tab 黑色下划线样式</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-red-block.html')">tab 红色块状样式</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-blue-block.html')">tab 蓝色块状样式</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-green-block.html')">tab 绿色块状样式</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-black-block.html')">tab 黑色块状样式</a></li>

                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-red-block-bold.html')">tab 红色块状样式(粗下划线)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-blue-block-bold.html')">tab 蓝色块状样式(粗下划线)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-green-block-bold.html')">tab 绿色块状样式(粗下划线)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-black-block-bold.html')">tab 黑色块状样式(粗下划线)</a></li>

                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-red-block-pill.html')">tab 红色块状样式(气泡状)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-blue-block-pill.html')">tab 蓝色块状样式(气泡状)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-green-block-pill.html')">tab 绿色块状样式(气泡状)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-black-block-pill.html')">tab 黑色块状样式(气泡状)</a></li>

                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-red-block-pill-unradius.html')">tab 红色块状样式(去除圆角)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-blue-block-pill-unradius.html')">tab 蓝色块状样式(去除圆角)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-green-block-pill-unradius.html')">tab 绿色块状样式(去除圆角)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-black-block-pill-unradius.html')">tab 黑色块状样式(去除圆角)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-blue-line-unborder.html')">tab 蓝色下划线样式(去除边框)</a></li>
                            <li><a href="#" onClick="$.insdep.control('example/tabs/tab-blue-block-pill-unradius-unborder.html')">tab 蓝色下划线样式(去除圆角，去除全部边框)</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Layout</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/layout/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/layout/full.html')">full</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/layout/addremove.html')">Add and Remove Layout</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/layout/complex.html')">Complex Layout</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/layout/nestedlayout.html')">Nested Layout</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/layout/nocollapsible.html')">No collapsible button</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/layout/autoheight.html')">Auto Height</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/layout/collapsetitle.html')">Collapse Title</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/layout/customcollapsetitle.html')">Custom Collapse Title</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/layout/fluid.html')">Fluid Layout</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>DataGrid</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/basic.html')">Basic DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/transform.html')">Transform DataGrid from Table</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/rowborder.html')">Row Border</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/selection.html')">DataGrid Selection</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/checkbox.html')">CheckBox Selection on DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/simpletoolbar.html')">DataGrid with Toolbar</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/complextoolbar.html')">DataGrid Complex Toolbar</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/datagrid-filter.html')">DataGrid Filter Row</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/remotefiltering.html')">Remote Filtering on DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/custompager.html')">Custom DataGrid Pager</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/serverpagination.html')">Server Side Pagination</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/clientpagination.html')">Client Side Pagination</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/sorting.html')">Sorting</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/multisorting.html')">Multiple Sorting</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/columngroup.html')">Column Group</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/aligncolumns.html')">Aligning Columns in DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/frozencolumns.html')">Frozen Columns in DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/formatcolumns.html')">Format DataGrid Columns</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/frozenrows.html')">Frozen Rows in DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/datagrid-group-rows.html')">Group Rows in DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/rowediting.html')">Row Editing in DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/cellediting.html')">Cell Editing in DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/cacheeditor.html')">Cache Editor for DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/rowstyle.html')">DataGrid Row Style</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/cellstyle.html')">DataGrid Cell Style</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/footer.html')">Footer Rows in DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/mergecells.html')">Merge Cells for DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/contextmenu.html')">Context Menu on DataGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/masterdetail.html')">Master Detail</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/subgrid.html')">SubGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/nestedsubgrid.html')">Nested SubGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/largedata.html')">Large Data</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/cardview.html')">Card View</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/bufferview.html')">Buffer View</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/virtualscrollview.html')">Virtual Scroll View</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/virtualscrollview-detailrows.html')">Virtual Scroll View(Detail Rows)</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datagrid/fluid.html')">Fluid DataGrid</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>DataList</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/datalist/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datalist/group.html')">Group DataList</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datalist/multiselect.html')">Multiple Selection DataList</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datalist/remotedata.html')">Binding to Remote Data</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datalist/checkbox.html')">Checkbox in DataList</a></span></li>
                    <li>
                    	<span>更多样式</span>
                        <ul>
                        	<li><span><a href="#" onClick="$.insdep.control('example/datalist/datalist.html')">datalist</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/datalist/datalist-arrow.html')">datalist arrow</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/datalist/datalist-badge.html')">datalist badge</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/datalist/datalist-font.html')">datalist font</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/datalist/datalist-group.html')">datalist group</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/datalist/datalist-icon.html')">datalist icon</a></span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>PropertyGrid</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/propertygrid/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/propertygrid/customcolumns.html')">Customize Columns</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/propertygrid/groupformat.html')">Group Format</a></span></li>
                </ul>
            </li>
			<li data-options="state:'closed'">
                <span>Tree</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/basic.html')">Basic Tree</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/animation.html')">Animation Tree</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/checkbox.html')">CheckBox Tree</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/customcheckbox.html')">Custom CheckBox Tree</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/lines.html')">Tree Lines</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/icons.html')">Tree Node Icons</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/actions.html')">Tree Actions</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/contextmenu.html')">Tree Context Menu</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/tree-drag-drop.html')">Drag Drop Tree Nodes</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/editable.html')">Editable Tree</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/tree-async.html')">Async Tree</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/lazyload.html')">Lazy Load Tree Nodes</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tree/formatting.html')">Formatting Tree Nodes </a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>TreeGrid</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/basic.html')">Basic TreeGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/lines.html')">TreeGrid Lines</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/actions.html')">TreeGrid Actions</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/checkbox.html')">Cascade CheckBox</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/customcheckbox.html')">Custom CheckBox</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/treegrid-contextmenu.html')">TreeGrid ContextMenu</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/editable.html')">Editable TreeGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/footer.html')">TreeGrid with Footer</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/treegrid-reports.html')">Reports using TreeGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/treegrid-dynamic.html')">Dynamic Loading in TreeGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/treegrid-server.html')">Server Side Pagination</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/treegrid-client.html')">Client Side Pagination</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/treegrid/fluid.html')">Fluid TreeGrid</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>LinkButton</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/linkbutton/linkbutton.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/linkbutton/linkbutton-plain.html')">Plain LinkButton</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/linkbutton/linkbutton-size.html')">LinkButton Size</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/linkbutton/linkbutton-icon.html')">Icon Align on LinkButton</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/linkbutton/linkbutton-toggle.html')">Toggle Button</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/linkbutton/linkbutton-group.html')">Button Group</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/linkbutton/linkbutton-style.html')">Style LinkButton</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/linkbutton/linkbutton-fluid.html')">Fluid LinkButton</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Menu</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/menu/menu.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/menu/menu-custom.html')">Custom Menu Item</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/menu/menu-inline.html')">Inline Menu</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/menu/menu-events.html')">Menu Events</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/menu/menu-navigation.html')">Keyboard Navigation</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>MenuButton</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/menubutton/menubutton.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/menubutton/menubutton-actions.html')">MenuButton Actions</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/menubutton/menubutton-alignment.html')">Menu Alignment</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/menubutton/menubutton-navigation.html')">Keyboard Navigation</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>SplitButton</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/splitbutton/splitbutton.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/splitbutton/splitbutton-actions.html')">SplitButton Actions</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>SwitchButton</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/switchbutton/switchbutton.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/switchbutton/switchbutton-actions.html')">SwitchButton Actions</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Pagination</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/pagination/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/pagination/custombuttons.html')">Custom Pagination Buttons</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/pagination/attaching.html')">Attaching Other Components</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/pagination/simple.html')">Simplify Pagination</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/pagination/links.html')">Pagination Links</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/pagination/layout.html')">Pagination Layout</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>ProgressBar</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/progressbar/progressbar.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/progressbar/progressbar-fluid.html')">Fluid ProgressBar</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>SearchBox</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/searchbox/searchbox.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/searchbox/searchbox-category.html')">Search Category</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/searchbox/searchbox-fluid.html')">Fluid SearchBox</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
				<span>Form</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/form/form.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/form/form-load-data.html')">Load Form Data</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/form/form-validate-submit.html')">Validate on Submit</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/form/form-ajax-form.html')">Ajax Form</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>TextBox</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/textbox/textbox.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/textbox/textbox-clear-icon.html')">Clear Icon</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/textbox/textbox-custom.html')">Custom TextBox</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/textbox/textbox-with-icons.html')">TextBox with Icons</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/textbox/textbox-with-button.html')">TextBox with Button</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/textbox/textbox-size.html')">TextBox Size</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/textbox/textbox-multiline.html')">Multiline TextBox</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/textbox/textbox-fluid.html')">Fluid TextBox </a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>PasswordBox</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/passwordbox/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/passwordbox/flash.html')">Flash PasswordBox Letters</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/passwordbox/validatepassword.html')">Validate Password</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>FileBox</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/filebox/filebox.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/filebox/filebox-button-align.html')">Button Align</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/filebox/filebox-fileBox.html')">Fluid FileBox</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Combo</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/combo/combo.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combo/combo-animation.html')">Animation</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>ComboBox</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-extra-icons.html')">Extra Icons</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-load-dynamic-data.html')">Load Dynamic ComboBox Data</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-multiple-select.html')">Multiple Select</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-multiline.html')">Multiline ComboBox</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-navigation.html')">Navigation</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-group.html')">Group ComboBox</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-custom-format.html')">Custom Format in ComboBox</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-show-item-icon.html')">Show Item Icon in ComboBox</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-binding-remote-data.html')">Binding to Remote Data</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-remote-jsonp.html')">Remote JSONP</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-actions.html')">ComboBox Actions</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combobox/combobox-fluid.html')">Fluid ComboBox</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>ComboGrid</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/combogrid/combogrid.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combogrid/combogrid-initialize-value.html')">Initialize Value for ComboGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combogrid/combogrid-set-value.html')">Set Value for ComboGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combogrid/combogrid-multiple.html')">Multiple ComboGrid</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/combogrid/combogrid-navigation.html')">Navigation</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combogrid/combogrid-actions.html')">ComboGrid Actions</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combogrid/combogrid-filter.html')">Filter ComboGrid</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combogrid/combogrid-fluid.html')">Fluid ComboGrid</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>ComboTree</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/combotree/combotree.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combotree/combotree-initialize-value.html')">Initialize Value for ComboTree</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combotree/combotree-multiple.html')">Multiple ComboTree</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/combotree/combotree-actions.html')">ComboTree Actions</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/combotree/combotree-fluid.html')">Fluid ComboTree</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>NumberBox</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/numberbox/numberbox.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/numberbox/numberbox-format.html')">Format NumberBox</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/numberbox/numberbox-range.html')">Number Range</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/numberbox/numberbox-fluid.html')">Fluid NumberBox</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>NumberSpinner</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/numberspinner/numberspinner.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/numberspinner/numberspinner-increment.html')">Increment Number</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/numberspinner/numberspinner-range.html')">Number Range</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/numberspinner/numberspinner-spin-alignment.html')">Number Spin Alignment</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/numberspinner/numberspinner-fluid.html')">Fluid NumberSpinner</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Calendar</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/calendar/calendar.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/calendar/calendar-first-day-week.html')">First Day of Week</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/calendar/calendar-custom.html')">Custom Calendar</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/calendar/calendar-disable.html')">Disable Calendar Date</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/calendar/calendar-week-number.html')">Week Number on Calendar</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/calendar/calendar-fluid.html')">Fluid Calendar</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>DateBox</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/datebox/datebox.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datebox/datebox-format.html')">Date Format</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datebox/datebox-buttons.html')">DateBox Buttons</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datebox/datebox-validate.html')">Validate DateBox</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/datebox/datebox-restrict.html')">Restrict Date</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datebox/datebox-events.html')">DateBox Events</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datebox/datebox-shared.html')">Shared Calendar</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datebox/datebox-clone.html')">Clone DateBox</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datebox/datebox-fluid.html')">Fluid DateBox</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>DateTimeBox</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/datetimebox/datetimebox.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datetimebox/datetimebox-initialize-value.html')">Initialize Value for DateTime</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datetimebox/datetimebox-display-seconds.html')">Display Seconds</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datetimebox/datetimebox-fluid.html')">Fluid DateTimeBox</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>TimeSpinner</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/timespinner/timespinner.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/timespinner/timespinner-range.html')">Time Range</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/timespinner/timespinner-actions.html')">TimeSpinner Actions</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/timespinner/timespinner-fluid.html')">Fluid TimeSpinner</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>DateTimeSpinner</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/datetimespinner/datetimespinner.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datetimespinner/datetimespinner-format.html')">Format DateTimeSpinner</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datetimespinner/datetimespinner-icon.html')">Clear Icon</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/datetimespinner/datetimespinner-fluid.html')">Fluid DateTimeSpinner</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Slider</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/slider/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/slider/rule.html')">Slider Rule</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/slider/range.html')">Range Slider</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/slider/formattip.html')">Format Tip Information</a></span></li> 								                    <li><span><a href="#" onClick="$.insdep.control('example/slider/vertical.html')">Vertical Slider</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/slider/nonlinear.html')">Non Linear Slider</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/slider/fluid.html')">Fluid Slider</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>ValidateBox</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/validatebox/validatebox.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/validatebox/validatebox-tooltip.html')">Custom Tooltip</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/validatebox/validatebox-validate.html')">Validate On Blur</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/validatebox/validatebox-error.html')">Error Placement</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Window</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/window/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/window/customtools.html')">Custom Window Tools</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/window/inlinewindow.html')">Inline Window</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/window/modalwindow.html')">Modal Window</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/window/windowlayout.html')">Window Layout</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/window/footer.html')">Window with a Footer</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/window/borderstyle.html')">Window Border Style</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/window/fluid.html')">Fluid Window</a></span></li>
                    <li>
                    	<span>更多样式</span>
                        <ul>
                        	<li><span><a href="#" onClick="$.insdep.control('example/window/unborder.html')">不显示外边框</a></span></li>
                        	<li><span><a href="#" onClick="$.insdep.control('example/window/window-red.html')">红色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-red1.html')">红色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-red2.html')">红色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-red3.html')">红色主题（不显示边框）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-red4.html')">红色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-red5.html')">红色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-orange.html')">橙色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-orange1.html')">橙色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-orange2.html')">橙色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-orange3.html')">橙色主题（不显示边框）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-orange4.html')">橙色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-orange5.html')">橙色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-green.html')">绿色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-green1.html')">绿色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-green2.html')">绿色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-green3.html')">绿色主题（不显示边框）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-green4.html')">绿色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-green5.html')">绿色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-blue.html')">蓝色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-blue1.html')">蓝色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-blue2.html')">蓝色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-blue3.html')">蓝色主题（不显示边框）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-blue4.html')">蓝色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-blue5.html')">蓝色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-deepblue.html')">深蓝色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-deepblue1.html')">深蓝色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-deepblue2.html')">深蓝色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-deepblue3.html')">深蓝色主题（不显示边框）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-deepblue4.html')">深蓝色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-deepblue5.html')">深蓝色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-black.html')">黑色主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-black1.html')">黑色主题（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-black2.html')">黑色主题（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-black3.html')">黑色主题（不显示边框）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-black4.html')">黑色标题线主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-black5.html')">黑色标题块主题</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-simple.html')">简约风格</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-simple1.html')">简约风格（带左副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-simple2.html')">简约风格（带下副标题）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-simple3.html')">简约风格（不显示边框）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-simple4.html')">标题线主题（不显示标题线）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-simple5.html')">标题线主题（不显示标题背景色）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-simple6.html')">标题块主题（不显示标题线）</a></span></li>
                            <li><span><a href="#" onClick="$.insdep.control('example/window/window-simple7.html')">标题块主题（不显示标题背景色）</a></span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Dialog</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/dialog/dialog.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/dialog/dialog-toolbar.html')">Toolbar and Buttons</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/dialog/dialog-complex.html')">Complex Toolbar on Dialog</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/dialog/dialog-fluid.html')">Fluid Dialog</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Messager</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/messager/messager.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/messager/messager-alert.html')">Alert Messager</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/messager/messager-interactive.html')">Interactive Messager</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/messager/messager-position.html')">Message Box Position</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Draggable</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/draggable/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/draggable/constrain.html')">Constrain</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/draggable/snap.html')">Snap</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/draggable/shopping-cart.html')">Shopping Cart</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/draggable/school-timetable.html')">School Timetable</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Droppable</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/droppable/basic.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/droppable/accept.html')">Accept a Drop</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/droppable/sort.html')">Change Items Order</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Resizable</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/resizable/basic.html')">Basic</a></span></li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>Tooltip</span>
                <ul>
                    <li><span><a href="#" onClick="$.insdep.control('example/tooltip/tooltip.html')">Basic</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tooltip/tooltip-position.html')">Position</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tooltip/tooltip-custom.html')">Custom Content</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tooltip/tooltip-style.html')">Custom Style</a></span></li>
 					<li><span><a href="#" onClick="$.insdep.control('example/tooltip/tooltip-ajax.html')">Ajax Tooltip</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tooltip/tooltip-dialog.html')">Tooltip Dialog</a></span></li>
                    <li><span><a href="#" onClick="$.insdep.control('example/tooltip/tooltip-toolbar.html')">Tooltip as Toolbar</a></span></li>
                </ul>
            </li>
        </ul>
        </div>
        <div data-options="region:'center',border:false" title="预览">
            <div class="easyui-panel" id="control" data-options="fit:true,border:false" style="padding:20px; background:#fff;">
            	<div style="font-size:16px;">

                 	<b>JQuery EasyUI 1.5.1 of Insdep Theme 完整体验版</b><br/>
                    下载地址：www.insdep.com<br/>
                    问答地址：bbs.insdep.com<br/>
                    <br/>
                    QQ交流群：184075694<br/>
                    <br/>
                    <b>关于兼容性：</b><br/>
                    本主题兼容性同步官方，IE最低支持IE9，建议IE10否则会影响整体性能。
                    <br/><br/>

                    <b>使用说明：</b><br/>
                    请将你的原默认样式换成本主题的easyui.css即可，另外需要额外加载jquery.insdep-extend.min.js主题包初始化扩展文件。
                    jquery.easyui.min.js及jquery.min.js都是官方原版，未进行任何修改，可以选择性使用。<br/>

                    <b>注意事项：请注意文件调用顺序，如下所示：</b><br/>
                    1、jquery.min.js<br/>
                    2、jquery.easyui.min.js<br/>
                    3、jquery.insdep-extend.min.js<br/>
                    4、easyui.css<br/>
                    5、master.css<br/>
                    6、icon.css<br/>
                 </div>
             </div>


        </div>
    </div>
    <script>
    	$(function(){

			/*布局部分*/
			$('#master-layout').layout({
				fit:true/*布局框架全屏*/
			});

			$(".navigate-user-modify").on("click",function(){
                $('.navigate-user-panel').menu('hide');
				$.insdep.window({id:"personal-set-window",href:"user.html",title:"修改资料"});

            });
			//$.insdep.control("list.html");


			var cc1=$('#cc1').combo('panel');
			cc1.panel({cls:"navigate-combobox-panel"});
			var cc2=$('#cc2').combo('panel');
			cc2.panel({cls:"navigate-combobox-panel"});


			/*$("#open-layout").on("click",function(){
					var option = {
						"region":"west",
						"split":true,
                        "title":"title",
						"width":180
					};
					$('#master-layout').layout('add', option);

			});*/


		});
		function doSearch(value,name){
				alert('You input: ' + value+'('+name+')');
			}

    </script>


    <!--第三方插件加载-->
    <script src="plugin/justgage-1.2.2/raphael-2.1.4.min.js"></script>
    <script src="plugin/justgage-1.2.2/justgage.js"></script>


    <script src="plugin/Highcharts-5.0.0/js/highcharts.js"></script>


    <script type="text/javascript" src="plugin/ueditor-1.4.3.3/ueditor.config.js"></script>
    <script type="text/javascript" src="plugin/ueditor-1.4.3.3/ueditor.all.min.js"></script>


    <link href="plugin/cropper-2.3.4/dist/cropper.min.css" rel="stylesheet" type="text/css">
    <script src="plugin/cropper-2.3.4/dist/cropper.min.js"></script>


    <!--第三方插件加载结束-->

    <script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "//hm.baidu.com/hm.js?76386f607e79e997458a326997f1be87";
	  var s = document.getElementsByTagName("script")[0];
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
</body>
</html>