0

jquery テーマローラーのハイライト/エラー 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 に答える