<%@ page language="java" contentType="text/html; charset=UTF-8" ???pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-3.2.1.min.js" > </script><script type="text/javascript" ?src="jquery-easyui-1.5.1/jquery.easyui.min.js" > </script><link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/icon.css"></link><link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/default/easyui.css"></link><script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script><title>Insert title here</title><script type="text/javascript"> ??$(function(){ ?????//$.messager.alert("提示","这是一个提示","info");/* ??????$.messager.confirm("提示","你想退出该系统么",function(r){ ??????????if(r){ ??????????????alert("退出 "); ??????????} ???????}); *//* ??????$.messager.show({ ??????????title:‘我的消息‘, ??????????msg:‘消息将在5秒后关闭‘, ??????????timout:5000, ??????????showtype:‘slide‘ ??????}); *//* ??????$.messager.prompt(‘提示‘,‘请输入你的姓名‘,function(r){ ??????????if(r){ ??????????????alert(‘你的姓名是：‘+r); ??????????} ??????}); *//* ??????$("#dd").draggable({ ??????????handle:‘#title‘ ??????}) *//* ??????$(‘.dragitem‘).draggable({ ??????????proxy:function(source){ ??????????????var p=$("<div style=‘border:1px solid #ccc;width:80px‘>拖动</div>"); ??????????????p.html($(source).html()).appendTo(‘body‘); ??????????????return p; ??????????} ??????}); */ ?????????????//放置 /* ??????$("#dd").droppable({ ??????????accept:‘#d1,#d3‘ ??????}); */ ??????/* ??????$("#rr").resizable({ ??????????maxWidth:800, ??????????maxHeight:800 ??????});*/ ?????????????//分页/* ??????$("#ff").pagination({ ??????????total:2000, ??????????pagaSize:100 ??????}); */ ?????????????//搜索框 /* ??????$("#ss").searchbox({ ?????????searcher:function(value,name){ ???????????alert(value+","+name) ?????????}, ?????????menu:"#mm", ?????????prompt:"请输入值：" ??????}); */ ?????????????//进度条/* ??????$("#p").progressbar({ ??????????value:60 ??????}); ?????????????var value=$(‘#p‘).progressbar(‘getValue‘); ??????if(value<100){ ??????????value+= Math.floor(Math.random()*10); ??????????$(‘#p‘).progressbar("setValue",value); ??????} ????????$(‘#p‘).progressbar({ ??????????onChange:function(value){ ??????????????alert(value) ??????????} ??????}); ????????????????$("#dd").tooltip({ ??????????position:‘right‘, ??????????content:‘<span style="color:#fff">This is the tooltip message</span>‘, ??????????onShow:function(){ ??????????????$(this).tooltip(‘tip‘).css({ ??????????????????backgroundColor:‘#666‘, ??????????????????borderColor:‘#666‘ ??????????????}) ??????????} ??????}); ???????????????//按钮 ??????$(function(){ ?????????$(‘#btn‘).bind(‘click‘,function(){ ?????????????alert(‘easyui‘); ?????????}); ?????????}); ????????????????//菜单 ???????$(‘#mm‘).menu(‘show‘, { ??????????????left: 200, ??????????????top: 100 ????????????}); ??????????????????//创建窗口 ????????$("#win2").window({ ????????????width:600, ????????????height:400, ????????????modal:true ????????}); ???????????????????//创建对话框窗口 ??????$(‘#dd‘).dialog({ ???????????????title: ‘My Dialog‘, ???????????????width: 400, ???????????????height: 200, ???????????????closed: false, ???????????????cache: false, ???????????????href: ‘get_content.php‘, ???????????????modal: true ??????????}); ???????????$(‘#dd‘).dialog(‘refresh‘, ‘new_content.php‘); ?????????????????//创建面板右上角工具 ???????$(‘#p‘).panel({ ???????????????width:500, ???????????????height:150, ???????????????title: ‘My Panel‘, ???????????????tools: [{ ?????????????????iconCls:‘icon-add‘, ?????????????????handler:function(){alert(‘new‘)} ???????????????},{ ?????????????????iconCls:‘icon-save‘, ?????????????????handler:function(){alert(‘save‘)} ???????????????}] ?????????????}); ?????????????????$(‘#p‘).panel({ ????????????????href:‘content_url.php‘, ?????????????????onLoad:function(){ ?????????????????????alert(‘loaded successfully‘); ????????????????} ?????????????}); */ ????????????????????????????????????????????????????????????})</script></head><body><!-- <a id="but" class="easyui-linkbutton" href="otherpage.php" data-options="iconCls:‘icons-ok‘">打开</a> --><!-- <a id="but" class="easyui-linkbutton" href="#" data-options="iconCls:‘icons-on‘">关闭</a> --><!-- ?<div id="dd" style="width:300px;height:600px" > ??????????<div id="title" style="background:#ccc;">title</div> ??????</div>--><!-- <div id="dd" style="width:100px;height:100px;border:1px solid #ccc;"></div> ???<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div> <div id="ff" style="background:#efefe;border:1px solid #ccc;"></div><input id="ss"></input><div id="mm" style="width:120px"> ??<div data-options="name:‘all‘,iconCls:‘icon-ok‘">All News</div> ??<div data-options="name:‘sports‘">Sports News</div></div> ?--> <!-- 进度条 --><!-- <div id="p" style="width:400px;"></div> ??--><!-- 提示框 --><!-- <a href="#" class="eaasyui-tooltip" title="This is the tooltip message">Hover me</a><a id="dd" href="javascript:void(0)">Click here</a> ??--> <!-- 按钮 --><!-- <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">easyui</a><a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘" onclick="javascript:alert(‘easyui‘)">easyui</a><a href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">easyui</a> ?--><!-- 创建菜单 --><!-- <div id="mm" class="easyui-menu" style="width:120px;"> ??<div>New</div> ??<div> ?????<span>Open</span> ?????<div style="width:150px"> ?????????<div><b>Word</b></div> ?????????<div>Excel</div> ?????????<div>PowerPoint</div> ??????</div> ??</div> ??<div data-options="iconCls:‘icon-save‘">Save</div> ??<div class="menu-sep"></div> ?????<div>Exit</div> ?</div>--><!-- 菜单按钮 --><!-- <a href="javascript:void(0)" id="mb" class="easyui-menubutton" ????????????data-options="menu:‘#mm‘,iconCls:‘icon-edit‘">Edit</a> ??<div id="mm" style="width:150px;"> ??????<div data-options="iconCls:‘icon-undo‘">Undo</div> ??????<div data-options="iconCls:‘icon-redo‘">Redo</div> ??????<div class="menu-sep"></div> ??????<div>Cut</div> ??????<div>Copy</div> ??????<div>Paste</div> ??????<div class="menu-sep"></div> ??????<div data-options="iconCls:‘icon-remove‘">Delete</div> ??????<div>Select All</div> ??</div>--><!-- 分割按钮 --><!-- ?<a href="javascript:void(0)" id="sb" class="easyui-splitbutton" ??????????data-options="menu:‘#mm‘,iconCls:‘icon-ok‘" onclick="javascript:alert(‘ok‘)">Ok</a> ??<div id="mm" style="width:100px;"> ??????<div data-options="iconCls:‘icon-ok‘">Ok</div> ??????<div data-options="iconCls:‘icon-cancel‘">Cancel</div> ??</div> ?--><!-- 开关按钮 --><!-- ??<input class="easyui-switchbutton" checked> ?<input class="easyui-switchbutton" data-options="onText:‘Yes‘,offText:‘No‘">--><!-- 创建窗口 --><!--<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:‘icon-save‘,modal:true">Window Content</div><div id="win2"></div> ?--><!-- 创建复合布局窗口 --><!-- <div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:‘icon-save‘,modal:true"> ???<div class="easyui-layout" data-options="fit:true"> ??????<div data-options="region:‘north‘,split:true" style="height:100px"></div> ??????<div data-options="region:‘center‘"> The Content </div> ???</div></div>--><!-- 对话框窗口 --><!-- ?<div id="dia" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px" data-options="iconCls:‘icon-sava‘,resizable:true,modal:true">Dialog Content</div> <div id="dd">Dialog Content.</div> ??--><!-- 创建面板 --><!-- <div id="p" 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"> ??????<p>panel content.</p> ??????<p>panel content.</p> ??</div> --><!-- 创建面板右上角工具--><!-- <div id="p" style="padding:10px;"> ???????<p>panel content.</p> ???????<p>panel content.</p> ???</div>--><!-- 创建选项卡--><!-- ?<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> --><!-- 分类--><!-- ?<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 class="easyui-layout"> ??????<div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div> ??????<div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div> ??????<div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div> ??????<div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div> ??????<div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div> ??</body> --> ?<!-- ?创建嵌套布局--> <body class="easyui-layout"> ??????<div data-options="region:‘north‘" style="height:100px"></div> ??????<div data-options="region:‘center‘"> ??????????<div class="easyui-layout" data-options="fit:true"> ??????????????<div data-options="region:‘west‘,collapsed:true" style="width:180px"></div> ??????????????<div data-options="region:‘center‘"></div> ??????????</div> ??????</div> ??</body> </body></html>jQuery ?一
原文地址：http://www.cnblogs.com/jgjk/p/7470911.html