1 Star 0 Fork 138

恋风 / JQuery EasyUI 1.5.x Of Insdep Theme

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 75.63 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
Coffey 提交于 2017-02-12 22:28 . no commit message
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910
<!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>
JavaScript
1
https://gitee.com/lianfeng/JQuery-EasyUI-1.5.x-Of-Insdep-Theme.git
git@gitee.com:lianfeng/JQuery-EasyUI-1.5.x-Of-Insdep-Theme.git
lianfeng
JQuery-EasyUI-1.5.x-Of-Insdep-Theme
JQuery EasyUI 1.5.x Of Insdep Theme
master

搜索帮助