zoukankan      html  css  js  c++  java
  • easyUI的Dialog和Windows框的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head id="Head1" runat="server">
      
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
     <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
     <link rel="stylesheet" type="text/css" href="../demo.css"/>
     <script type="text/JavaScript" src="../jQuery-1.7.2.min.js"></script>
     <script type="text/javascript" src="../jquery.easyui.min.js"></script>

        <link  rel="stylesheet" href="../css/mainFrom.css" type="text/css" />

        <script>
            function resize() {
                $('#w').window({
                    title: 'New Title',
                    600,
                    modal: true,
                    shadow: false,
                    closed: false,
                    height: 300
                });
            }
            function openW() {
                $('#w').window('open');
            }
            function closeW() {
                $('#w').window('close');
            }
            function test() {
                $('#test').window('open');
            }
           // Dialog
            function open1() {
                $('#d2').dialog('open');
            }
            function close1() {
                $('#d2').dialog('close');
            }
     </script>
    </head>
    <body>
    <form id="form1" runat="server">
      <div id="incontent">
           <div id="contool">
           <div class="tool">工具栏</div>
                
                <a href="#"><span id="bj" runat="server">销售开单</span></a>
                   <a href="#">历史单据</a>
            <div class="clear"></div>
            </div>
            <div class="contable">
              <div class="clear"></div>
               <div id="tb"> 
                  <div style =" margin:5px;" >
                    <div>
                     单号:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
                     开单时间:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>---<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                     <asp:Button ID="Button1" runat="server" Text="查询" />
                     </div>                  
                   </div> 
                </div> 
              <div id="UpdatePanel1">            
                <table  class="easyui-datagrid"  toolbar="#tb"  style="auto; height:auto;" data-options="idField:'itemid',showFooter:true,collapsible:true" title="销售单列表">
                 <thead>
                     <tr>    
                        <th field="itemid" width="80" checkbox="true">行号</th>    
                        <th field="productid" width="120" sortable="true">单据日期</th>   
                        <th field="listprice" width="120" sortable="true">单据编号</th>   
                        <th field="unitcost" width="150"sortable="true" >客户名称</th>   
                        <th field="attr1" width="150" sortable="true">销售金额</th>    
                        <th field="status" width="150" sortable="true">折后金额</th>    
                        <th field="status1" width="150" sortable="true">收款金额</th>
                        <th field="status2" width="200">说明</th>
                        <th field="status3" width="130">操作</th>
                    </tr>
                 </thead>
                 <tr >
                  <td ></td>
                   <td >123457645</td>
                  <td >2013-06-02</td>
                  <td >张三</td>
                  <td >¥15000</td>
                  <td >¥15000</td>
                  <td >¥15000</td>
                  <td >&nbsp;</td>
                  <td >
                      <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="open1()" >修改</a>   
                     <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="javascript:void(0);"  >删除</a>
                  </td>
                 </tr>
                  <tr >
                  <td ></td>
                   <td >123457645</td>
                  <td >2013-06-02</td>
                  <td >张三</td>
                  <td >¥15000</td>
                  <td >¥15000</td>
                  <td >¥15000</td>
                  <td >&nbsp;</td>
                  <td >
                      <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="openW()"  >修改</a>   
                     <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="javascript:void(0);" >删除</a>
                  </td>
                 </tr>
               </table>
              </div>
            </div>
        </div> 
        <div id="d2" title="修改单据" class="easyui-dialog" closed="true"  modal="true" style="400px;height:200px;padding:10px;"
       toolbar="#dlg-toolbar" buttons="#dlg-buttons" resizable="true">
      Dialog toolbar and buttons are created from existing HTML nodes.
     </div>
     <div id="dlg-toolbar" style="padding:2px 0">
      <table cellpadding="0" cellspacing="0" style="100%">
       <tr>
        <td style="padding-left:2px">
         <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit</a>
         <a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a>
        </td>
        <td style="text-align:right;padding-right:2px">
         <input class="easyui-searchbox"></input>
        </td>
       </tr>
      </table>
     </div>
        <div id="dlg-buttons">
      <a href="#" class="easyui-linkbutton" onclick="javascript:alert('save')">Save</a>
      <a href="#" class="easyui-linkbutton" onclick="javascript:$('#d2').dialog('close')">Close</a>
     </div>


        <div id="w" class="easyui-window" title="My Window" closed="true"  modal="true" iconCls="icon-save" style="500px;height:200px;padding:5px;">
      <div class="easyui-layout" fit="true">
       <div region="center" border="false" style="padding:10px;background:#fff;border:1px solid #ccc;">
        jQuery EasyUI framework help you build your web page easily.
        <br/><br/>
        click <a href="#" onclick="test()">here</a> to popup another window.
       </div>
       <div region="south" border="false" style="text-align:right;padding:5px 0;">
        <a class="easyui-linkbutton" iconCls="icon-ok" href="javascript:void(0)" onclick="resize()">Ok</a>
        <a class="easyui-linkbutton" iconCls="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>
       </div>
      </div>
     </div>
    </form>
    </body>
    </html>

    1、closed="true"//默认不显示

    2 、modal="true"//是否有遮罩层

    3、关闭窗口事件,无论点击取消还是窗口的关闭都会执行

      $(function (){       
                $('#windowsMSG').window({ 
                     onClose:function(){ alert("dfsd");}
                 });
                  
            });

  • 相关阅读:
    JDK1.7签名APK异常
    tomcat设置虚拟目录
    java runtime.exec() 的讲解(转贴)
    linux 下 .sh 文件语法
    Maven基础-配置远程仓库
    jdk工具keytool和jarsigner帮助Part2(jdk keytool&jarsigner tool manual)
    jdk工具keytool和jarsigner帮助Part1(jdk keytool&jarsigner tool manual)
    spring mvc + freemarker 引入静态文件(css,img,js)
    FilterDispatcher 的作用
    Struts2 过滤器与拦截器
  • 原文地址:https://www.cnblogs.com/huangf714/p/6252450.html
Copyright © 2011-2022 走看看