ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery UIの使用経験とskill_jqueryについて

jQuery UIの使用経験とskill_jqueryについて

WBOY
リリース: 2016-05-16 17:49:31
オリジナル
1203 人が閲覧しました

1 jQuery UI
2 私にとってはうまくいきます
2.1 タブ
2.2 アコーディオン
2.2.1 基本的なアコーディオンの使用
2.2.2 複数のタブを開く
2.2.3 アコーディオン埋め込みセット
3 プラグインにテーマを適用する——テーマローラー
3.1 カラースキームを変更する
3.2 アイコンを変更する
4 関連リンク

jQuery UI

グラデーション アニメーション効果を実現するためだけに、JavaScript を学び直して大量のコードを記述する必要がある場合があります。 jQuery が登場するまで、開発者は多くの退屈な js コードから解放され、数行の jQuery コードに置き換えていました。現在、jQuery は間違いなく最も人気のある JavaScript ライブラリの 1 つになっています。
jQuery UI は、jQuery に基づいて開発されたインターフェイス ツールのセットであり、Web ページ上で考えて使用できるほとんどすべてのプラグインとアニメーション特殊効果が含まれており、センスのないプログラマでも使いやすくなっています。芸術の知識があり、コーディングの方法だけを知っていれば、素晴らしいインターフェイスを作成するのにほとんど労力がかかりません。もう 1 つのポイントは、これが無料でオープンソースであり、ユーザーがニーズに応じてカスタマイズしたり、再設計したりできることです。

私にとっては 2 つが効果的です
Tabs プラグインと Accordion プラグインを使用して、プロジェクトで jQuery UI を使用する方法を見てみましょう。他のプラグインの詳しい使用方法のドキュメントとデモはここで学ぶことができますが、それらは英語のみです。
2.1タブ
タブの形式のプラグインは、Web ページやデスクトップ アプリケーションで広く使用されており、コンテンツの一部のメニューまたはタブとして使用できます。

まず、VS2010 で新しい MVC プロジェクトを作成します。jQuery UI を使用するには、まずプロジェクトに jQuery および jQuery UI スクリプト ファイルを含める必要があります。また、関連するページを <script> で参照する必要があります。タグ。 MVC プロジェクトを作成すると、Scripts フォルダーに、システムによって jQuery および jQuery UI スクリプト ファイルが自動的にプロジェクトに組み込まれます (図 1)。 </p> <br><p style="TEXT-ALIGN: center"><img alt="" src="http://files.jb51.net/file_images/article/201210/2012101001451912.jpg">図 1 </p> 注: 図の jquery-1.5.1-vsdoc.js は、VS でコードを記述するときに、プロンプト情報とコメントがインテリジェントに表示されるバージョンです。 ; jquery-1.5.1.js は標準バージョンで、min が付いているものは、クライアントでのダウンロード時間を短縮するために圧縮された合理化されたバージョンです。一般的なページでは簡易バージョンを使用します。プロジェクト フォルダーに jquery-1.5.1-vsdoc.js が含まれている限り、VS は内部のプロンプト情報を自動的に呼び出します。 <br> あとはそれをページに含めるだけです。プロジェクトの作成後、システムは既に Site.Mater ページ内のページに対して jQuery を参照しているため、マスター ページを使用するすべてのページがデフォルトで jQuery を参照することになるため、jQuery UI ファイルをインデックスに追加するだけで済みます。ステートメント: <br><br><br><div class="codetitle"><span><a style="max-width:90%" data="11620" class="copybut" id="copybut11620" onclick="doCopy('code11620')"> コードをコピーします <u></u></a> コードは次のとおりです: </span></div><script src= "http://www.cnblogs.com/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript" ></script>


順ページ プラグインでタブをレンダリングするには、Div を定義し、<script> スクリプト コードでそれを選択し、それに tabs メソッドを適用する必要があります。 <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="3334" class="copybut" id="copybut3334" onclick="doCopy('code3334')">コードをコピー<u></u></a> コードは次のとおりです:</span></div> <div class="codebody" id="code3334"><div id="tabs"&gt ; <BR></div> <br><script type="text/javascript"> <br>$(document).ready(function () { <br>$("#tabs") (); <br>}) <br></script>

メインに表示するタブを定義していないため、何も表示されません。 Div、タブを配置する場所を定義しました。ここで、タブ Div に順序なしリストを定義します。リスト項目によって、表示されるタブの数と表示されるタブ名が決まります。

コードをコピー コードは次のとおりです:




タブ 1 の内容


タブ 2


タブ 3


🎜> ここでは、Tabs1、Tabs2、および Tabs3 という名前の 3 つのリスト項目が定義されています。リストの下の 3 つの Div は、上で定義した 3 つのラベルに対応し、各ラベルに表示されるテキストを表示するために使用されます。ページ部分は基本的に完成です。プログラムを実行します:




写真 2

図 0 の効果はこのステップでは表示されず、タブ スタイルは適用されないことに注意してください。理由は 1 つだけあり、それはスタイル シートです。その後、Google で検索したところ、対応するスタイル シートがページに含まれていないことが判明しました。これについては公式のデモでは言及されておらず、ここでのデモでは重要なコード行を省略すべきではないと思います。すべての初心者は、このステップに到達する前に、Google で効果が出ない理由を調べる必要があります。問題が見つかったら、修正するのは簡単です。ページに jQuery UI スタイルシートへの参照を追加します。

写真 3

最終的に完成したコードはおそらく次のようになります。

コードをコピー


コードは次のとおりです:

< ;ul>
  • Tabs1
  • タブ 2
  • タブ 3


  • タブ 1


    タブ 2 の内容




    内容タブ 3 の



    プロジェクトは MVC テンプレートを使用して生成されているため、jQuery UI CSS スタイル シートは Content/themes/base フォルダーに配置されています。そうでない場合は、別途ダウンロードしてプロジェクトに配置し、追加する必要があります。ページへ 正しく引用してください。

    ここでページを再度更新すると、効果が表示されます。

    写真 4

    スタイルシートで制御されているので、色を変えたり、自由にカスタマイズできるということです。これは後ほどアプリケーションスタイルで紹介します。

    2.2アコーディオン

    アコーディオン コントロールについては言うべきことがあります。なぜなら、物事が十分な柔軟性を持たず、拡張が困難であると、ユーザーに多大な不便をもたらすからです。

    写真 5

    2.2.1 基本的なアコーディオンの使用

    まず、Accordion プラグインを適用する方法を見てみましょう。 Tabs1 ページに置きます。タブと同様、適用するのは非常に簡単です。対応する Div を定義するだけで済みます。その後、スクリプト内で行う必要がある作業は 1 文だけです。 jQuery UIがもたらす利便性を体験したことがありますか?

    前の tabs-1 Div の

    タグとコンテンツを削除し、次のコードに置き換えます。

    コードをコピー コードは次のとおりです:




    セクション 1



    セクション 1



    /a>



    a href= "#">セクション 3


    セクション 3

    🎜>




    スクリプトコード内でそれを選択し、それにアコーディオンメソッドを適用します。



    コードをコピー

    写真 6

    注意点が2点あります。 1 つ目はスタイルです。すべての jQuery UI は実際に上記のスタイル シートを使用します。これまでにページ内で参照されていない場合、ここでのアコーディオン効果は表示されません。第 2 に、ここでの形式は、 タグとそれに続く

    タグの形式に従う必要があります。このようなクロス形式が崩れると、望ましくない結果が生じます。たとえば、 の後に 2 つの
    がある場合:

    コード

    をコピーすると、コードは次のようになります。

    セクション 1.1

    1.2



    セクション 2 div>

    セクション 2



    ;





    当初、これら 2 つの div は最初のセクションでラップされると考えていましたが、実際には、実際の効果は少しとんでもないものになります。

    写真 7

    ちょっとズルくないですか?したがって、セクション内にレイアウトする必要がある場合は、2 つ以上の Div を配置する必要があります。次に、間違いがないように、これらのコンテンツを div にインストールしてから、section1 に配置する必要があります。実際に 2 つの Div があることを示すには、各 Div に境界線を追加します。

    コードをコピー コードは次のとおりです:


    セクション 1




    セクション 1.1



    セクション 1.2


    >セクション 2




    セクション 3



    セクション 3






    写真 8

    2.2.2 複数のタブを開く実装

    jQuery UI Accordion の最大の欠点であり、最も迷惑な機能は、同時に開くことができるタブが 1 つだけであることです。たとえば、Section1 をクリックした場合、他のセクションを閉じる必要があります。複数のタブを同時に開きたいが、別のタブをクリックしたために開いているタブが閉じられたくない場合はどうすればよいでしょうか。残念ながら、このプラグインには対応するオプションがありません。さらにすごいのは、複数のタブを同時に開いたままにしておく必要がある場合は、アコーディオンを使用しないでくださいと、公式デモに明記されていることです。とにかく、私たちはそれを作りたいだけです。開かれるタブは 1 つだけサポートされます。

    写真9

    まあ、私にはこの Accordion プラグインを書き換えるほどの力はないので、Google で「expander」「multi open accordion」などと検索してみます。確かに、そのようなニーズを持っている友人はまだ多く、優秀な人々もいます。解決策はいくつかありますが、どれも少し複雑です。最後に、各セクションをアコーディオンとして定義すれば十分であることに突然気づきました。アクションで同時に開くことができるのは 1 つのセクションのみです。他のセクションに影響を与えずに各セクションを自由に開閉したい場合は、各セクションをアコーディオンに置き換え、アコーディオン内に 1 つのセクションのみを定義します。

    以下の以前のコードを変更し、accordion1、accordion2、および accordion3 の ID を持つ 3 つの div を定義し、対応するコンテンツを追加します。

    コードをコピーします。

    コードは次のとおりです。
    🎜>

    セクション 1

    セクション 1

    セクション 2


    コードは次のとおりです:


    プログラムを実行すると、3 つのセクションが同時に開いており、閉じることができないことがわかります。これは明らかに私たちが望んでいる結果ではありません。理由は非常に簡単です。上記のアコーディオン プラグインでセクションが 1 つだけ開かれており、各アコーディオンでセクションを 1 つだけ定義する場合、 の後にセクションが 1 つしかないため、このセクションは間違いなく開く必要があります。これを閉じると他のセクションを開くことができなくなるため、閉じたくても閉じることができません。
    しかし幸いなことに、アコーディオンの折りたたみを true に設定することで、このセクションだけを折りたたみ可能にして開くことができます。次のようにスクリプトを変更するだけです:
    コードをコピーします コードは次のとおりです:

    < ;script type=" text/javascript">
    $(document).ready(function () {
    $("#tabs").tabs();
    $("#accordion1") .accordion({ 折りたたみ可能 : true });
    $("#accordion2").accordion({ 折りたたみ可能: true });
    $("#accordion3").accordion({ 折りたたみ可能: true });
    })


    プログラムを再度実行します。わかりました。すべて予想どおりです。

    写真 10

    2.2.3 アコーディオンネスト

    もう 1 つの問題は、アコーディオンの入れ子です。私もこの機能を最初に実装しようとしたときにいくつかのトラブルに遭遇しました。

    たとえば、セクション 1 に別のアコーディオンを配置したいとします。これにサブアコーディオンという名前を付けます。注意する必要があるのは、このサブアコーディオンは、Div「セクション 1 のコンテンツ」に配置する必要があることです。他の形式の配置が適切です。再生しても効果は現れません。 タグと

    を Accordion 1 に直接追加すると、Section1 の Accordion1 に埋め込まれた Accordion が正しく解析されると考えている場合、それは間違いです。最終的なコードと効果は次のとおりです。

    コードをコピー コードは次のとおりです:



    セクション 1



    サブアコーション


    サブアコーション






    図 11

    少し不完全なのは、Section1 に表示されるスクロールバーです。次に、高さ属性を設定し、その中のサブアコーションを最初は折りたたまれた状態にします。

    スクリプト コードを次のように変更します:


    コードをコピーしますコードは次のとおりです:

    最後に、完璧な効果を見てみましょう。

    写真19

    ここでは、jQuery UI の使用方法の基本を紹介します。もちろん、jQuery UIにはタブとアコーディオンの2つのプラグインが含まれているだけではなく、他のプラグインやエフェクトの使用方法も同様です。詳細な使用方法や設定方法は、公式ドキュメントやデモに記載されています。

    追記: jQuery はすでに普及しているので、jQuery UI と組み合わせるとプログラマーの負担は大幅に軽減されます。これらの利便性を享受しながら、私たちは jQuery と UI に貢献してくれた同僚に黙って感謝しなければなりません。同時に、jQuery のプラグインと UI ライブラリを充実させ、拡張する役割も果たす必要があります。

    サンプルソースコードのダウンロード:

    http://xiazai.jb51.net/201210/yuanma/jQueryUIExample_jb51.rar
    関連リンク
    jQuery UI 公式 Web サイト

    http://jqueryui.com/ テーマ ローラー

    http://jqueryui.com/themeroller/ jQuery 学習: Zhang Ziqiu の「ゼロから学ぶ jQuery」 「シリーズ:

    http://www.jb51.net/article/24908.htm

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート