jquery-dialog

作者: 该昵称注册中 | 来源:发表于2018-03-09 10:25 被阅读0次

    dialog
    去掉"×"关闭
    .no-close .ui-dialog-titlebar-close {
    display: none;
    }

    $("#dialog").dialog({
    dialogClass:'no-close',
    buttons:[
    {
    text:'ok',
    click:function(){
    $(this).dialog('close');
    }
    }]
    })

    OPTIONS(选项)

    appendTo
    //对话框(和叠加,如果是模态)应该附加到哪个元素。
    $( ".selector" ).dialog({
    appendTo: "#someElem"
    });
    $(".selector").dialog("option","appendTo","#someElem");

    autoOpen(true)
    设为true 弹出框在初始化就会打开
    $( ".selector" ).dialog({
    autoOpen: false
    });

    buttons (Object or Array)
    指定弹出页面显示的按钮
    $( ".selector" ).dialog({
    buttons: [
    {
    text: "Ok",
    icon: "ui-icon-heart",
    click: function() {
    $( this ).dialog( "close" );
    }
    }
    ]
    });

    classes object
    指定要添加到小部件的其它类
    default:
    {
    "ui-dialog": "ui-corner-all",
    "ui-dialog-titlebar": "ui-corner-all",
    }
    例如
    $(".selector").dialog({
    classes:{"ui-dialog": "highlight"}
    })

    closeOnEscape(true)
    指定对话框在焦点并且用户按下ESC(退出)键时是否应该关闭
    $(".selector").dialog({
    closeOnEscape:false
    })

    closeText (close)
    指定关闭按钮的文本。 请注意,在使用标准主题时,关闭文本显然是隐藏的。
    $(".selector").dialog({
    closeText:"关闭"
    })

    dialogClass
    指定的类名将被添加到对话框中,以进行其他主题。
    $( ".selector" ).dialog({
    dialogClass: "alert"
    });

    draggable (true)
    能否拖动弹出框
    $( ".selector" ).dialog({
    draggable: false
    });

    height(auto)
    指定弹出框的高度
    $( ".selector" ).dialog({
    height: 400
    });

    hide
    Boolean or Number or String or Object
    关闭弹出框
    Boolean 设置false 不使用动画 立即关闭 true 使用默认的动画时间
    Number 按指定的时间淡化关闭弹出框
    String 已插件已有的效果淡化 如slideUp 或者 fold
    Object 自定义淡化效果

    maxHeight maxWidth minHeight minWidth
    //最大高度 //最大宽度

    modal(false)
    如果设置为true,对话框将具有模态行为; 页面上的其他项目将被禁用,
    即不能与之交互。 模式对话框在对话框下方但在其他页面元素上方创建叠加层。

    position
    弹出框的位置
    $( ".selector" ).dialog({
    position: { my: "left top", at: "left bottom", of: button }
    });

    resizable(true)
    true弹出框自动调节大小

    show
    打开弹出框 和hide相同
    $( ".selector" ).dialog({
    show: { effect: "blind", duration: 800 }
    });

    title
    标题
    $( ".selector" ).dialog({
    title: "Dialog Title"
    });

    width
    弹出框宽度

    Methods

    close()
    关闭弹出框
    $( ".selector" ).dialog( "close" );

    destroy()
    $( ".selector" ).dialog( "destroy" );
    彻底删除弹出框

    instance()
    检索对话框的实例对象。 如果元素没有关联的实例,则返回undefined。

    moveToTop()
    将对话框移到对话框的顶部
    $( ".selector" ).dialog( "moveToTop" );

    open()
    打开弹出框
    $( ".selector" ).dialog( "open" );

    option( optionName )
    获取当前与指定的optionName关联的值
    var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
    var options = $( ".selector" ).dialog( "option" ); 获取所有

    option( optionName, value )
    设置与指定的optionName关联的对话框选项的值。
    $( ".selector" ).dialog( "option", "disabled", true );
    $( ".selector" ).dialog( "option", { disabled: true } );

    EVENTS
    beforeClose( event, ui )
    当对话即将关闭时触发。 如果取消,对话框将不会关闭
    $( ".selector" ).dialog({
    beforeClose: function( event, ui ) {}
    });

    close( event, ui )
    关闭对话框时触发
    $( ".selector" ).dialog({
    close: function( event, ui ) {}
    });
    $( ".selector" ).on( "dialogclose", function( event, ui ) {} );

    create( event, ui )
    创建对话框时触发
    $( ".selector" ).dialog({
    create: function( event, ui ) {}
    });

    drag( event, ui )
    拖动对话框时触发
    $( ".selector" ).dialog({
    drag: function( event, ui ) {}
    });

    dragStart( event, ui )

    dragStop( event, ui )

    focus( event, ui )
    当对话获得焦点时触发。
    $( ".selector" ).dialog({
    focus: function( event, ui ) {}
    });

    open( event, ui )
    弹出框在打开时触发
    $( ".selector" ).dialog({
    open: function( event, ui ) {}
    });

    resize( event, ui )
    触发对话框的大小触发

    当用户开始调整对话框大小时触发。
    resizeStart( event, ui )
    resizeStop( event, ui )

    //完全清除 弹出内容
    main.html
    <div id="content"></div>

    main.js
    $("#id").click(function(){
    $("#content").load("../dialog.html")
    })

    dialog.html
    <div id="bind_company_dialog">
    .......
    </div>
    <script src="../dialog.js">
    <script src="../other.js">

    //dialog.js 这个要自执行 触发 才能弹出
    $("#bind_company_dialog").dialog({
    autoOpen:false,
    width:800,
    height:800,
    model:true,
    resizable: false,
    title:'企业处理',
    buttons:[
    {text:'确定',click:function(){
    $(this).dialog("close");
    }},
    {text:'取消',click:function(){
    $(this).dialog("close");
    }}
    ],
    //所有的关闭方法 都会经过这个
    close:function(){
    $("#bind_company_dialog").dialog('destroy');
    $("#bind_company_content").empty();
    }
    });
    解析
    弹出框在弹出时 会在html多生成一个
    1:在ui-dialog aria-describedby="bind_company_dialog" 的div 这个下面有弹出框的整体内容
    $("#bind_company_dialog").dialog('destroy')是清除 aria-describedby的div内容
    2:在 id=content下面还有一份
    $("#bind_company_content").empty();清除
    这样再次load弹出就不会有问题了

    相关文章

      网友评论

        本文标题:jquery-dialog

        本文链接:https://www.haomeiwen.com/subject/xpkpfftx.html