标签: jquery-ui-dialog

我是JQueryUI的新手,虽然我有一个对话框工作,但它没有以我认为我指定的大小打开.为什么在定义对话框时设置宽度和高度不会影响对话框的初始大小？如何制作600px×500像素？

这是定义对话框的div:

<div id="dialog-form" title="Create Appointment">   
  <form> . . . </form>
</div>

以下是用于对话的JavaScript:

$(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        maxWidth:600,
        maxHeight: 500,
        width: 600,
        height: 500,
        modal: true,
        buttons: {
            "Create": function() {
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
        }
    });

以及定义按钮以打开它的JavaScript:

$("#create-appt")
    .button()
    .click(function() {
        $("#dialog-form").dialog("open");
    });
});

编辑:

我现在看到了问题:除了我使用--app=...命令行选项在谷歌浏览器中运行它之外,这本来可以正常工作,所以它没有重新加载整个应用程序.

我已经实现了以下代码,用于在jQuery对话框中上传照片(使用iframe).

这是Iframe

<div style="display: none">
    <iframe id="upload-form" frameborder="0" marginheight="0" marginwidth="0" src="Upload.aspx"></iframe>
</div>

这是父页面上的jQuery代码,它负责打开对话框.

$("#upload-image").click(function (e) {
    e.preventDefault();
    $('#upload-form').dialog({
        modal: true,
        width: 300,
        title: "Upload Image",
        autoOpen: true,
        close: function(event, ui) { $(this).dialog('close') }
    });
});

然后我在上传成功后注入脚本(在iframe页面上),将结果传递回父页面,但我想同时关闭对话框.

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    $(parent.document).find('#upload-form').dialog('close');
});

该#imagePathValue表被成功过去了,但我似乎无法能够关闭对话框.

有任何想法吗？

当我下载一个jQuery-ui主题时,我需要添加什么来获得与jQuery-ui演示页面中相同的默认值？

我开箱即用的对话框很大(见下文).我知道所有的css都可以从演示页面获得,但我不是一个真正的CSS专家,不知道该拿什么,以及要离开什么.

编辑

这是一个显示相同的jsFiddle链接.

编辑

我正在使用JQuery UI,并希望将对话框水平居中但垂直位于中心上方,可能是固定数量的像素或距离页面顶部的相对距离.是否有捷径可寻？看起来只有几个预先定义的值,或者我可以使用一个确切的位置,但有一个简单的方法来实现这一点吗？

 $("#dialog-form").dialog({
                autoOpen: false,
                width: 630,
                position: 'center',
                modal: true,
                resizable: false,
                closeOnEscape: false

            });

我有以下JS:

$('#listeditdialog').dialog('open');

这将打开以下对话框:

$('#listeditdialog').dialog({
    autoOpen: false,
    resizable: false,
    position: ['center',150],
    width: 450,
    open: function(event, ui) {
        $("#listeditdialog").load("/projects/view/tasks/ajax/?listid=" + XXXX);
    },
    close: function(event, ui) {
        $("#listeditdialog").html('<p id="loading"> </p>');
    }
});

我的问题是,当我在另一个JS函数中使用对话框打开函数时,如何传递一个listID变量,我将获得点击甚至绑定触发对话框打开func.

谢谢!

我正在使用alert()将验证错误输出回用户,因为我的设计没有提供其他任何内容,但我宁愿使用jQuery UI对话框作为我的消息的警告对话框.

由于错误不包含在(html)div中,我不知道该怎么做.通常你会分配dialog()到一个div说$("#divName").dialog()但我更需要一个alert_dialog("Custom message here")类似的东西或类似的东西.

有任何想法吗？

我在jquery ui对话框中使用jquery ui自动完成小部件.当我输入搜索文本时,文本框缩进(ui-autocomplet-loading)但不显示任何建议.

var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];

$("#company").autocomplete({        
    source : availableTags ,
minLength: 2
});

company是附加自动完成的文本框的id.

我认为它可能是az索引所以我设置这个:

.ui-autocomplete, .ui-menu, .ui-menu-item {  z-index: 1006; }

但它仍然没有显示.我把自动完成放在一个"常规"页面,它工作正常.

我正在使用jquery ui版本1.8.2.任何想法的想法？

我希望对话框具有最大高度设置,但是,如果内容较小,则缩小以执行height = 'auto'操作.这在JQuery UI对话框中是否可行？

我正在使用下面的代码动态创建一个jQuery UI Dialog小部件:

 $(function () {
        var Selector = $("a:contains('sometext')");
        $(Selector).bind('click', function () {
            var NewDialog = "<div dir=rtl id='MenuDialog'></div>";
            var DialogContetn = '<div dir=rtl ><table width=100%><tr><td><textarea id="txtRequestContent" cols="30" rows="2"></textarea></td><td><table><tr><td><input id="btnSendEditionRequest" type="button" value="Send" /></td></tr><tr><td><input id="btnCloseDialog" type="button" value="Cancel" /></td></tr></table></td></tr></table></div>';
            $('body').append(NewDialog);
            $('#MenuDialog').html(DialogContetn);
            $('#MenuDialog').hide();
            $('#MenuDialog').dialog({ modal: true, title: "title", show: 'clip', hide: 'clip' });
            $("#btnCloseDialog").live('click', function () {
                $("#MenuDialog").dialog('close');
            });
            return false;
        });
    });

第一次加载时,jQuery Dialog正常工作,当我点击btnCloseDialog时,jQuery Dialog成功关闭.

但是,之后,btnCloseDialog不再关闭对话框.为什么会这样？

更新

我把我的代码放在jsfiddle上.

这是一种奇怪的行为,因为该按钮在jsFiddle中正确关闭了对话框,但在我的项目中没有关闭对话框.

我想在运行中创建一个jQuery对话框.我正在使用这个:

var newDiv = $(document.createElement('div')); 
$(newDiv).html('hello there');
$(newDiv).dialog();

然后我在html标题中有这个:

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

当我尝试在IE7中运行JS时,我在$(newDiv).dialog()上得到以下错误; line:Object不支持此属性或方法.

有谁知道发生了什么？