A、jQueryのモバイルを導入しました
地元の図書館
<link rel="stylesheet" href="JQM/jquery.mobile-1.4.5.min.css" />
<script src="JQM/jquery-1.11.1.min.js"></script>
<script src="JQM/jquery.mobile-1.4.5.min.js"></script>リモートライブラリー
<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>第二に、内部および外部結合
接続：異なるページの複数ページとして複数の容器、それらの間のジャンプが<A>タグによって達成されるが、対応する追加<A> HREF属性値タグ位に設けられていますこのリンクは、内部リンクとして知られていることを実現
外部結合：ページをリンク、jQueryのモバイル内の別のページへのジャンプではなく、同じページジャンプの異なる領域間をクリックして。
//内连接，page2为当前页面的一个div的id
<a href="#page2">第2页</a>
//外连接，类似与超链接
<a href="B.html" rel="external">详细信息</a>第三に、ジャンプページ遷移効果
内部または外部リンクのリンクかどうか、ちょうどで、ページジャンプ遷移アニメーションをサポートaは、内のタグを追加データ遷移属性セットを
| <a href="" data-transition="slide|pop|slideup|slidedown|fade|flip">する</a> |
|
| 滑り台 |
この値は、左のアニメーションにスライド権利を示すデフォルトの属性であります |
| ポップ |
ポップアップ効果で表現すると、リンクされたページにあります |
| slideUp |
これは、上向きのスライドアニメーションを示し、 |
| slidedown |
これは、下方のスライドアニメーションを示します |
| フェード |
これは、勾配フェードアニメーションを表し、 |
| フリップ |
現在のページの飛び出し、アニメーションに飛んリンクされたページ |
<a href="#page2" data-transition="slideup">第2页</a>第四に、ダイアログボックス、ポップ、パネル
ダイアログが：ボックスを作成し、単にページを指すlink要素を追加DATA- のrel 属性を、およびプロパティ値設定ダイアログ。あなたがチェーンをクリックすると、ページがブラウザでフォームを表示するダイアログボックスが開きます。あなたは、ダイアログボックスを開くには、任意のリンクのダイアログボックスをクリックすると、自動的に閉じて、「ロールバック」フォームに前のページに切り替わります。
<p><a href="#page2" data-rel="dialog">关于我们</a>ポップ：popはページ表示をカバーすることができ、テキスト、画像、地図やその他のコンテンツを表示するために使用することができます。ポップ、<A>と<div>要素を使用する必要性を作成します。要素<A>上のデータのrel =「ポップアップ」プロパティを追加、<div>要素のデータ-役割=「ポップアップ」属性を追加しました。その後、我々はの<div>などのIDを指定して、idで指定さ<A>のhrefの<div>の値を設定します。ポップ表示内容の概要の<div>。注：の<div> <A>ポップとのリンクが同じページ上にある必要があります。
<a href="#page2" data-rel="popup" >关于我们</a>
<div id="page2" data-role="popup" data-dismissible="false" data-position-to="#linktome" data-arrow="l">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
<p> 工作室成立于2014年初，在互动设计和互动营销领域有着独特理解。我们一直专注于互联网整合营销传播服务，以客户品牌形象为重，提供精确的策划方案与视觉设计方案，团队整体有着国际化意识与前瞻思想；以视觉设计创意带动客户品牌提升，洞察互联网发展趋势。<p>
</div>
//你也可以在弹窗上添加关闭按钮，按钮上使用 data-rel="back" 属性，并通过样式来控制按钮的位置。
//默认情况下，弹窗会直接显示在点击元素的上方，如果需要控制弹窗的位置，可以在用于打开弹窗的点击链接上使用 data-position-to 属性。
<div data-role="content">
<a href="#page2" data-rel="popup" data-transition="fade"><img src="images/t1.jpg" width="80px" /></a>
</div>
<div id="page2" data-role="popup" data-position-to="window">
<img src="images/t1.jpg" width="360px" />
</div>パネル：パネルは、画面の左側に右に描画します。指定されたID の<DIV> 添加元素のデータ役割=「パネル」パネルを作成するためのプロパティ。
<div data-role="panel" id="myPanel" data-display="overlay" data-position="right">
<a href="#" class="ui-btn ui-btn-inline">按钮1</a>
<a href="#" class="ui-btn ui-btn-inline">按钮2</a>
<a href="#" class="ui-btn ui-btn-inline">按钮3</a>
<a href="#" class="ui-btn ui-btn-inline">按钮4</a>
<a href="#" class="ui-btn ui-btn-inline">按钮5</a>
</div>
<div data-role="main" class="ui-content">
<p>点击下面按钮打开面板。</p>
<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
</div>
//data-display设置弹窗覆盖原面板第五に、逆の効果を達成するために
最初：自動的にボタンを追加するには、スタイルは調整可能ではありません。
<div data-role="header" data-position="inline" data-add-back-btn="true" data-back-btn-text="返回"></div>第二：ハイパーリンク、調整可能なスタイルとして。
<a href="" data-rel="bakc">返回</a>
第六に、ボタン
カスタムボタン
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="#page1" data-icon="home" class="ui-btn-active">首页</a></li>
<li><a href="#page2" data-icon="grid">我们的作品</a></li>
<li><a href="#page3" data-icon="info">联系我们</a></li>
</ul>
</div>
//class="ui-btn-active"：默认选择中xiang5起動ボタン
<div data-role="header">
<h1>欢迎来到我的主页</h1>
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">首页</a></li>
<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="arrow-r">页面二</a></li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<p>该页面的按钮也会被突出显示，归功于 ui-btn-active 类。</p>
<p>如果返回首页，您会发现页面将保持状态，归功于 ui-state-persist 类。</p>
</div>ボタングループ
容器の周囲にデータ役割属性値controlgroupボタンを追加することにより、ボタンの間隔を低減するために、バー表示ボタン群の端部に形成されています。
容器内にデータ型属性を追加し、このプロパティの値を設定し、水平、水平配列のボタン配置を示す容器です。
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="home">首页</a>
<a href="#" data-role="button" data-icon="grid">我们的作品</a>
<a href="#" data-role="button" data-icon="info">联系我们</a>
</div>
</div>七、ナビゲーションバーのアイコン
<a href="" data-icon="home">首页</a>
ナビゲーションバーの位置を設定します。
デフォルトのアイコンがボタンのテキストの上に配置されてあなただけのナビゲーションバーのコンテナ要素は、デフォルト値のトップにデータiconposプロパティを追加調整する必要がある場合、あなたはまた、右、下、左選択することができます
八、尾のポジショニングのヘッド
| データ位置：インライン|固定|フルスクリーン | |
| 列をなして |
デフォルト。ページコンテンツと頭と尾バーバー付き。
|
| 修繕 |
デフォルト。ページコンテンツと頭と尾バーバー付き。
|
| 全画面表示 |
そして、
固定
位置決めモードは、頭と尾のフィールドは、ページの最上部と底部に固定バー、基本的に同じです。彼は、画面オフ、ツールバーのロールアウトされたときのアプリケーションの画像やビデオクラスのモダンな雰囲気を高めるための画面が、非常に便利ですタップしない限り、しかし、それは自動的に、再び表示されません。それは最高の特別な機会に使用されているので、ツールバーは、このモードでのページの内容をカバーすることに注意してください。
|
頭と尾を持つ多くは、ときに、スクロールバーのスライダをスクロールするスクロールバーを動かすことができれば、データ位置の値は、インラインコンテンツを配置されています。
データ位置の値を使用すると、効果を確認したい場合は、そうスクロールバーが使用可能であること、そして非表示に画面をタップして、ウィンドウのサイズを変更したり、ヘッダー/フッターを表示する必要がある、位置を固定されています。効果はページ上のお住まいの地域によって異なります。
九、グリッドレイアウト
| グリッドクラス | 行 | 列幅 | 対応 |
| グリッド-UI-A | 2 | 50％ | UI-ブロック| B |
| グリッド-UI-B | 3 | 33％ | UI-ブロック - | B | C |
| UI-グリッド-C | 4 | 25％ | UI-ブロック - | B | C | D |
| UI-グリッド-D | 5 | 20％ | UI-ブロック - | B | C | E |
<div class="ui-grid-d">
<div class="ui-block-a">
<div class="ui-bar ui-bar-b" style="height:60px;">第1列</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b" style="height:60px;">第2列</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-b" style="height:60px;">第3列</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-b" style="height:60px;">第4列</div>
</div>
<div class="ui-block-e">
<div class="ui-bar ui-bar-b" style="height:60px;">第5列</div>
</div>
</div>容器は、UI-グリッド、およびそのサブセットスタイルコンテナUI-ブロックCには、三つのサブサブ容器手段コンテナを追加、3番目の列が自動的に下行に配置されるスタイルに設定されている場合：PS
テン、折りたたみ可能なブロック
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>关于我们</h3>
<p> 我们一直专注于互联网整合营销传播服务，以客户品牌形象为重，提供精确的策划方案与视觉设计方案，团队整体有着国际化意识与前瞻思想；以视觉设计创意带动客户品牌提升，洞察互联网发展趋势。建立更好的网络形象与口碑，把客户企业品牌形象做到国际化，并且实现商业价值，是团队成立的本意！</p>
</div>
<div data-role="collapsible">
<h3>我们的团队</h3>
<p> 成员都具有多年的实际设计工作经验，更好的满足客户的国际化需求。设计师由正规美院毕业，创意的思维模式，高超的设计技能，为您提供最适合您的设计方案。</p>
</div>
<div data-role="collapsible">
<h3>我们的承诺</h3>
<p> 本工作室设计与制作的网站均属原创、不套用网上的任何模板，根据每个公司的行点，设计出属于客户.....</p>
</div>
</div>PS：データ役割=「折り畳み式セット」設定、唯一のオープン選択し、別のものを開き、自動的に閉じたまま。
あなたは、ネストされた折りたたみ折りたたみ可能な複数の設けられていてもよいです。
XI応答テーブル
逆流テーブル
<table data-role="table" class="ui-responsive"></table>コラムスイッチ
<table data-role="table" data-mode="columntoggle" class="ui-responsive"></table>
