最新のWeb開発のチュートリアル
 

jQuery Mobile始めます


あなたのWebページへのjQuery Mobileを追加

あなたのウェブサイトへのjQuery Mobileを追加する方法は2つあります。 あなたはできる:

  • CDN(推奨)に保存されたjQueryのモバイル・ライブラリーへのリンク
  • お使いのコンピュータに保存されているjQueryのモバイル・ライブラリーへのリンク

CDNからjQueryのモバイルへのリンク

CDN(コンテンツ配信ネットワーク)は、Web上で頻繁に使用されるファイルを配布するために使用されます。
これは、ユーザにとってはるかに高速ダウンロード速度になります。

jQueryのコアと同じように、お使いのコンピュータにインストールするものはありません。 あなただけの次のスタイルシートが含ま(.css)とJavaScriptライブラリ(.js) jQueryのモバイル作業を取得するために、直接あなたのHTMLページに:

jQueryのモバイルCDN:

<head>

<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
»それを自分で試してみてください

ビューポート<meta>タグ内<head>要素は、ブラウザがページのズームレベルと寸法を制御する方法を指定します。

width=device-width (デバイスによって異なります)デバイスの画面幅に従うようにページの幅を設定します。

initial-scale=1 、ページが最初のブラウザによってロードされる初期のズームレベルを設定します。


お使いのコンピュータに保存されたjQueryのモバイルへのリンク

あなたはjQueryのモバイルライブラリを自分でホストする場合は、最初からそれをダウンロードする必要がありjQuerymobile.com

次に、あなたのページに次のコードを追加します。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>

ヒント:あなたがそれを使用したいページと同じディレクトリにダウンロードしたファイルを配置します。

私たちが持っていないなぜあなたは不思議行うtype="text/javascript"内側<script>タグを?

これは、HTML5で必要とされていません。 JavaScriptは、HTML5およびすべての最新ブラウザのデフォルトのスクリプト言語です!