zoukankan      html  css  js  c++  java
  • 用dialog在前台实现一个简单的UI对话框

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>对话框部件(Dialog Widget)演示</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    </head>
    <body>

    <button id="opener">打开对话框</button>
    <div id="dialog" title="对话框标题">我是一个对话框
    <form action="/demo/demo_form.asp">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
    </form>
    </div>

    <script>
    $( "#dialog" ).dialog({ autoOpen: false });
    $( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
    });
    </script>

    </body>
    </html>

    jquery $.dialog的用法

    第一种方法:

     function getApparatusLists()

    {   

          var url='${basePath}worklicense/app/getApparatusList.action?;  //链接   

        $.dialog({

            id:'testItem',     

         content:'url:'+url,    //重点,传送参数

           title:'仪器列表:',     

         opacity:0.4,     

         600,    

          height:400,     

         lock:true      });   

    第二种方法: 把表单中的值传过去

    function tt()
     {
       var df = document.thisForm; 
       df.submit();
      
     }
     function getApparatusLists(){
     
         $.dialog({
         id:'testItem',
         content:tt(),  //把表单的值根据表单提交
         title:'仪器列表:',
         opacity:0.4,
         600, 
         height:400,
         lock:true
         });
       
       }

  • 相关阅读:
    orcale 多列转一行显示
    orcale 树形结构查询
    orcale 32位guid转36位guid
    orcale 树形结构查询
    win7下安装virtualbox+Ubuntu12.04笔记
    Spring调度器corn表达式详解
    MYSQL之一主多从搭建方案
    None of the configured nodes are available:[{#transport#-1}解决方案
    大数据分批次提交保存
    ORACLE时间类型字段加减简便运算
  • 原文地址:https://www.cnblogs.com/jiangcm/p/7436588.html
Copyright © 2011-2022 走看看