jQueryMobile-インタビューの質問

これは、jQueryコア上に構築され、モバイル、タブレット、およびデスクトップデバイスでアクセス可能なレスポンシブWebサイトまたはアプリケーションの開発に使用されるユーザーインターフェイスフレームワークです。

• モバイル、タブレット、デスクトップデバイスで同じように機能するようにWebアプリケーションを作成します。

• PhoneGap、Whitelightなどの他のフレームワークと互換性があります。

• タッチフレンドリーなフォーム入力とUIウィジェットのセットを提供します。

• すべてのモバイル、タブレット、デスクトッププラットフォームに機能をもたらし、効率的なページの読み込みと幅広いデバイスサポートを追加します。

• これはjQueryCoreに基づいて構築されており、「書き込みを減らし、より多くのことを行う」UIフレームワークです。

• オープンソース、クロスプラットフォーム、クロスブラウザ互換です。

• JavaScriptで記述されており、jQueryとjQueryUIの両方の機能を使用してモバイルフレンドリーサイトを構築します。

• HTML5、CCS3、jQuery、jQueryUIを1つのフレームワークに統合して、最小限のスクリプトでページを作成します。

• これには、アニメーション化されたページ遷移を使用するAjaxナビゲーションシステムが含まれています。

• HTML5、CSS3の機能に関する知識があれば、アプリケーションの学習と開発は簡単です。

• クロスプラットフォームおよびクロスブラウザ互換であるため、デバイスの解像度ごとに異なるコードを記述することを心配する必要はありません。

• Webアプリケーションの開発を容易にするためにJavaScriptとともにHTML5を使用します。

• 同じコードをモバイル画面からデスクトップ画面に自動的にスケーリングできるように構築されています。

• CSSテーマには限られたオプションがあるため、これらのテーマによって構築されたサイトは同じように見えます。

• jQuery Mobileを使用して開発されたアプリケーションは、モバイルでは低速です。

• jQuery mobileを他のモバイルフレームワークと組み合わせると、時間がかかります。

• 完全にカスタマイズされたビジュアルデザインを提供することは困難です。

• Custom Download ：カスタマイズされたバージョンのライブラリをダウンロードします。

• Latest Stable：jQueryMobileライブラリの安定した最新バージョンを入手するため。

以下のCDNファイルを使用できます-

• <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

• <script src = "https://code.jquery.com/jquery-1.11.3.min.js"> </ script>

• <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </ script>

<div data-role = "page" id = "pageone">
    <div data-role = "header">
      <h1>Header</h1>
    </div>

    <div data-role = "main" class = "ui-content">
      //content goes here
    </div>

    <div data-role = "footer">
      <h1>Footer</h1>
    </div>
</div>

ページの上部にヘッダーを作成します。

これは、ページのコンテンツを定義するために使用されます。

ページの下部にフッターを作成します。

これには、ページコンテンツ内のパディングとマージンが含まれます。

data-role = "page"属性を持つ複数のdivを追加することで一緒にロードされる、単一のjQueryモバイルドキュメントに複数のページを含めることができます。

ダイアログを表示するには、任意のページに属性data-dialog = "true"を使用します。

data-transition属性は、スライドダウン、フリップなど、ダイアログにさまざまな遷移を適用するために使用されます。

data-close-btn属性を使用して、ボタンを閉じることができます。

data-rel = "back"属性は、前のダイアログに戻るためにナビゲートするために使用されます。

ヘッダー、フッター、コンテンツなどのコンテナーに属性データテーマを追加することで、テーマをダイアログに含めることができます。

ui-corner-all

アイコンの位置を指定するためのui-iconクラスとui-btn-icon-pos_nameクラスを使用して、ボタンにアイコンを設定できます。

ui-shadow-iconクラスを使用して、ボタンにアイコンシャドウを追加できます。

ui-nodisc-iconクラスを使用すると、アイコンの周りの灰色の円を削除できます。

divタグのui-grid-soloクラスを使用して、単一の列グリッドを作成します。

クラスui-grid-aをdivタグに追加し、クラスui-block-aとui-block-bを持つ2つの子コンテナーを含めて、2列のレイアウトを作成します。

divタグのui-grid-bクラスを使用して、3列のグリッドを作成します。

divタグのui-grid-cクラスを使用して、4列のグリッドを作成します。

divタグのui-grid-dクラスを使用して、5列のグリッドを作成します。

ui-btnクラスを使用して、ページに簡単な基本ボタンを作成します。

data-role = "controlgroup"属性を使用して、ページ内に垂直方向と水平方向にボタンのグループを作成します。

ui-miniクラスを使用してページ内に小さなボタンを作成し、ui-btn-icon-ico_posクラスを使用してボタン内のアイコンの位置を表示できます。

入力フィールドのdata-role = "date"属性を使用して、dd / mm / yy形式で表示します。

折りたたみ可能は、コンテナのdata-role = "collapsible"属性を使用して作成できます。

data-role = "controlgroup"属性を使用して、コントロールグループを表示できます。

data-filter = "true"属性を使用すると、任意の要素の子をフィルタリングできます。

フリップスイッチを使用すると、ブールスタイルの入力のためにスイッチをクリックして、スイッチをオフ/オンまたは真/偽にすることができます。

リストビューは、アイテムのリストを表示するために使用されます。data-role = "listview"属性は、垂直スクロール可能リストにリストを表示するためのコンテナーに含まれています。

Rangesliderウィジェットには、数値範囲を選択できるハンドルのペアが用意されています。

イベントは、ユーザーが特定のページをクリックしたり、要素の上にマウスを置いたりしたときに、ユーザーの操作に応答します。

ユーザーがページのIDを使用して要素をタップしてイベントを指定し、on（）メソッドがイベントハンドラーをアタッチすると起動します。

ユーザーがページのIDを使用してイベントを指定し、on（）メソッドがイベントハンドラーをアタッチすることにより、要素上で30pxを超えて水平方向にドラッグすると発生します。

スクロール開始イベントは、ユーザーがページのスクロールを開始したときに発生し、スクロール停止イベントは、ユーザーがページのIDを使用してイベントを指定し、on（）メソッドがイベントハンドラーをアタッチしてページのスクロールを停止したときに発生します。

ユーザーが使用して垂直方向または水平方向にデバイスを回転させるときは、オリエンテーションイベントをトリガすることができますorientationchangeのイベントを。window.orientationプロパティを使用して、ウィンドウまたはデバイスを垂直方向に設定するか水平方向に設定するかを指定します。

data-popup-enabled = "true"属性を使用して、スライダーの値をツールチップとして表示できます。

列の切り替えにより、列が非表示になり、ユーザーはdata-mode = "columntoggle"属性を使用して選択に応じて列を選択できます。

これは、data-mode = "reflow"属性を使用してテーブルをスタック表現に折りたたむことにより、水平形式でデータを表します。

table-stripeクラスとtable-strokeクラスを使用して、データセットをストライプとストロークの形式で表示できます。

入力フィールドにdata-enhanced = "true"属性を設定することにより、テキスト入力の品質と機能を向上させることができます。

ui-alt-iconクラスを使用して、アイコンの色を黒に変更できます。デフォルトでは、すべてのアイコンは白です。

2010年にjQueryプロジェクトチームによって開発され、JavaScriptで記述されました。

これは、ページをajaxを介してロードする必要があるかどうかを示します。