jQuery UI入門

リンクjQuery UIとは何ですか?

jQuery UIは、非常にインタラクティブなwebアプリケーションを構築するために使用できるjQuery JavaScriptライブラリの上に構築されたウィジェットと相互作用 このガイドは、jQuery UIがどのように機能するかを高速化するように設計されています。 開始するには、以下に沿って従ってください。

linkデモをチェックアウトすることから始めます

jQuery UIが何ができるかを感じるには、UIデモをチェックしてください。

デモセクションでは、ナビゲーションにjQuery UIが提供するすべての相互作用とウィジェットが一覧表示されます。 相互作用やウィジェットを選択すると、その特定のプラグインのためのいくつかのデモ構成が表示されます。 各デモでは、ソースコードを表示し、テーマを変更することができ、URLは常にブックマークすることができます。 たとえば、アコーディオンウィジェットのfill spaceデモページをチェックしてください。

リンクあなたのカスタムjQuery UIのダウンロードを構築

あなたはjQueryのUIが何であり、それが何をするかの基本的な理解を持っていたら、あなたはそれを試してみる準備ができています！ JQuery UIのコピーをダウンロードするには、jQuery UI webサイトのDownload Builderに移動します。 jQuery UIのDownload Builderを使用すると、ダウンロードしたいコンポーネントを選択して、プロジェクト用のライブラリのカスタムバージョンを取得できます。

リンクステップ1:必要なコンポーネントを選択

ダウンロードビルダのメイン列には、jQuery UIのすべてのJavaScriptコンポーネントがグループに分類されています:コア、インタラクション、ウィジェット、エフェクト。 JQuery UIの一部のコンポーネントは、他のコンポーネントに依存しています。 ダウンロードしたいウィジェットのチェックボックスをオンにするだけで、必要な依存関係も自動的にチェックされます。 選択したコンポーネントはすべて、カスタムjQuery UI JavaScriptファイルに結合されます。

リンクステップ2：テーマを選択する（または独自のカスタムテーマをロールする）

ダウンロードビルダの右あなたは私たちが提供する様々なテーマから選択するか、ThemeRollerを使用して独自のカスタムテーマを設計することができます（後でその詳細）。

高度なテーマ設定:ダウンロードビルダーのテーマセクションには、テーマの高度な構成設定もいくつかあります。 単一のページで複数のテーマを使用する場合は、これらのフィールドが便利です。 1つのページで1つのテーマのみを使用する場合は、これらの設定を完全にスキップできます。ステップ3：jQuery UIのバージョンを選択します。

ダウンロードビルダーの最後のステップは、バージョン番号を選択することです。 ライブラリの異なるバージョンが異なるバージョンのjQueryをサポートするため、選択したjQuery UIのバージョンだけでなく、そのバージョンがサポートするjQuery Coreのバージ JQuery UIの各バージョンの新機能の詳細については、プロジェクトのアップグレードガイドと変更ログを参照してください。

リンクをクリックしてダウンロード！

これで、Download Builderは終了です。 ダウンロードボタンをクリックすると、選択したすべてのものを含むカスタマイズされたzipファイ

リンクの基本的な概要: 次に、テキストエディタでダウンロードしたzipからindex.htmlを開きます。 テーマ、jQuery、およびjQuery UIを参照していることがわかります。 一般的に、jQuery UIウィジェットと相互作用を使用するには、これらの3つのファイルを任意のページに含める必要があります:/div>

必要なファイルを含めたら、いくつかのjQueryウィジェットをページに追加できます。 たとえば、datepickerウィジェットを作成するには、ページにテキスト入力要素を追加し、その上で.datepicker()を呼び出します。 このように：

HTML:

1	<input type="text" name="date">

JavaScript:

1	$( "#date" ).datepicker();

link That’s It!

For demos of all of the jQuery UI widgets and interactions, check out the demos section of the jQuery UI website.

あなたのニーズにjQueryのUIをカスタマイズリンク

jQueryのUIは、いくつかの方法でそれをカスタマイズすることができます。 ダウンロードビルダーでは、必要な部分だけを含めるようにjQuery UIのコピーをカスタマイズする方法を既に見てきましたが、そのコードを実装に合わせてカス

リンクjQuery UIの基本：オプションを使用して

jQuery UIの各プラグインは、最も基本的で一般的なユースケースに仕出し料理されているデフォルトの構 しかし、プラグインをデフォルト設定とは異なる動作にしたい場合は、”options”を使用してデフォルト設定のそれぞれを上書きできます。 オプションは、jQuery UIウィジェットに引数として渡される一連のプロパティです。 たとえば、スライダーウィジェットには方向のオプションがあり、スライダーを水平にするか垂直にするかを指定できます。 ページ上のスライダーにこのオプションを設定するには、次のように引数として渡すだけです:

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

You can pass as many different options as you’d like by following each one with a comma (except the last one):

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

ちょうど中括弧であなたのオプションを囲むことを忘れないでください{ }、あなたはあなたの方法 もちろん、上記の例では、jQuery UIで何ができるかについてはほとんど触れていません。 JQuery UIウィジェットのセット全体の詳細情報を取得するには、jQuery UIのドキュメントを参照してください。

リンク視覚的なカスタマイズ: 独自のテーマを設計したい場合は、jQuery UIにはその目的のための非常に滑らかなアプリケーションがあります。 これはThemeRollerと呼ばれ、jQuery UIナビゲーションの”Themes”リンクをクリックするか、単にjQuery UI ThemeRollerに行くことでいつでも取得できます。

themerollerは、jQuery UIウィジェットで使用されるすべての要素を設計するためのカスタムインターフェイスを提供します。 左の列の「レバー」を微調整すると、右側のウィジェットにデザインが反映されます。 ThemeRollerのギャラリータブには、あらかじめ設計されたテーマ（ダウンロードビルダーが提供するものと同じもの）が多数用意されており、そのまま微調整またはダウ

テーマをダウンロードするリンク

ThemeRollerの”テーマをダウンロード”ボタンをクリックすると、ダウンロードビルダーに移動し、カスタムテーマがテーマドロップダウンメニューで自動的に選択されます。 そこからさらにダウンロードパッケージを設定できます。 ダウンロードすると、example.htmlページがカスタムテーマを使用してスタイル設定されていることがわかります。

クイックヒント：あなたのテーマを編集する必要がある場合は、単にCSSファイルを開き、それが”このテーマを表示し、変更するには、訪問”と言う場所を見つ..”そのURLは編集のためにThemeRollerでテーマを開きます。

リンクのサポート：どこで助けを得ることができますか？