0

我想将 jquery themeroller highlight/error html 应用于我的 jquery 代码。jquery高亮代码是这样的（错误代码类似）： 

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

我的代码结构如下：

function doAjax(){
        $.ajax({
            url: 'myfile.php',
            success: function(data) {
                if (data == 'Initializing...please wait')
                {
                    $('#quote p').html(data); //here I would add highlight css code
                    setTimeout(doAjax, 2000);
                }
                else
                {

                    $('#quote p').html(data); //here is error css code

                }

            }
        });

    }

这打印到一个 div：

<div id="quote"><p> </p></div>

我认为在这里使用.css()很麻烦。有没有办法将 html 添加到条件中？请注意，.html(data)当您从服务器收到不同的消息时，这是必要的，除非有其他建议。

4

1 回答 1

1

您可以尝试创建一个小部件来创建元素。

$.widget( "jui.highlightBox", {

    options: {
        html:'',
        icon: 'ui-icon-info'
    },

    _create: function() {
        var wrapper = $('<div>',{'class':'ui-widget'}),
            container = $('<div>',{'class':'ui-state-highlight ui-corner-all',style:'margin-top: 20px; padding:.7em;'}),
            icon = $('<span>',{'class':'ui-icon ' + this.options.icon,style:'float: left; margin-right: .3em;'});
        wrapper.html(container.html(this.options.html))
        .appendTo(this.element);
        if(this.options.icon != '')
            icon.prependTo(container);
    }
});

对于错误文本...

$.widget( "jui.errorBox", {

    options: {
        html:'',
        icon: 'ui-icon-alert'
    },

    _create: function() {

        var wrapper = $('<div>',{'class':'ui-widget'}),
            container = $('<div>',{'class':'ui-state-error ui-corner-all',style:'margin-top: 20px; padding:.7em;'}),
            icon = $('<span>',{'class':'ui-icon ' + this.options.icon,style:'float: left; margin-right: .3em;'});
        wrapper.html(container.html(this.options.html))
        .appendTo(this.element);
        if(this.options.icon != '')
            icon.prependTo(container);
    }
});

你可以像这样使用高光...

$('<p>').highlightBox({'html':data}).appendTo('#quote'); // highlight

...这是错误文本

$('<p>').errorBox({'html':data}).appendTo('#quote'); // error

所以你的函数现在看起来像这样......

function doAjax(){
        $.ajax({
            url: 'myfile.php',
            success: function(data) {
                if (data == 'Initializing...please wait')
                {
                    $('<p>').highlightBox({'html':data}).appendTo('#quote');
                    setTimeout(doAjax, 2000);
                }
                else
                {

                    $('<p>').errorBox({'html':data}).appendTo('#quote');

                }

            }
        });

    }

由于这会创建<p>标签，因此您可以将其从 HTML 中删除...

<div id="quote"></div>

我很惊讶 JQuery UI 还没有内置的小部件。

于 2012-08-28T06:09:40.050 回答