jqueryUI 之dialog 使用

原创 2016年05月31日 20:58:26

简述

jqueryUI 下有许多组件,用于提供很多的WEB效果,节省开发,开发人员的时间。特别对于缺乏前端开发的人员的情况下, 决定的是后端开发人员的福音。

  • 参考网址:
    http://jqueryui.com/dialog/
  • demo
    结构

    1. js: jquery-1.8.1.min.js ; jquery-ui.min.js
    2. css: jquery-ui.min.css
    3. image : 将下载下来的jquery-ui 下的image复制过来
  • 代码index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>贾志强的苦逼编程之路</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
  </head>
  <body>

  <input type="button" value="弹框" id="showBtn"/>

  <div id="dialog-form" title="新增用户">
    <form id="addUserForm" action="">
          <div style="height:65px">
            <label for="childAccountName">用户名</label>
            <div>
                <input type="text" name="childAccountName" id="childAccountName" value="">
            </div>
         </div>

         <div style="height:65px">
            <label for="childAccountDegree">职位</label>
            <div>
                <select  name="childAccountDegree" id="childAccountDegree" >
                 <option value="1">产品经理</option>
                 <option value="2">项目经理</option>
                 <option value="3">软件工程师</option>
            </select>
            </div>
         </div>

         <div style="height:65px">
            <label for="_password">密码</label>
            <div>
                <input type="password" name="_password" id="_password">
            </div>
         </div>
    </form>
</div>

    <script src="js/jquery-1.8.1.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
    <script src="js/jzq_test_dialog.js" type="text/javascript"></script>

  </body>

  </html>

  • jzq_test_dialog.js 代码
$(function(){

    main.run();

});

var main={

    run:function(){

        this._init_();

        this._event_();

        this._start_();

    },

    _init_:function() {
        var me = this;
        this.$dialog = $('#dialog-form').dialog({

            autoOpen: false,
            height: 330,
            width: 370,
            modal: true,
            buttons:{
                "保存":function() {
                    //me.$form.submit();
                },
                "取消":function(){

                    $(this).dialog('close')
                }
            },
            close: function() {
                  //me.$form.reset();
            }
        });

    }
    ,
    _event_:function(){
        var me = this;
        $("#showBtn").click(function(){
            me.$dialog.dialog('open');
        });

    }
    ,

    _start_:function(){


    }
}

  • 显示效果
  • 这里写图片描述

  • 弹出框,中的input, select 表单,没有添加任何样式,比较丑陋。CSS样式是缺陷,以后努力学习。
    不过有bootstrap 开源样式表,可以使用。改天整理boostrap 表单样式

  • 示例下载地址
    http://download.csdn.net/detail/jia281460530/9537161
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

使用JQueryUI + FreeMarker 实现Div动态DIalog添加和删除

 html> http-equiv="Content-Type" content="text/html; charset=utf-8"> http-equiv="Co...
  • luoyali
  • luoyali
  • 2015年05月27日 16:49
  • 1506

jqueryUI_dialog实例

  • 2015年05月08日 17:13
  • 199KB
  • 下载

用JqueryUI的Dialog+IFrame实现仿模态窗口效果

大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示...

iframe配合JQueryUI dialog实现登录对话框效果

先上图:其实里面的对话框是一个iframe,不把他们做到一个页面中主要方便模块式开发,而且可以带来禁用javascript的时候也能打开编辑界面的效果(当然关闭的时候还需要处理一下): 主要代码:把i...
  • cownew
  • cownew
  • 2011年01月15日 16:47
  • 2101

JqueryUI插件dialog实现遮罩的效果

JqueryUI插件dialog实现遮罩的效果 通过简单的学习了JqueryUI插件的一些内容,对于dialog对话框效果我们也有了一些简单的了解。那么,我来给大家介绍一下使用jqueryUI di...

jQueryUI中Datepicker(日历)插件的介绍和使用

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 ...

jQueryUI中Datepicker(日历)插件的介绍和使用

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 ...

jQueryUI的datepicker日期选择器的使用方法

1.引入文件 jquery.x.x.x.js文件 jquery-ui-x.x.x.custom.js文件 jquery-ui-x.x.x.custom.min.css文件...

jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 说明 ...

JqueryUI插件---对话框的使用(10级学员 乔宇课堂总结)

Jquery 中的对话框的设置以及使用          对话框:首先,我们知道我们这个jquery中的对话框,我们必须使用jquery的js和css,那么我们必须引入必须的js和css了.   ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jqueryUI 之dialog 使用
举报原因:
原因补充:

(最多只允许输入30个字)