发布时间：2025-12-10 19:36:15 浏览次数：8
easy-UI的介绍以及使用「建议收藏」官网介绍asyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。easyUI使用easyUI引入<!–引入jquery的js，EasyUI的执行需要依赖于jQ
asyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
<!--引入jquery的js，EasyUI的执行需要依赖于jQuery --><script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script><!--easyUI的js主文件 --><script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script><!--国际化的js文件 --><script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script><!--引入easyUI的样式 --><link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" /><link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />是否还在为Ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！
【正版授权，激活自己账号】：Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】：官方授权 正版激活 自己使用，支持Jetbrains家族下所有IDE…
使用easyUI需要官网下载easyUI文件并进行引入
<body><p >拖动DIV</p><p >测试p</p></body><body><p style="width:800px;"></p><input type="button" value="加载"/> </body><script type="text/javascript">$(function(){ $("#b").click(function(){ onload();})/*采用递归的方法实现进度条刷新 setTimeout(xxxFunction,100); //延时加载函数 */var i = 0;function onload(){ //该函数是easyUI提供的,使用别人的JS,必须满足要求 value是固定的$('#p').progressbar({ value:i++});if(i<=100){ /*延时加载,到了指定的时间,则执行函数,时间 单位是毫秒*/setTimeout(function(){ onload();}, 1000)}}})</script><!--该页面中主要展现 不同的按钮格式 --><a href="#" data-options="iconCls:'icon-undo'">测试字体长度大小</a><a href="#" data-options="iconCls:'icon-add'">新增</a><a href="#" data-options="iconCls:'icon-edit'">编辑</a><a href="#" data-options="iconCls:'icon-clear'">清空</a><a href="#" data-options="iconCls:'icon-remove'">移除</a>下图为iconCls属性对于图标:
该图片引用至https://blog.csdn.net/aas3637721/article/details/92980146
<!-- ul-li 无序列表 ol-li 有序列表 --><ul ><li><span>商品管理</span><ul><li>商品查询</li><li>商品新增</li></ul></li><li><span>内容管理</span><ul><li>内容新增</li></ul></li><li><span>四大名著</span><ul><li>三国演义</li><li>水浒传</li><li>红楼梦</li><li>西游记</li><li>.....</li></ul></li></ul><p style="width:600px;height:400px;"> <p data-options="region:'north',title:'North Title',split:true" style="height:100px;"></p> <p data-options="region:'south',title:'South Title',split:true" style="height:100px;"></p> <p data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></p> <p data-options="region:'west',title:'West',split:true" style="width:100px;"></p> <p data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></p> </p> <p data-options="region:'west',title:'菜单',split:true" style="width:10%;"><ul ><li><span>商品管理</span><ul><li><a onclick="addTab('商品新增','/item-add')">商品新增</a></li><li><a onclick="addTab('商品查询','/item-list')">商品查询</a></li><li><a onclick="addTab('商品更新','/item-update')">商品更新</a></li></ul></li><li><span>网站内容管理</span><ul><li>内容新增</li><li>内容修改</li></ul></li></ul></p><p data-options="region:'center',title:'首页'"></p><script type="text/javascript">//addTab('商品新增','/item-add')function addTab(title, url){ //.tabs 选项卡函数 easyUI单独提供的 判断当前title是否存在if ($('#tt').tabs('exists', title)){ $('#tt').tabs('select', title); //如果存在,则选中该选项卡.} //如果当前选项卡 不存在else { /* iframe 画中画效果 */var content = '<iframe scrolling="auto" frameborder="0" src="https://map.baidu.com/@12955267,4852394,12.91z" style="width:100%;height:100%;"></iframe>'; //新增选项卡$('#tt').tabs('add',{ title:title, content:content, //选项卡打开之后展现的效果closable:true }); } } </script><h1>Easy-弹出窗口</h1><!--主要展现弹出框 --><a href="#" data-options="iconCls:'icon-search'">搜索</a><p ></p><!--定义弹出窗口 --><p title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> 我是一个窗口<a href="#" data-options="iconCls:'icon-back'">关闭</a></p><p style="float: right"><a href="#" data-options="iconCls:'icon-cancel'">退出系统</a></p><script type="text/javascript">$(function(){ $("#btn1").bind("click",function(){ $("#win1").window({ title:"弹出框",width:400,height:400,modal:true //这是一个模式窗口，只能点击弹出框，不允许点击别处})})$("#btn3").click(function(){ alert("关闭");$("#win2").window("close");});/*定义退出消息框 */$("#btn4").click(function(){ $.messager.confirm('退出','你确定要退出吗',function(r){ if (r){ alert("确认退出");} });})/*定义消息提示框 */$.messager.show({ title:'My Title', msg:'郑哥你都胖成一个球了，圆的', timeout:5000,height:200,width:300,showType:'slide' }); })</script><h1>Easy-表格数据1</h1><p><table style="width:400px;height:250px"> <thead> <tr> <th data-options="field:'code'">Code</th> <th data-options="field:'name'">Name</th> <th data-options="field:'price'">Price</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr><tr> <td>003</td><td>name3</td><td>4612</td> </tr> </tbody> </table></p><hr/><h1>通过数据请求创建表格</h1><p>定义表格，并且通过url访问json数据， fitColumns:true表示自动适应，singleSelect:true 表示选中单个<table style="width:500px;height:300px" data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:true,pagination:true"> <thead> <tr> <th data-options="field:'code',width:100">Code</th> <th data-options="field:'name',width:100">Name</th> <th data-options="field:'price',width:100,align:'right'">Price</th></tr> </thead> </table> </p><hr/><h1>通过js创建表格</h1><table style="width:700px"></table><script type="text/javascript">/*通过js创建表格 */$(function(){ $("#table3").datagrid({ /*定义工具栏 */toolbar: [{ iconCls: 'icon-edit', handler: function(){ alert("点击工具栏")} },'-',{ iconCls: 'icon-help', handler: function(){ alert('帮助工具栏')} },'-',{ iconCls: 'icon-save',handler: function(){ alert('保存工具栏')}}], columns:[[{ field:'itemIds',checkbox:true},{ field:'itemId',title:'商品Id',width:100}, { field:'itemName',title:'商品名称',width:100}, { field:'itemDesc',title:'商品描述',width:100,align:'right'} ]],fitColumns:true, //自动适应url:"datagrid_item.json", //请求数据的地址method:"get", //提交方式striped:true, //有条纹的行nowrap:true, //提高加载性能loadMsg:"正在加载", //加载数据时打印pagination:true, //分页加载rownumbers:true, //显示行号//singleSelect:true, //只允许选中一行数据})})</script><p style="width:500px;height:250px;"> <p title="Tab1" style="padding:20px;display:none;"> tab1 </p> <p title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </p> <p title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab3 </p> </p> 更多模块请到官网查看http://www.jeasyui.com/demo/main/index.php
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流