通常のhtmlにjQuery UIテーマを適用するにはどうすればいいですか？

Question

ダイアログ、ボタンなどのさまざまなウィジェットにjQuery UIを使用します。エラー/アラート通知やハイライトスタイルなどの他のWebページ要素のテーマを引き続き使用したいと思います。 、ラッパーのdivがあります

<div class="ui-widget"> 
    <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all"> 
     <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span> 
     <strong>Alert:</strong> Sample ui-state-error style.</p> 
    </div> 
</div> 

など背景アイコン、とにまたがる私はこれらをコピーしたりしてください：だから私は、例えば、彼らは周りのCSSの使用内容を表示するThemeRollerのページにアラート通知を行ってきましたjQueryのUIのJavaScriptは私のためにいくつかを作成？ウィジェットではないHTMLにテーマを適用する適切な方法は何ですか？

Answer 1

自分のHTMLにそのまま適用してください。 Javascriptは必要ありません（ホバー状態を除く）。

jQueryUIのウィジェットを使用している場合、JavascriptはそれらのクラスですべてのHTMLを作成します。

ホバー状態が必要な場合は、ui-state-hoverクラスを切り替える必要があります。そのためには、JavaScriptが必要です：

$('.ui-state-error').hover(function(){ 
    $(this).toggleClass('ui-state-hover'); 
}); 

Answer 2

あなたは、デフォルトでは、あなたのサイト上でThemeRollerの事前定義された要素を使用することができます：ボタン、アイコン、タイトルバーなどとDatePickerのようなすべてのjQueryウィジェット、ダイアログ、ハイライト/エラー - ほとんどすべてのelemenstはhttp://jqueryui.com/themeroller/#themeGalleryに表示されます。

これをアーカイブするには、HTMLタグとhtmlタグの適切なクラスをコピーする必要があります。ブラウザは、themeroller.cssのスタイルをHTMLタグにコピーします。

しかし、これはあなたのレイアウトが少し制限されていることを意味します。正しいcssクラス（.ui-state-default、.ui-state-hover、.ui-state-disabled、アイコンなど）をHTMLに適用する限り、依然として他の非themeroller要素を含めることができますテーマウィッチャーを使用することができます。適用可能なクラスの一覧については、http://jqueryui.com/docs/Theming/APIを参照してください。