zoukankan      html  css  js  c++  java
  • jquery ui-----弹出窗口 dialog

    jquery ui 提供了强大的dialog功能,基本能满足开发的功能。

    先上一个简单的例子:

    【代码】

    <script> $(function() {   $( "#dialog" ).dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } }); }); </script>

    <div id="dialog" title="Basicdialog"> < p>

    This is the default dialog which is useful for displaying information.

    The dialog window can be moved, resized and closed with the 'x' icon.

    < /p>

    </div>

    具体用法还是简单的,总结如下:

    一、需要加载的js和css

    请记住顺序,加载错的会导致意想不到的结果。

    (1)jquery.js

    (2)jquery.ui.core.js

    3)需要的效果:jquery.ui.xx.js

    widget, mouse, diaggable, resizable, position的js,

    如果不加载个别js,会导致窗口相应的功能失效,比如 定位,拖动,缩放。

    (4)jquery.ui.dialog.js

    (5)如果需要窗口弹出或者隐藏的 绚丽效果

    a、需要加载 jquery.effects.core.js

    b、加载相应的效果,如需要explode效果,加载jquery.effects.explode.js

     

    【代码示例】

    <script src="../js/jquery-1.7.1.js"></script> <script src="../js/ui/jquery.ui.core.js"></script> <script src="../js/ui/jquery.ui.widget.js"></script> <script src="../js/ui/jquery.ui.mouse.js"></script> <script src="../js/ui/jquery.ui.draggable.js"></script> <script src="../js/ui/jquery.ui.resizable.js"></script> <script src="../js/ui/jquery.ui.position.js"></script> <script src="../js/ui/jquery.ui.dialog.js"></script>

    <script src="../js/ui/jquery.effects.core.js"></script> <script src="../js/ui/jquery.effects.blind.js"></script>

    二、页面上的html

    页面上需要一个装dialog的容器,需要一个固定ID,控制弹出窗口的内容。 至于这个容器里面的内容,可以事先编进去(比如一个table,form),也可以在触发控件时在加载进去,或者ajax加载进去。

    1、html固定格式的弹出窗口

    <div id = "dialog_div" title="弹出窗口的标题">

    这里是窗口里面显示的内容

    < /div>

    2、不同情况的加载内容,可以定义一个空标签,待js加载

    <div id = "dialog_div" >< /div>

     

    三、触发窗口弹出的js

    主要函数如下:$("dialog_div").dialog();

    dialog函数有一个强大的参数库,如下

    【参数】

     

    参数 默认值 作用
    autoOpen true

    是否自动打开dialog窗口。当属性为false的时候,一开始隐藏窗口,

    直到.dialog("open")的时候才弹出dialog窗口

    buttons {} 显示一个按钮,并写上按钮的文本,设置按钮点击函数
    closeOnEscpe true 是否点击键盘ESC键关闭dialog
    dialogClass null 为窗口加上的class属性

    diaggable

    resizable

    true 是否能拖动、缩放 (必须加载相应的js)

    width

    height

    auto 窗口的长宽

    maxWidth

    maxHeight

    null

    长宽的最大值

    minWidth

    minHeight

    150

    长宽的最小值

    hide

    show

    null

    dialog关闭和打开时候的效果。(必须加载相应的jquery.effects.xx.js)

    效果有:blind,bounce,clip,drop,explode,fade,fold,

    highlight,pulsate,puff,slide,scale,size,shake,transfer

    modal false 是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口
    title null dialog的标题文字
    position center

    dialog的显示位置:可以是'center', 'left', 'right', 'top', 'bottom',

    也可以是top和left的偏移量,

    也可以是一个字符串数组例如['right','top']。

    zIndex 1000 dialog的zindex值
    stack true 是否在dialog获得焦点是,dialog将在最上面
    bgiframe false 在IE6下,让后面那个灰屏盖住select(需要调用jquery.bgiframe.js)
    disabled false 当为true是,关掉这个dialog

    【代码示例】

    <script> // increase the default animation speed to exaggerate the effect $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: "blind", hide: "explode",

    buttons: { "Ok": function() { $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } } });

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

    <div id="dialog" title="Basicdialog"> < p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> < /div>

    <button id="opener">OpenDialog</button>

    四、其他

    1、事件

    (1) beforeclose 当dialog尝试关闭的时候此事件将被触发,如果返回false,那么关闭将被阻止

    (2) close 关闭dialog的时候此事件将被触发

    (3) open 打开dialog的时候此事件将被触发

    (4) focus 获得焦点的时候此事件将被触发

    (5) dragStart 开始拖动dialog的时候此事件将被触发

    (6) drag 拖动dialog过程此事件将被触发

    (7) resizeStart 开始缩放dialog的时候此事件将被触发

    (8) resize 缩放dialog过程的时候此事件将被触发

    (9) resizeStop 缩放结束的时候此事件将被触发

    【示例】

    $('.selector').dialog({ beforeclose: function(event, ui) { ... } });

     

    2、方法

    (1)destroy 摧毁 例:.dialog( 'destroy' ) (2)disable dialog不可用,例:.dialog('disable'); (3)enable dialog可用,

    (4)close,open 关闭、打开dialog (5)option 设置和获取dialog属性,

    例如:.dialog( 'option' , optionName , [value] ),如果没有value,将是获取。 (6)isOpen 如果dialog打开则返回true,例如:.dialog('isOpen') (7)moveToTop 将dialog移到最上层,例如:.dialog( 'moveToTop' )。

    【示例】

    $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); return false; }); });

    //点击 opener时,窗口打开

  • 相关阅读:
    2019年牛客多校第一场 E题 ABBA DP
    2019年牛客多校第一场 B题 Integration 数学
    Codeforces Round #574 (Div. 2)题解
    Justice(HDU6557+2018年吉林站+二进制)
    Strength(HDU6563+2018年吉林站+双指针瞎搞)
    Lovers(HDU6562+线段树+2018年吉林站)
    The Tower(HDU6559+2018年吉林站+数学)
    Good Numbers(HDU5447+唯一分解)
    [iOS]C语言技术视频-01-变量的定义
    [Unity]Unity开发NGUI代码实现ScrollView(放大视图)
  • 原文地址:https://www.cnblogs.com/ejllen/p/3622517.html
Copyright © 2011-2022 走看看