Question

我使用jQuery进行进度条移动，完成后显示一些文本。

HTML：

>>> print response.body
<div class="foo"></div>
<div id="dog"></div>
<div id="cat"></div>
<div id="horse"></div>
<div class="bar"></div>
<div class="clearall"></div>
<div class="foo"></div>
<div id="sheep"></div>
<div id="monkey"></div>
<div class="bar"></div>

>>> after_foo = "following::*[not(@class='bar')]"
>>> after_first_bar = "./following::div[@class='bar'][1]/following::*"
>>> xpath_diff = "set:difference(%s, %s)" % (after_foo, after_first_bar)
>>> for foo in response.xpath("//div[@class='foo']"):
   ...:     print foo.xpath(diff_xpath).extract()
   ...:     
[u'<div id="dog"></div>', u'<div id="cat"></div>', u'<div id="horse"></div>']
[u'<div id="sheep"></div>', u'<div id="monkey"></div>']

JS：

<div id="dialog">
    <div class="demo-wrapper html5-progress-bar">
        <div class="progress-bar-wrapper">
            <progress id="progressbar" value="0" max="100"></progress>  <span class="progress-value">0%</span>

        </div>
    </div>
</div>

此代码隐藏了所有内容，根本没有显示任何内容。我希望对话框里面有一个进度条，当它完成时，一些文本替换内容。这有什么问题？

Answer 1

问题源自buttons方法的dialog属性，您使用的方法不正确。

The jQuery UI documentation提到您可以将数组或对象传递给buttons。

如果您决定将对象传递给对象，则每个键都会显示在其上按钮，方法是单击它时执行的方法。
如果您传递一个数组 of objects ，则数组中的每个对象都会定义每个按钮。

由于你传递的是一个对象，当你传递一个数组时你需要使用它的格式，jQuery UI会变得混乱，并抛出这个错误：

"Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name."

所以解决方案是给它一个格式正确的对象。

这将创建两个按钮，一个显示“确定”并关闭对话框，并显示“查看帐户详细信息”按钮：

jsFiddle

$(document).ready(function () {

    var progressbar = $('#progressbar'),
        max = progressbar.attr('max'),
        time = (1000 / max) * 5,
        value = progressbar.val();

    var loading = function () {
        value += 1;
        addValue = progressbar.val(value);

        $('.progress-value').html(value + '%');

        if (value == max) {
            clearInterval(animate);

            $("#dialog").css('background', 'none').html('<br>Open your <a href="http://gmail.com" target="_blank">Gmail</a> to confirm your account.<br><br>Click the <i>View Account Details</i> button to view your details.').dialog("option", "title", "Your Account Has Been Created!");
        }
    };

    var animate = setInterval(function () {
        loading();
    }, time);

});


$(function () {
    $("#dialog").dialog({
        resizable: false,
        width: 1000,
        height: 500,
        modal: true,
        title: "Creating Your Account...",
        buttons: {
            "View account details": function () {
                $(this).dialog().html('<table><tr><td>Your username is:</td><td><input type="text" readonly value="hell;o"></td></tr><tr><td>Your password is:</td><td><input type="text" readonly value=""></td></tr><tr><td>Your email is:</td><td><input type="text" style="overflow:scroll;" value=""></td></tr></table><br><br>Open your <a href="http://gmail.com" target="_blank">Gmail</a> to confirm your account.');
            },
            "Ok": function () {
                $(this).dialog("close");
            }
        }
    });
});

<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog">
    <div class="demo-wrapper html5-progress-bar">
        <div class="progress-bar-wrapper">
            <progress id="progressbar" value="0" max="100"></progress>	<span class="progress-value">75%</span>

        </div>
    </div>
</div>
<center></center>

jQuery .hide（）隐藏得太早了

1 个答案: