Question

我在使用jQuery对话框时遇到了困难，因为这是我第一次使用它们而不是Lightbox.js。我正在打开一个对话框窗口，其中包含使用jQuery uniform.js设置的选择菜单。问题是统一插件没有为选择菜单设置样式，我已经尝试了将JS内联设置为在对话框加载时重新初始化插件的所有内容。

以下是我初始化对话框窗口的方法

$('.dialog_function').each(function() {
    var $link = $(this);
    var $dialog = $('<div></div>')
        .load($link.attr('href'))
        .dialog({
            autoOpen: false,
            title: $link.attr('dialog'),
            width: 550,
            draggable: false,
            modal: true,
            open: function(){
                console.log('dialog opened');
            },
            buttons: {
                "Submit": function(){},
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

    $link.click(function() {
        $dialog.dialog('open');
        return false;
    });
});

然后在加载的窗口内我有以下代码

<link rel="stylesheet" type="text/css" href="../css/uniform.css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/plugins/forms/jquery.uniform.js"></script>

<script type="text/javascript">
    $(function() {
        console.log('test');
        $(".styled").uniform();
    });
</script>

<div class="dialog">
    <form action="">
        <label>Contact:</label>
        <input type="text" name="contact" class="clear" placeholder="" />
        <label>Task:</label>
        <input type="text" name="task" class="clear" placeholder="" />        
        <label>When is this task due?:</label>
        <input class="span12" type="date" name="date" />
        <label class="mt10">Who is repsonsbile?:</label>
        <select name="" class="styled clear">
            <option value="">Usual select box with dropdown styling</option>
            <option value="">Option 2</option>
            <option value="">Option 3</option>
            <option value="">Option 4</option>
            <option value="">Option 5</option>
            <option value="">Option 6</option>
            <option value="">Option 7</option>
            <option value="">Option 8</option>
        </select>        
        <label class="mt10">Who is repsonsbile?:</label>
        <select name="" class="styled clear">
            <option value="">Usual select box with dropdown styling</option>
            <option value="">Option 2</option>
            <option value="">Option 3</option>
            <option value="">Option 4</option>
            <option value="">Option 5</option>
            <option value="">Option 6</option>
            <option value="">Option 7</option>
            <option value="">Option 8</option>
        </select> 
    </form>
</div>

当我通过浏览器加载页面时，选择菜单的样式非常完美，但是当它在对话框窗口中加载时，JS无法对它们进行样式化。

有什么建议吗？提前谢谢。

jQuery UI对话框中的插件无法正常工作

0 个答案: