7

ダイアログやボタンなどのさまざまなウィジェットに jQuery UI を使用しています。エラー/アラート通知やハイライト スタイルなど、他の Web ページ要素にも引き続きテーマを使用したいと考えています。そこで、テーマローラーのページにアクセスして、アラート通知など、CSS で使用されているものを確認しました。

<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>

ラッパー div、背景アイコン付きのスパンなどがあります。これらをコピーするだけですか、それとも jQuery UI JavaScript が作成してくれますか? 非ウィジェットhtmlにテーマを適用する適切な方法は何ですか?

4

2 に答える 2

4

それを独自の HTML に適用するだけです。Javascript は必要ありません (ホバー状態を除く)。

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

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

$('.ui-state-error').hover(function(){
    $(this).toggleClass('ui-state-hover');
});
于 2011-09-21T23:51:20.537 に答える
1

デフォルトでは、サイトで事前定義されたテーマローラーの要素のみを使用できます: ボタン、アイコン、タイトルバーなどと、datepicker、ダイアログ、ハイライト/エラーなどのすべての jquery ウィジェット - http:/で表示されるほぼすべての要素/jqueryui.com/themeroller/#themeGallery .

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

ただし、これは、レイアウトが少し制限されることも意味します。html に適切な css クラス (.ui-state-default、.ui-state-hover、.ui-state-disabled、icons など) を適用する限り、themeroller 以外の他の要素を含めることができます。テーマスイッチャーを使用できる -適用可能なクラスの完全なリストについては、http: //jqueryui.com/docs/Theming/API を参照してください。

于 2011-09-22T03:13:37.847 に答える