1

http://jqueryui.com/demos/dialog/を使用しています

$('#add_remarks').click(function(){
    $( "#remark-form" ).dialog( "open" );
});
$( "#remark-form" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        'Add Remarks': function() {
                alert('ok')
                },
                error: function(){
                    //alert('error');
                    //location.reload();
                }
            });
        },
        Cancel: function() {
            $(this).dialog( "close" );
        }
    },
    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    }
});

外部のcssファイルからremark-formの幅と高さを定義できるように、外部のcssクラスを指定したいと思います。

あなたはそれをする方法を知っていますか？

4

4 に答える 4

1

dialogClassを使用できます： 

 $( "#selector" ).dialog({ dialogClass: 'myClass' });
于 2012-04-10T20:31:10.837 に答える
1

addClass.dialog を呼び出している div にクラスを追加するために使用できます。そして、好きなようにスタイリングできます。したがって、コードは次のようになります

$( "#remark-form" ).addClass('your_class').dialog({
autoOpen: false,
modal: true,
buttons: {
    'Add Remarks': function() {
            alert('ok')
            },
            error: function(){
                //alert('error');
                //location.reload();
            }
        });
    },
    Cancel: function() {
        $(this).dialog( "close" );
    }
},
close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
}});
于 2012-04-10T20:21:35.583 に答える
0

ページの読み込み後にCSSを追加する場合（たとえば、動的CSSファイルがある場合）、次を使用できます。

function includeCSSFile( file_url ) {
    var cssFile = document.createElement('link');
    cssFile.setAttribute('type', "text/css" );
    cssFile.setAttribute('rel', "stylesheet" );
    cssFile.setAttribute('href', file_url );
    document.getElementsByTagName("head").item(0).appendChild(cssFile);
}

メインのjavascriptファイルで、別のcssをロードしたい場合は、次のような関数を呼び出す必要があります。

includeCssFile ( 'http://fonts.googleapis.com/css?family=Bad+Script' )

その後、コードで$（selector）.addClass（...）を使用できます。

私はそれをサイトで使用していて、link_urlがPHPスクリプトによって与えられ、動的に記述されることもありますが、正常に機能しています...

于 2012-04-10T20:30:26.983 に答える
0

テーマ タブで指定したリンクから、レンダリングされた html コードは次のようになります。

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

アイテムのセレクターがあるので#remark-form、必要なのは次のとおりです。

#remark-form .ui-dialog { height: 100px !impportant; width 100px !important}

次に、このスタイル コードを html ドキュメントまたは外部 css の head セクションに追加してから、それを指すことができます

于 2012-04-10T20:26:47.703 に答える