jQuery UI カスタマイズ

jQuery UI は複数のカスタマイズ方法を提供しています。ダウンロードビルダー(Download Builder)が必要なオプションだけを含むカスタムバージョンをカスタマイズする方法をすでに確認しましたが、ここでは他のカスタマイズ方法も提供されています。


jQuery UI 基礎:オプションの使用

jQuery UI の各プラグインにはデフォルト設定があり、デフォルト設定値は一般的に最も基本的で一般的な使用状況に基づいて設定されています。特定のプラグインをデフォルト以外の値に設定したい場合は、「options」を使用してそのデフォルト設定を上書きできます。オプションは、jQuery UI ウィジェットにパラメータとして渡されるプロパティの集合です。例えば、スライダー(slider)ウィジェットには orientation オプションがあり、スライダーを水平にするか垂直にするかを指定できます。スライダーのこのオプションを設定するには、次のようにパラメータとして渡すだけです:

$( "#mySliderDiv" ).slider({
    orientation: "vertical"
});

さらに多くのさまざまなオプションを渡すことができます。各オプションはカンマで区切ります:

$( "#mySliderDiv" ).slider({
    orientation: "vertical",
    min: 0,
    max: 150,
    value: 50
});

オプションは中括弧{ }内に置く必要があることを覚えておいてください。上記の例は簡単な説明にすぎません。jQuery UI ウィジェット一式の詳細情報を取得するには、次を参照してください:jQuery UI サンプル。


ビジュアルカスタマイズ:jQuery UI テーマをデザインする

独自のテーマをデザインしたい場合、jQuery UI はテーマをカスタマイズするための非常に優れたアプリケーションを提供しています。それが ThemeRoller です。具体的なカスタマイズについては、次を参照してください:jQuery UI ThemeRoller。

ThemeRoller は、jQuery UI ウィジェットを使用してデザインされたすべての要素にカスタムインターフェースを提供します。左側のカラムにある「levers」を調整すると、右側のカラムのウィジェットがあなたのデザインに従って表示されます。ThemeRoller の Gallery タブには、ダウンロードビルダー(Download Builder)ページで提供されているものと同じ、プリデザインされたテーマがいくつか用意されています。これらのテーマを基に調整したり、直接ダウンロードしたりできます。

ThemeRoller 实例


テーマをダウンロード

ThemeRoller ページの「Download theme」ボタンをクリックすると、ダウンロードビルダー(Download Builder)ページに移動し、カスタムテーマがメインのドロップダウンメニューで自動的に選択されます。ダウンロードパッケージをさらに構成できます。ダウンロードが完了すると、次のページが表示されます:example.htmlページにはカスタマイズしたテーマが使用されています。

ヒント: テーマを編集する必要がある場合は、CSS ファイルを開いて43行目にある「To view and modify this theme, visit ...」を見つけてください。その URL が、ThemeRoller でテーマを開いて編集するためのリンクです。

その他の拡張