jquery モバイル ライブラリには次のものが含まれます: 1. Mobiscroll、タッチ スクリーン デバイスでの回転スクロール、日付と時刻の選択に使用されます; 2. 「Ion.Sound」、インスタント サウンド通知に使用されます; 3. mmenu、Create に使用されますスムーズなドロワー ナビゲーション メニュー、4. 応答性の高いナビゲーションの作成に使用される Naver、5. gShake など。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
モバイル インターネットの発展に伴い、PC からの Web ページがモバイル ページのニーズに完全に適応できなくなったため、レスポンシブ デザイン エクスペリエンスが出現し、トレンドになりつつあります。そのような需要が jQuery を推進する理由です。人気のモバイル。 jQuery および jQuery UI をベースとしたフレームワークである jQuery Mobile は、jQuery の「書く量を減らし、より多くの作業を行う」という本質を継承しており、優れた拡張性とカスタマイズ性を備え、さまざまなプラットフォームのデバイスと完全な互換性を備えています。与えられる。
この記事では、日付/時刻の選択、即時サウンド通知、ドロワー ナビゲーション メニュー、iOS スタイル、アコーディオン ナビゲーションに至るまで、幅広いタイプを備えた 15 個の非常に優れた実用的な jQuery Mobile プラグイン (ライブラリ) について詳しく説明します。 , パスワードやライトボックス効果の非表示/表示から、クールなインタラクティブマップ、ページ振動、ネイティブ、フォトアルバム/ギャラリー表示などまで、あなたを魅了するものが常にあります。
1. Mobiscroll
https://mobiscroll.com/
多くの開発者にとって、Mobiscroll は馴染みのないものではなく、次のようにさえ言えます。それはよく知られています。 Mobiscroll は非常に優れた jQuery Mobile プラグインで、主にタッチ スクリーン デバイスでの回転スクロールや日付と時刻の選択に使用されます。これにより、ユーザーは数字をスライドさせるだけで日付と時刻を選択できます (リンクをクリックして Demo を表示します)。
Mobiscroll は、任意のカスタム値をサポートしているため、ユーザーがテーマを完全にカスタマイズできるだけでなく、ドロップダウン リストのローカル選択制御にも使用できます。さらに、使い方も非常に便利で、開発者に非常に高度な配色を提供するだけでなく、CSS ファイルを通じて完全に変更することもできます。 iOS、Android、WP8、Windows 8、BlackBerry などを含む、すべての主流のモバイルおよびデスクトップ ブラウザをサポートします。
2, Ion.Sound
http://ionden.com/a/plugins/ion.sound/en.html
この日現在、Web サイトとモバイル Web サイトの両方に、新しい電子メール、新しいチャット メッセージ、コンテンツの更新など、さまざまなイベントがたくさんあります。しかし、インスタント通知ではすぐにユーザーの注意を引くことができないという問題がよくあります。 Ion.Sound プラグインを使用すると、このタスクを非常にうまく達成できます。
Ion.Sound はイベントサウンドを再生するための jQuery プラグインで、MIT ライセンスを採用しており、25 個の無料サウンドが含まれています。これまで、Ion.Sound は、Google Chrome、Mozilla Firefox、Opera、Safari、IE (9.0) などのデスクトップ ブラウザで正常に使用されており、すべての主要なモバイル ブラウザをサポートしています。
3.jQuery.mmenu
http://mmenu.frebsite.nl/
jQuery.mmenu は、jQuery をスムーズに作成するためのツールです。ドロワー ナビゲーション メニュー用のプラグインでは、JavaScript コードを 1 行記述するだけで、モバイル Web サイト上のモバイル アプリの外観に似た非常にクールなスライド メニューを実装できます。
jQuery.mmenu を通じて、開発者は順序なしリストをメニュー項目に変換し、カスタマイズされた設定を行うことができます。 jQuery.mmenu は、開発者が開く、閉じる、切り替えるなどの一般的なメニューのカスタマイズを提供するだけでなく、メニューの位置 (左/右)、メニュー項目カウンターを表示するかどうか、その他のオプションの設定も提供します。
4、Naver
http://www.benplum.com/formstone/naver/
Naver は、応答を作成するために特別に使用されるツールですスタイルナビゲーション用のjQueryプラグイン。これにより、開発者はモバイル端末に非常に優しいナビゲーション効果を簡単に作成でき、動的なナビゲーションも作成できます。 Naver は Firefox、Chrome、Safari、IE(7) と互換性があり、MIT ライセンスに基づいて公開されており、個人プロジェクトでも商用プロジェクトでも、自由かつ無料で使用できます。
5、iosOverlay.js
http://taiitems.github.io/iOS-Overlay/
iosOverlay.js は jQuery ですIE7、Google Chrome、Firefox、Opera、Safari (デスクトップおよびモバイル バージョン) をサポートする、iOS スタイルのプロンプト/通知効果を作成するためのプラグイン。ロード時にアイコンがちらつくのを防ぎたい場合、開発者は画像リソースをプリロードする必要があることに注意してください。
さらに、iosOverlay.js には、Spin.js と jQuery という 2 つのオプションの依存関係もあります。開発者がそのドロップダウン リスト オブジェクトを使用したい場合は、Spin.js を使用する必要があります。CSS アニメーションと互換性のないブラウザの場合は、サポートを提供するために jQuery が必要です。
6、簡単なレスポンシブ タブ
https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
簡単なレスポンシブTabs は、同じページ上の複数の例をサポートし、クロスプラットフォームの Web、タブレット、モバイル デバイスをサポートする軽量の応答性の高いタブ タブ/アコーディオン ナビゲーション jQuery プラグインです。このプラグインは画面サイズに適応することができ、デフォルトのスタイルは水平/垂直タブですが、ウィンドウが小さくなると自動的にアコーディオンスタイルに切り替わります。
7、パスワードの非表示/表示
https://github.com/cloudfour/hideShowPassword
Hide/show Password プラグインを使用すると、パスワード入力ボックスの内容を簡単に非表示または表示できます。このプラグインの最も優れた点は、「innerToggle」オプションです。オンに設定すると、開発者は非常に美しい非表示/表示コントロールをカスタム作成できます。また、タッチスクリーンブラウザでスワイプしても入力フォーカスが維持されます。
8、Swipebox
http://brutaldesign.github.io/swipebox/
Swipebox は、絶妙な jQuery ライト ボックス特殊効果プラグです。デスクトップ、モバイル、タブレット デバイスで利用できます。モバイルではスワイプ ジェスチャ ナビゲーションがサポートされ、デスクトップではキーボード ナビゲーションが利用できます。 CSS3 トランジション機能をサポートしていないブラウザでも、jQuery のダウングレード処理を使用でき、Retina ディスプレイをサポートし、CSS を通じて簡単にカスタマイズできます。
対象の写真をクリックすると写真がフルサイズで表示され、また同じグループ内の写真を左右に切り替えて表示することもできるので、作品作りに最適です。写真ギャラリーと大きな写真の表示 寸法図。
9、アプリ フォルダー
http://app-folders.com/
iOS のファンなら、iOS のスタイルフォルダはよく知っているはずです。 「フォルダーをクリックして、透明度を深めて周囲の要素をぼかし、フォルダーの内容を表示します。」 App Folders は、まさに iOS フォルダーの効果を実現できる jQuery プラグインです。このプラグインはデスクトップとモバイルの両方のブラウザで動作し、その適応性は非常に優れています。
アプリ フォルダーのフォルダー要素には、画像、テキスト、ビデオなどの HTML 要素を含めることができ、各フォルダーには直接クリックするための独自の URL があります。もちろん、開発者は iOS フォルダーと同じ効果にこだわる必要はなく、アプリ フォルダーを通じて、よりクリエイティブなレイアウトや特殊効果をカスタマイズできます。
10.jQuery Flip
http://amegan.github.io/jquery-flip/
jQuery Flip は、 any HTML、テキスト、または jQuery 要素に非常に美しい Flipboard のような反転効果を生成する jQuery プラグイン。MIT ライセンスの下でリリースされています。 CSS 3D 変換を使用してフリップ速度も設定でき、Firefox 11 はもちろん、Chrome や Safari などの WebKit ブラウザも完全にサポートします。
11、jQuery UI Map
https://code.google.com/p/jquery-ui-map/
地図アプリケーションの場合開発者にとって、jQuery UI Map は間違いなく開発に不可欠なツールです。このような軽量の jQuery プラグインは、Google Map API とは異なり、jQuery UI Map を通じて、開発者はクリックなどの単純なイベントに Google イベント リスナーを使用できるだけでなく、地図やマーカー上で jQuery クリック イベントを使用することもできます。
jQuery UI Map は非常に柔軟であるだけでなく、高度にカスタマイズ可能です。スケジュールされたイベントを地図上に表示するために、jQuery UI Map は Google マップと統合されており、開発者はインタラクティブな地図を簡単に作成できます。 jQuery UI Map の最大の特徴は、クライアントが JavaScript をサポートしていない場合でも、開発者が microformats、RDFa、microdata などの HTML データ形式を使用して、代替サイトで同期を実現できることです。
12、gShake
https://github.com/GerManson/gShake
gShake は振動効果を実現できる jQuery プラグインです. わずか数行のコードで、ナビゲーション、画像、さらにはページ自体を揺らして、ページをダイナミックで楽しいものにすることができます。iOS 4.2 をサポートしています。
13、jQTouch
http://jqtjs.com/
モバイル開発に使用できる多くの jQuery プラグインとの比較この記事で紹介しましたが、明らかに jQTouch の方が有名です。 jQTouch を使用すると、開発者は HTML、CSS、jQuery のみを使用して非常に強力なモバイル アプリを作成できます。さらに素晴らしいのは、開発者はコア CSS ファイルのみを使用して完全にカスタマイズされた UI を構築できることです。
jQTouch は、アニメーション、リスト ナビゲーション、デフォルト スタイルなどの一般的な UI 効果をモバイル デバイスの WebKit ブラウザに実装できます。ただし、よりネイティブな効果を実現したい場合は、CSS ファイルを追加する必要があります。 iOS 開発者にとって、jQTouch は iOS 開発用のネイティブ効果 CSS ファイルの豊富なセットを提供しているため、これについて心配する必要はありません。
14. PhotoSwipe
http://www.photoswipe.com/
PhotoSwipe は、モバイル タッチ スクリーン用に設計されたオープンソースの無料ソフトウェアです。デバイス設計されたフォト アルバム/ギャラリー表示パッケージは、iOS、Android、Blackberry、その他の主流プラットフォームおよびデスクトップ ブラウザーと互換性があります。その基盤となる実装は HTML、CSS、JavaScript に基づいており、フレームワークに依存しないため、モバイル サイトのフォト アルバム エクスペリエンスをネイティブ アプリのエクスペリエンスと同じにしたいデザイナーや開発者に非常に適しています。
PhotoSwipe は、モバイル Web サイトに簡単に統合でき、モバイル ブラウザー用に高度に最適化されたスタンドアロン JavaScript ライブラリです。さらに、ソース コードでは、PhotoSwipe はデスクトップ ブラウザーと jQuery Mobile の使用のサポートも提供します。
15. Touch Gallery
http://neteye.github.io/touch-gallery.html
PhotoSwipe と同様、Touch Gallery も同様です画像表示プラグイン。開発者はこれを使用して、モバイル ブラウザ上のネイティブ フォト アルバム アプリケーションと同様の画像表示効果を実現できます。ジェスチャーブラウジング操作に対応しており、Safari、Firefox、Opera、Chromeなどのデスクトップブラウザでも利用できますが、一部の機能は実装できません。
[推奨される学習: jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ ]
以上がjqueryモバイルライブラリとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
