jQuery モバイル クラシ...ログイン
jQuery モバイル クラシック チュートリアル
著者:php.cn  更新時間:2022-04-11 13:58:34

jQueryモバイルのインストール



jQuery Mobile を Web ページに追加します

次の方法で jQuery Mobile を Web ページに追加できます:

  • CDN から jQuery Mobile をロードする (推奨)

  • jQuerymobile .com から jQuery Mobile ライブラリをダウンロードする


CDNからjQuery Mobileをロードする

lamp CDNの正式名称はContent Delivery Networkで、コンテンツ配信ネットワークのことです。基本的な考え方は、データ伝送速度と安定性に影響を与える可能性のあるインターネット上のボトルネックやリンクを可能な限り回避し、コンテンツ伝送をより速く、より安定させることです。 .

jQuery コアを使用するには、コンピューターに何もインストールする必要はありません。jQuery を使用するには、次のカスケード スタイル (.css) と JavaScript ライブラリ (.js) を Web ページにロードするだけです。モバイル:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="content">
  <p>欢迎!</p>
  </div>

  <div data-role="footer">
  <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

国内ユーザーはBaidu CDNを推奨します:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="content">
  <p>欢迎!</p>
  </div>

  <div data-role="footer">
  <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

インスタンスを実行する»

「」をクリックします。「インスタンスの実行」ボタンをクリックして、オンラインインスタンスを表示します

このチュートリアルで参照されるライブラリは、Baidu CDN リソース ライブラリです。



jQuery Mobile をダウンロード

jQuery Mobile をホストに配置したい場合は、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>

ヒント: ダウンロードしたファイルを Web ページと同じディレクトリに置きます。

lampなぜ type="text/javascript" が <script> タグに挿入されないのか疑問に思っていませんか?

この属性は HTML5 では必要なくなりました。 JavaScript は、最新のすべてのブラウザにおける HTML5 のデフォルトのスクリプト言語です。

PHP中国語ウェブサイト