Easyui--window、dialog....实例

最新推荐文章于 2024-04-12 03:03:32 发布

Howinfun

最新推荐文章于 2024-04-12 03:03:32 发布

阅读量1.4k

点赞数

分类专栏： EasyUI

本文链接：https://blog.csdn.net/Howinfun/article/details/78938936

版权

EasyUI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

  在页面开头加入以下语句 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  <html xmlns="http://www.w3.org/1999/xhtml"> 

  可能会出现样式改变.不能正确的显示组件的外观 

 
 我自己用的HTML5，改语句样式没发生改变 

 
 1.window 

 
  
 html方式实现： 

  <div id="win" class="easyui-window" 

  data-options="iconCls:'icon-save',modal:true" 

  title="my window" style="width:300px;height:300px;"> 

  window content</div> 

 
 js+html： 

  $(function(){ 

  $('#win').window({ 

  width:600, 

  height:400, 

 
 //modal为true时只能操作窗口，其他地方不可操作 

  modal:true 

});

});

  <div id="win" title="my window">window content</div> 

 
 案例：点击按钮，打开window 

 
 案例1：样式在div的data-options属性中设置好，js直接调用open方法即可。 

 
 html: 

  <input type="button" value="点击我" οnclick="show()"> 

 
 <!-- style="display:none;" 不能用这个隐藏div。用closed属性进行隐藏设置--> 

  <div id="win" title="my window" class="easyui-window" data-options=" 
 closed:true,height:300, 

  width:400">window content</div> 

js:

  function show(){ 

  $("#win").window("open"); 

}

 
 案例2：div的data-options属性中没设置样式，js中设置。 

 
 html: 

  <input type="button" value="点击我" οnclick="show()"> 

 
 <!-- style="display:none;" 不能用这个隐藏div。用closed属性进行隐藏设置 --> 

  <div id="win" title="my window" class="easyui-window" data-options="modal:true 
 ,closed:true,height:300, 

  width:400">window content</div> 

js:

  function show(){ 

  $("#win").window({ 

  height:300, 

  width:400, 

  modal:true, 

  //需要注意：一定要把closed变为false才能正常显示窗口。 

 
 closed:false 

});

}

 
 2.dialog 

 
 继承自window，然后进行属性扩展 

 
  
 html方式实现： 

  resizable:是否可改变大小 

  <div id="dd" title="My Dialog" style="width:300px;height:400px" 

  class=easyui-dialog 

  data-options="iconCls:'icon-save',resizable:true,modal:true"> 

  Dialog Content</div> 

 
 js+html： 

  $(function(){ 

  $("#dd").dialog({ 

  title:'My Dialog', 

  iconCls:'icon-save', 

  width:300, 

  height:400, 

  resizable:true, 

  modal:true 

});

});

  <div id="dd">Dialog Content</div> 

 
 案例：带有工具栏和按钮的dialog 

 
 案例1：html 

 
 toolbar：工具栏属性，用selector赋值 

 
 buttons：按钮属性，用selector赋值 

  <div id="dd" title="My Dialog" class="easyui-dialog" style="width:300px;height:400px" 

  data-options= 
 "toolbar:' 
 #tb 
 ', 
 buttons:' 
 #bb 
 ',iconCls:'icon-save',modal:true,resizable:true">Dialog Content</div> 

  <div id=" 
 tb"> 

  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a> 

  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a> 

  </div> 

  <div id=" 
 bb"> 

  <a href="#" class="easyui-linkbutton">保存</a> 

  <a href="#" class="easyui-linkbutton">关闭</a> 

  </div> 

 
 案例2：js+html 

  $(function(){ 

  $("#dd").dialog({ 

  title:'My Dialog', 

  iconCls:'icon-save', 

  width:300, 

  height:400, 

  resizable:true, 

  modal:true, 

 
 toolbar:'#tb', 

 
 buttons:'#bb' 

});

});

  <div id="dd" title="My Dialog">Dialog Content</div> 

  <div id=" 
 tb"> 

  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a> 

  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a> 

  </div> 

  <div id=" 
 bb"> 

  <a href="#" class="easyui-linkbutton">保存</a> 

  <a href="#" class="easyui-linkbutton">关闭</a> 

  </div> 

 
 3.messager 

  都是用js实现，而且都是方法 

 
 在屏幕右下角显示消息窗口： 

  $.messager.show({ 

  title:'我的消息', 

  msg:'消息将在5秒后消失', 

  timeout:5000, 

  showType:'slide' 

});

  // 消息将显示在顶部中间 

  $.messager.show({ 

  title:'我的消息', 

  msg:'消息将在4秒后关闭。', 

  showType:'show', 

  style:{ 

  right:'', 

  top:document.body.scrollTop+document.documentElement.scrollTop, 

  bottom:'' 

}

});

 
 显示警告窗口： 

  $.messager.alert('警告','警告你赶紧学习！','info'); 

 
 显示一个包含确定和取消按钮的确认消息窗口： 

  $.messager.confirm('确认对话框','您想要好的生活吗？', 

  //回调函数，根据用户选择进行下一步操作 

  function(r){ 

  //alert(r) 

  if(r){ 

  //选择确定时的操作 

  alert("你将会得到好的生活！！！"); 

}

});

 
 显示一个用户可以输入文本的并且带有确认取消按钮的消息窗口： 

  $.messager.prompt('提示信息','请输入你的名字：' 

  ,function(r){ 

  if(r){ 

  alert("你的名字是："+r); 

}

});

 
 显示一个进度消息窗体： 

  //显示进度消息窗口 

  $.messager.progress(); 

  //设置5秒后关闭进度消息窗口 

  setTimeout(function(){$.messager.progress('close')},5000); 

 
 4.linkbutton 

 
 html ： 

  <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a 

 
  
 js+html： 

  $(function(){ 

  $("#btn").linkbutton({ 

  iconCls:'icon-search' 

});

});

  <a id="btn" href="#">查询</a> 

 
 5.Tab选项卡 

 
 html ： 

  <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="iconCls:'icon-add',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> 

 
  
 js+html： 

  $(function(){ 

 
 没加属性的初始化 

  $("#tt").tabs(); 

 
 添加属性进行初始化 

  $("#tt").tabs({ 

  border:true, 

 
 被选中事件 

  onSelect:function(title){ 

  alert(title+'is selected') 

}

});

});

  <div id="tt" style="width:500px;height:250px;"> 

  <div title="tab1" style="padding:20px;overflow:auto">tab1</div> 

  <div title="tab2" style="padding:20px;overflow:auto">tab2</div> 

  <div title="tab3" style="padding:20px;overflow:auto" data-options="iconCls:'icon-reload',closable:true">tab3</div> 

  </div> 

 
 6.Tab选项卡 

 
 1. 通过标签创建布局为<div/>标签增加名为'easyui-layout'的类ID。 

 
 <div  
 id= 
 "cc"  
 class= 
 "easyui-layout"  
 style= 
 "width:600px;height:400px;" 
 >   

     
 <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>   

 
 </div>  

 
 自己的修改： 

 
 <div  
 id= 
 "cc"  
 class= 
 "easyui-layout"  
 style= 
 "width:600px;height:400px;" 
 >   

     
 <div  
 data-options= 
 "region:'north',title:'North Title',split:true,collapsible:false"  
 style= 
 "height:100px;" 
 ></div>   

     
  <div  
 data-options= 
 "region:'south',split:true,collapsible:false"  
 style= 
 "height:50px;" 
 > 

 
 <div  
 style=" 
 height:50px;line-eight:50px;text-align:center 
 " 
 > @@YF公司版权所有 
 </div>  

 
 </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>   

 
 </div>  

 
 2.使用完整页面创建布局 

 
 <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> 

 
 6.Form表单 

 
 1.from写好action，然后js直接提交 

 
 js： 

  function submit(){ 

  $("#ff").submit(); 

}

 
 html： 

  <form id="ff" action="/tea" method="post"> 

  <div> 

  <label for="name">Name:</label> 

 
 easyui-validatebox为验证框，required为必须填写 

  <input type="text" name="name" class="easyui-validatebox" data-options=" 
 required:true"> 

  </div> 

  <div> 

  <label for="email">Email:</label> 

 
 validType可以选择需要验证的类型 

  <input type="text" name="email" class="easyui-validatebox" data-options=" 
 validType:'email'"> 

  </div> 

  <a id="btn" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" οnclick="submit()">提交</a> 

  </form> 

 
 2.form表单中不写action，在js中使用ajax提交表单 

 
 js： 

  function 
 mysub(){ 

  alert('DDD'); 

  $("#ff").form({ 

  url:'../myTest', 

  onSubmit:function(){ 

},

  success:function(data){ 

  alert(data) 

}

});

 
 //注意：这个提交一定不能少，上面只是对表单进行渲染，没有进行提交动作 

  $("#ff").submit(); 

}

 
 一步提交： 

 
 function mysub(){ 

 
 $("#ff").form(' 
 submit 
 ',{ 

 
 url:'../myTest', 

 
 onSubmit:function(){  

},

 
 success:function(data){ 

 
 alert(data) 

}

});

}

 
 html： 

  <form id="ff" method="post"> 

  <div> 

  <label for="name">Name:</label> 

  <input type="text" name="name" class="easyui-validatebox" data-options="required:true"> 

  </div> 

  <div> 

  <label for="email">Email:</label> 

  <input type="text" name="email" class="easyui-validatebox" data-options="validType:'email'"> 

  </div> 

  <a id="btn" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" οnclick=" 
 mysub()">提交</a> 

  </form> 

 
 Servlet： 

  @WebServlet("/myTest") 

  public class TestFormServlet extends HttpServlet { 

  private static final long serialVersionUID = 1L; 

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 

  this.doPost(request, response); 

}

  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 

  request.setCharacterEncoding("utf-8"); 

  response.setContentType("text/html;charset=utf-8"); 

  response.setCharacterEncoding("utf-8"); 

  PrintWriter out = response.getWriter(); 

  System.out.println("我被调用了"); 

  out.println("成功了！"); 

  out.flush(); 

  out.close(); 

}

}

 
 3.可在onSubmit方法中提交额外的参数，servlet中获取额外的参数并输出，并返回json数据 

js:

  function mysub(){ 

  $("#ff").form('submit',{ 

  url:'../myTest', 

  onSubmit:function( 
 params){ 

 
 params.username='hyf'; 

 
 params.password='123'; 

},

  success:function(data){ 

  var user = eval("("+data+")"); 

  alert(user.id); 

  alert(user.name); 

}

});

}

 
 Servlet: 

  @WebServlet("/myTest") 

  public class TestFormServlet extends HttpServlet { 

  private static final long serialVersionUID = 1L; 

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 

  this.doPost(request, response); 

}

  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 

  request.setCharacterEncoding("utf-8"); 

  response.setContentType("text/html;charset=utf-8"); 

  response.setCharacterEncoding("utf-8"); 

  PrintWriter out = response.getWriter(); 

  System.out.println("我被调用了"); 

 
 //获取onSubmit方法中提交的额外参数 

 
 String username = request.getParameter("username"); 

 
  
 String password = request.getParameter("password"); 

  System.out.println("username:"+username+" password:"+password); 

 
 //返回json格式的数据 

  out.println(" 
 {id:10,name:'hyf'}"); 

  out.flush(); 

  out.close(); 

}

}

Howinfun

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Easyui--window、dialog....实例

在页面开头加入以下语句可能会出现样式改变.不能正确的显示组件的外观我自己用的HTML5，改语句样式没发生改变1.windowhtml方式实现：data-options="iconCls:'icon-save',modal:true"title="my window" style="width:300px;height:300px;">
复制链接

扫一扫