程序博客网 > 音箱测试软件

easyui基础知识

来源：互联网 发布：音箱测试软件 编辑：程序博客网 时间：2024/05/18 01:02

一：创建Web项目，导入easyUI的js


二：实现功能

1.实现可拖拽的div

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7.     <!-- 导入js的主文件 -->  
  8.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>  
  9.       
  10.     <!-- 导入easyUI的主文件 -->  
  11.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>  
  12.       
  13.     <!-- 导入easyUI的样式文件 -->  
  14.     <link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">  
  15.       
  16.     <!-- 导入easyUI的图标文件 -->  
  17.     <link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">  
  18.   
  19.   
  20. <title>Insert title here</title>  
  21. </head>  
  22. <style type="text/css">  
  23.     div{  
  24.         border:3px solid #abcdef;  
  25.         background:red;  
  26.         height:300px;  
  27.         width:300px;  
  28.     }  
  29. </style>  
  30. <body>  
  31.   
  32.     <!-- jquery的easyUI实现可拖拽的div -->  
  33.     <div id="div1" class="easyui-draggable"></div><!-- 其中的class属性中的easyui是固定的，draggable是一个组件的名称 -->  
  34.       
  35. </body>  
  36. </html>  

2.实现动态进度条

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7.     <!-- 导入js的主文件 -->  
  8.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>  
  9.       
  10.     <!-- 导入easyUI的主文件 -->  
  11.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>  
  12.       
  13.     <!-- 导入easyUI的样式文件 -->  
  14.     <link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">  
  15.       
  16.     <!-- 导入easyUI的图标文件 -->  
  17.     <link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">  
  18.   
  19.     <script type="text/javascript">  
  20.         /**  
  21.         创建easyui页面组件有两种方式：  
  22.         1.通过页面标签的方式创建  
  23.             <div id="p" class="easyui-progressbar" data-options="value:60" style="width:40px;"></div>  
  24.           
  25.         2.通过页面标签+js的方式创建 -- 可以跟后台进行交互，使用动态数据  
  26.         */  
  27.         $().ready(function(){ //页面加载完成时，执行的function  
  28.             $("#progre1").progressbar({  
  29.                 value:50  
  30.             })  
  31.               
  32.         })  
  33.           
  34.         $().ready(function(){  
  35.             load();  
  36.         })  
  37.           
  38.         var i = 0;  
  39.         function load(){  
  40.             $("#progre2").progressbar({  
  41.                 value:i++     
  42.             })  
  43.               
  44.             window.setTimeout(function(){ //给页面设置定时任务，100秒后执行方法  
  45.                 load();  
  46.             },100)  
  47.         }  
  48.       
  49.     </script>  
  50.   
  51. <title>Insert title here</title>  
  52. </head>  
  53. <body>  
  54.   
  55.     <!-- jquery的easyUI实现进度条的div -->  
  56.     <div id="progre1" style="width:400px;"></div>  
  57.     <hr>  
  58.     <div id="progre2" style="width:400px;"></div>  
  59.       
  60. </body>  
  61. </html>  

3.实现菜单选项

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7.     <!-- 导入js的主文件 -->  
  8.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>  
  9.       
  10.     <!-- 导入easyUI的主文件 -->  
  11.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>  
  12.       
  13.     <!-- 导入easyUI的样式文件 -->  
  14.     <link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">  
  15.       
  16.     <!-- 导入easyUI的图标文件 -->  
  17.     <link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">  
  18.       
  19.     <script type="text/javascript">  
  20.         $(function(){ //进入页面执行的方法  
  21.             $("#easyui_menu").menu('show',{  
  22.                 left:200,  
  23.                 top:100  
  24.             })  
  25.         })  
  26.     </script>  
  27.   
  28.   
  29. <title>Insert title here</title>  
  30. </head>  
  31. <body>  
  32.   
  33.     <!-- jquery的easyUI实现菜单 -->  
  34.     <div id="easyui_menu" style="width:200px" class="easyui-menu">  
  35.         <div data-options="iconCls:'icon-add'">新建文件夹</div><!-- data-options属性是给当前的菜单添加图标 -->  
  36.         <div class="menu-sep"></div><!-- 此div是添加分割线 -->  
  37.         <div>排列图标</div>  
  38.         <div class="menu-sep"></div><!-- 此div是添加分割线 -->  
  39.         <div>创建快捷方式</div>  
  40.         <div class="menu-sep"></div><!-- 此div是添加分割线 -->  
  41.         <div>剪切</div>  
  42.         <div data-options="iconCls:'icon-no'">删除</div>  
  43.         <div>复制</div>  
  44.         <div class="menu-sep"></div><!-- 此div是添加分割线 -->  
  45.         <div>粘贴</div>  
  46.         <div class="menu-sep"></div><!-- 此div是添加分割线 -->  
  47.         <div>打开方式  
  48.             <div style="width:200px">  
  49.                 <div>迅雷看看</div>  
  50.                 <div>暴风影音</div>  
  51.                 <div>QQ影音</div>  
  52.                 <div>快播</div>  
  53.             </div>  
  54.         </div>  
  55.     </div>  
  56.       
  57. </body>  
  58. </html>  

4.实现按钮

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7.     <!-- 导入js的主文件 -->  
  8.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>  
  9.       
  10.     <!-- 导入easyUI的主文件 -->  
  11.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>  
  12.       
  13.     <!-- 导入easyUI的样式文件 -->  
  14.     <link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">  
  15.       
  16.     <!-- 导入easyUI的图标文件 -->  
  17.     <link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">  
  18.   
  19.   
  20. <title>Insert title here</title>  
  21. </head>  
  22. <body>  
  23.   
  24.     <!-- jquery的easyUI实现按钮 -->  
  25.     <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>  
  26.     <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>  
  27.     <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>  
  28.     <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a>  
  29.       
  30. </body>  
  31. </html>  

5.实现弹出窗口

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7.     <!-- 导入js的主文件 -->  
  8.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>  
  9.       
  10.     <!-- 导入easyUI的主文件 -->  
  11.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>  
  12.       
  13.     <!-- 导入easyUI的样式文件 -->  
  14.     <link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">  
  15.       
  16.     <!-- 导入easyUI的图标文件 -->  
  17.     <link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">  
  18.       
  19.     <!-- 引入国际化文件 -->  
  20.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/locale/easyui-lang-zh_CN.js"></script>  
  21.   
  22.     <script type="text/javascript">  
  23.         $(function(){  
  24.             $("#btn").bind("click",function(){  //给按钮绑定点击事件  
  25.                 $("#win").css("display","block");  
  26.                 $("#win").window({  
  27.                     height:400,  
  28.                     width:400,  
  29.                     title:"添加用户",  
  30.                     modal:true  //弹出框后使背景虚化   
  31.                 })  
  32.             })  
  33.         })  
  34.     </script>  
  35.     <style type="text/css">  
  36.         #from1 div{  
  37.             padding:16px  
  38.         }  
  39.     </style>  
  40. <title>Insert title here</title>  
  41. </head>  
  42. <body>  
  43.     <div id="win" style="display:none">  
  44.         <form id="from1" method="post" >  
  45.             <div>  
  46.                 <label for="name">用户名：</label>  
  47.                 <input class="easyui-validatebox" type="text" name="name" />  
  48.             </div>  
  49.             <div>  
  50.                 <label for="email">邮 箱：</label>  
  51.                 <input class="easyui-validatebox" type="text" name="email" />  
  52.             </div>  
  53.             <div>  
  54.                 <label for="date">生  日</label>  
  55.                 <input class="easyui-datetimebox" name="birthday" value="3/4/2016 2:3" />  
  56.             </div>  
  57.               
  58.             <br>  
  59.             <br>  
  60.                  
  61.             <a id="btn1" href="#" class="easyui-linkbutton" >确定</a>  
  62.             <a id="btn1" href="#" class="easyui-linkbutton">取消</a>  
  63.         </form>  
  64.     </div>  
  65.   
  66.     <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加用户</a>  
  67. </body>  
  68. </html>  

6.实现退出系统弹框和右下角广告

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7.     <!-- 导入js的主文件 -->  
  8.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>  
  9.       
  10.     <!-- 导入easyUI的主文件 -->  
  11.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>  
  12.       
  13.     <!-- 导入easyUI的样式文件 -->  
  14.     <link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">  
  15.       
  16.     <!-- 导入easyUI的图标文件 -->  
  17.     <link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">  
  18.       
  19.     <!-- 引入国际化文件 -->  
  20.     <script type="text/javascript" src="${pageContext.request.contextPath }/js/locale/easyui-lang-zh_CN.js"></script>  
  21.   
  22.     <script type="text/javascript">  
  23.         $(function(){  
  24.             $("#btn2").click(function(){  
  25.                 $.messager.confirm('确认','您确定退出吗？',function(r){  
  26.                     if(r){  
  27.                         alert("确认退出");  
  28.                     }  
  29.                 });  
  30.             })  
  31.               
  32.             $.messager.show({  
  33.                 title:'您有新的消息',  
  34.                 msg:'消息在5秒后关闭',  
  35.                 timeout:5000,  
  36.                 height:200,  
  37.                 width:300,  
  38.                 showType:'slide'  
  39.             });  
  40.               
  41.         })  
  42.     </script>  
  43.   
  44. <title>Insert title here</title>  
  45. </head>  
  46. <body>  
  47.   
  48.     <!-- 实现退出系统 -->  
  49.     <div style="float:right;">  
  50.         <a id="btn2" href="#" class="easyui-linkbutton">退出系统</a>  
  51.     </div>  
  52.       
  53. </body>  
  54. </html>  

0 0
音箱测试软件 音箱测试软件
原创粉丝点击
热门IT博客
c语言循环队列代码c语言循环队列代码
闪电侠第二季人工智能闪电侠第二季人工智能
java核心类库
淘宝代工酒
2017店连店资产优化
海岛奇兵战艇升级数据
json接口api
员工定位软件
联想电脑摄像头软件
星野娜美 知乎
东方不败 知乎
淘宝女人针织衫
python 网络爬虫代码
杭州淘宝城可以进去吗
淘宝衣服代购靠谱吗
java 程序员周末班
线性映射与矩阵运算
虚幻4 编程语言
程序员转架构师
暗黑战神 源码泄露
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 苏念慕斯年全文阅读 苏念慕斯年目录免费 顾云念慕司宸 顾一念慕以琛全文免费阅读 季念慕廷烨免费阅读 霸道老公无限宠苏念慕 念斌 念斌投毒案真正凶手 念湖 念湖旅游 白念 火羽白念什么 三个白念什么 白完念什么 白本念什么 白大十念什么 木白念什么 御姐音台词念白霸气 白告念什么 白反念什么 米白念什么 白巾念什么 念白 白加本念什么 赵长念叶将白 白念球菌感染 米加白念什么 白加告念什么 正太音台词念白 萝莉音台词念白 御姐音台词念白 木斤白念什么 白念球菌 一个王一个白念什么 王字旁一个白念什么 白念球菌感染口腔 你是念念难忘白月光 一个白一个本念什么 一个木一个白念什么 王字旁加个白念什么 古风念白台词

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里