11、jQueryEasyUI的基本组件
来源：互联网 发布：亚威数控冲床编程软件 编辑：程序博客网 时间：2024/06/12 20:08
1、拖动的div
<!--jquery 的主文件...--> <script type="text/javascript" src="../../js/jquery.min.js"></script> <!--jquery easyui 的主文件...--> <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script> <!--jQuery 的主样式文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css"> <!--jQuery 的图标文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">
</head> <style type="text/css"> div{ height:200px; width:200px; background:red; border:10px solid #abcdef; } </style> <body> <div id="area" class="easyui-draggable"></div> <div class="cccc">www</div> <div class="easyui-draggable"></div> <div class="easyui-draggable"></div> <div class="easyui-draggable"></div> <div class="easyui-draggable"></div> <div class="easyui-draggable"></div> <div class="easyui-draggable"></div> <div class="easyui-draggable"></div> <div class="easyui-draggable"></div>//添加上这个class="easyui-draggable"的属性的时候就可以用鼠标对div进行拖动了
</body> </html>
2、jQueryEasyUI进度框组件的实例
$(function(){ //在 jquery easyui 里面，创建组件有两种方式.. //第一种是直接通过页面的标签去创建.. 我们直接在标签上面添加一个class 的一个标签... 如果你的这个组件不需要跟其它的组件进行交互，或者这个组件不需要跟后台进行交互，我们使用标签创建 //第二种方式我们可以通过js +页面标签创建.. $("#loadbutton").bind("click",function(){ loadprogress(); }) }) var i=1; /** * 我们之前使用xmlhttprequest 进行交互 * 0,1,2,3,4 这几个状态是用来做用户体验... */ function loadprogress(){ $("#progressId").progressbar({ value:i++ }) window.setTimeout(function(){ loadprogress(); },10) } </script> </head> <body> <div id="progressId" style="width:400px;"></div> <input type="button" id="loadbutton" value="加载"> </body>
3、jQuery的菜单组件
<title>jQuery 的菜单按钮...</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--jquery 的主文件...--> <script type="text/javascript" src="../../js/jquery.min.js"></script> <!--jquery easyui 的主文件...--> <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script> <!--jQuery 的主样式文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css"> <!--jQuery 的图标文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/icon.css"> <script type="text/javascript"> $(function(){ $("#menu_1").menu({ left:100, top:100 }).show(); }) </script> </head> <body> <div id="menu_1" style="width:150px" class="easyui-menu"> <div>新建文件夹</div> <div class="menu-sep"></div> <div>创建快捷方式</div> <div class="menu-sep"></div> <div>打开方式 <div style="width:150px" > <div>使用快播打开</div> <div>使用百度影音打开</div> <div>使用其它方式打开</div> </div> </div> <div class="menu-sep"></div> <div>复制</div> <div class="menu-sep"></div> <div data-options="iconCls:'icon-cancel'">删除</div> <div class="menu-sep"></div> <div>粘贴</div> <div class="menu-sep"></div> <div>属性</div> </div> </body>
4、jQuery的linkButton
<script type="text/javascript" src="../../js/jquery.min.js"></script> <!--jquery easyui 的主文件...--> <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script> <!--jQuery 的主样式文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css"> <!--jQuery 的图标文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/icon.css"> <!--直接找图标的网站... www.iconfinder.com--> </head> <body> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut'">剪切</a> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">帮助</a> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-filter'">过滤</a> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-tip'">提示</a> </body>
5、jQuery的datagrid组件
<!--jquery 的主文件...--> <script type="text/javascript" src="../../js/jquery.min.js"></script> <!--jquery easyui 的主文件...--> <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script> <!--jQuery 的主样式文件... <link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css"> --> <link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css"> <!--jQuery 的图标文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/icon.css"> <script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function(){ alert($("#btn").size()); /** * 界面会传过去两个参数，第一个参数是当前页，第二个参数每页显示多少条 * 1 ,每页显示10条 * * //第一个你们需要找到总记录数... *sql1=int total= select count(*) from table * * param1===(page-1)*10 ,10 * *sql2=select * from table where ddd limit 0,10 (10,10) .(20,10) * * */ $("#datagrid").datagrid({ columns:[[ {"checkbox":true}, {title:"车次",width:100,field:'ceci'}, {title:"出发站<br>终点站",width:100,field:'startstate'}, {title:"出发时间<br>到达时间",width:100,field:'starttime'}, {title:"历时",width:100,field:'totaltime'}, {title:"商务座",width:100,field:'swz'}, {title:"备注",width:100,field:'bz'} ] ], fitColumns:true, url:"datagrid.json", toolbar: [{ text:"修改", iconCls: 'icon-edit', handler: function(){ alert('编辑按钮') } },'-',{ text:"删除", iconCls: 'icon-help', handler: function(){ alert('帮助按钮') } }] , onLoadSuccess:function(){ //创建页面的组件有两种方式 一种是通过标签创建,通过js +页面标签创建... // alert($("#btn").size()); $("#btn").linkbutton({ iconCls:"icon-add" }) }, loadMsg:"数据正在加载中....", method:"POST", pagination:true, rownumbers:true, singleSelect:true, striped:true }) }) </script> </head> <body> <table id="datagrid"></table> </body>
//datajson文件{ "total":1000, "rows":[ { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"<a id='btn' href='#' class='easyui-linkbutton' >预定</a> " }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" } ]}
7、jQuery的acrodding组件
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!--jquery 的主文件...--> <script type="text/javascript" src="../../js/jquery.min.js"></script> <!--jquery easyui 的主文件...--> <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script> <!--jQuery 的主样式文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css"> <!-- <link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css">--> <!--jQuery 的图标文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/icon.css"> <script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script> </head> <body> <div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> <h3 style="color:#0099FF;">Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div> </body></html>
8、jQuery的布局
<!--jquery easyui 的主文件...--> <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script> <!--jQuery 的主样式文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css"> <!-- <link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css">--> <!--jQuery 的图标文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/icon.css"> <script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function(){ itcast.init.pageUI(); //初始化页面按钮上面的事件... itcast.init.bindEvent(); }) var itcast={ init:{ pageUI:function(){ $("#jeasyUItree").tree({ url:"treedata.json", dnd:true, animate:true, checkbox:true, lines:true, onClick:function(node){ // alert(node); var tabs=$("#center_tab").tabs("getTab",node.text); if(tabs){ $("#center_tab").tabs("select",node.text) }else{ //添加面板... $("#center_tab").tabs('add',{ title:node.text, //content:'Tab Body', closable:true, href:"../../easyui/href/employee.html",//重新载入一个界面... onLoad:function(){ //alert($("#employeeId").length); $("#employeeId").datagrid({ columns:[[ {"checkbox":true}, {title:"车次",width:100,field:'ceci'}, {title:"出发站<br>终点站",width:100,field:'startstate'}, {title:"出发时间<br>到达时间",width:100,field:'starttime'}, {title:"历时",width:100,field:'totaltime'}, {title:"商务座",width:100,field:'swz'}, {title:"备注",width:100,field:'bz'} ] ], fitColumns:true, url:"datagrid.json", toolbar: [{ text:"修改", iconCls: 'icon-edit', handler: function(){ alert('编辑按钮') } },'-',{ text:"删除", iconCls: 'icon-help', handler: function(){ alert('帮助按钮') } }] , onLoadSuccess:function(){ //创建页面的组件有两种方式 一种是通过标签创建,通过js +页面标签创建... // alert($("#btn").size()); $("#btn").linkbutton({ iconCls:"icon-add" }) }, loadMsg:"数据正在加载中....", method:"POST", pagination:true, rownumbers:true, singleSelect:true, striped:true }) } }); } } }) }, bindEvent:function(){ $("#btn_1").bind("click",function(){ $("#txl_tree").tree({ url:"treedata.json", dnd:true, animate:true, checkbox:true, lines:true, onClick:function(node){ //alert(node.text); //控制台打印 //console.info(node); //$("#easyUITree").tree("getChildren",node) var children=node.children; alert(children.length) } }) $("#txl_window").window({ height:500, width:200, title:"通讯录" }) }) $("#btn_2").bind("click",function(){ $.messager.confirm('确认','您确认想要推出系统？',function(r){ if (r){ alert('确认删除'); } }); }) } } } </script> </head> <body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"> <div style="float:right;padding:10px;"> <a id="btn_1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-tip'">通讯录</a> <a id="btn_2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">退出系统</a> </div> </div> <div data-options="region:'south',title:'Copyright © 2015 Sohu.com Inc. All Rights Reserved. 搜狐公司 版权所有',split:true" style="height:30px;"></div> <div data-options="region:'west',title:'功能菜单',split:true" style="width:250px;"> <div id="leftaccording" class="easyui-accordion" data-options="fit:true"> <div title="航母检测平台" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;"> <ul id="jeasyUItree"></ul> </div> <div title="物业管理平台" data-options="iconCls:'icon-reload'" style="padding:10px;"> content2 </div> <div title="人事管理平台"> content3 </div> </div> </div> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;"> <div id="center_tab" class="easyui-tabs" data-options="fit:true" style="width:500px;height:250px;"> <div title="首页" style="padding:10px;"> <img src="../../image/1.jpg" height="380"> </div> </div> </div> <div id="txl_window"> <ul id="txl_tree"></ul> </div></body>
9、jQuery的面板布局
<!--jquery 的主文件...--> <script type="text/javascript" src="../../js/jquery.min.js"></script> <!--jquery easyui 的主文件...--> <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script> <!--jQuery 的主样式文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css"> <!-- <link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css">--> <!--jQuery 的图标文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/icon.css"> <script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function(){ // $(".panel").draggable({ }); $('#ccc').resizable({ maxWidth:250, maxHeight:300 }); }) </script> <style type="text/css"> #ccc{ border:3px solid red; height:100px; width:200px; background:#999999; } </style> </head> <body> <div id="panel-easyui" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true"> <div id="ccc">panel content</div> <p>panel content.</p> </div> </body>
10、jQuery的tab布局
<!--jquery 的主文件...--> <script type="text/javascript" src="../../js/jquery.min.js"></script> <!--jquery easyui 的主文件...--> <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script> <!--jQuery 的主样式文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css"> <!-- <link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css">--> <!--jQuery 的图标文件...--> <link type="text/css" rel="stylesheet" href="../../js/themes/icon.css"> <script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script> </head> <body> <div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab3 </div> </div> </body>
阅读全文
0 0
- 11、jQueryEasyUI的基本组件
- JQueryEasyUI 组件的实例化
- jQueryEasyUI DateBox的基本使用
- jQueryEasyUI Panel的基本使用
- jQueryEasyUI Panel的基本使用
- JQueryEasyUI 组件的事件和方法
- JQueryEasyUI 组件dialog
- JQueryEasyUI 组件 布局 Layout组件
- JQueryEasyUI 组件 布局 portal组件
- JQueryEasyUI 组件 布局 portal组件
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- jQueryEasyUI Messager基本使用
- 9、继续matlab数值分析
- 10、jqueryEasyUI感觉自己还是改行做前端吧
- 1007. 素数对猜想 (20)
- lua语言测试
- eclipse启动报错：Error:Could not create the Java Virtual Machine Error:A fatal exception has occurred
- 11、jQueryEasyUI的基本组件
- 12、jquery的tree组件
- Python3-字符串操作
- ubuntu 安装Onos
- 13、java获取路径
- 我一直以为自己擅长ppt，直到见到这些神技
- 14、java实现poi操作excel,包括读和写日期格式，并且设置字体样式
- 15、百度地图插件
- 原生JS迭代遍历方法使用指南
