<%@ 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>
时间: 2024-10-24 01:13:46