Question

我想将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)是必需的，除非有其他建议。

Answer 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已经没有内置的小部件了。

将css应用于jquery代码

1 个答案: