同一個頁面多個page之間的切換


今天接觸了JQ Mobile以下是本小白的理解(不怕大家笑話):

創建移動 web 應用程序的框架;適用於所有流行的智能手機和平板電腦; 將“寫得更少、做得更多”這一理念提升到了新的層次:它會自動為網頁設計交互的易用外觀,並在所有移動設計上保持一致。

從官網上可以看出jQuery mobile內容分為四大部分:

jQM的內容分為四大部分:

(1)Page & Navigation

(2)CSS Framework

(3)Widgets(小部件)

(4)Form Widgets

 

以下用到的文件都可在官網下載到:

CSS文件:jquery.mobile.css

jQuery文件:jquery.js

jQuery Mobile文件:jquery.mobile.js

 

這次主要接觸的是頁面和頁面切換效果

jQM中的“Page(頁面)” jqm中的Page指WebApp中的“一屏內容”——一個HTML文件中可以只聲明一個Page(單頁模板),也可以聲明多個Page(多頁模板)——瀏覽器中某個時刻最多只能顯示一個Page!

一個Page的基本結構:

<div/section data-role="page">

<div/header data-role="header"></div/header>

<div/section class="ui-content"></div/section>

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

</div>

在多個Page間跳轉有兩種方式:

(1)超鏈接:  

<a href="#PageID/xx.html"></a>

(2)JS編碼:

<button onclick="$.mobile.changePage('#PageID/xx.html');"></button>

 

 

jQM中常用的data-*屬性:

data-role="page"  

data-role="header"

data-role="content"

data-role="footer"

data-theme="a/b"  用於任何元素,設置當前元素的主題色

data-position="fixed"  用於footer,實現固定在Page的底部

data-title=""  用於Page,指定當前瀏覽器的標題欄內容

data-rel="back"  用於超鏈接,可以返回到當前Page的上一個Page

data-transition="十種可能值"  用於頁面跳轉的超鏈接,指定頁面切換過場動畫

data-role="button"  用於超鏈接,使其呈現塊級按鈕的外觀

data-inline="true"  用於按鈕,聲明為行內按鈕,本質就是添加.ui-btn-inline

data-icon="50種圖標"  可用於為按鈕指定圖標

data-iconpos="left/right/top/bottom/notext"

 

 以下是今天做的案例分享分享:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="jqm/jquery.mobile-1.4.5.js"></script>
</head>
<body>

<div data-role="page" id="p21">
<div data-role="header">
<h1>頭部-p21</h1>
</div>
<div class="ui-content">
<h1>一個HTML頁面包含多個page</h1>
<h2>p21-第一個page</h2>
<a href="#p22">跳轉到第二個page</a>
<button onclick="$.mobile.changePage('#p23')">跳到第三個頁面-p23</button>
</div>
<div data-role="footer">
<h1>尾部</h1>
</div>
</div>

<div data-role="page" id="p22">
<div data-role="header">
<h1>頭部-p22</h1>
</div>
<div class="ui-content">

<h2>p22-第二個page</h2>
<a href="#p23">跳轉到第三個page</a>
</div>
<div data-role="footer">
<h1>尾部</h1>
</div>
</div>

<div data-role="page" id="p23">
<div data-role="header">
<h1>頭部-p23</h1>
</div>
<div class="ui-content">

<h2>p23-第三個page</h2>
<a href="#" data-rel="back">返回上一個頁面</a>
</div>
<div data-role="footer">
<h1>尾部</h1>
</div>
</div>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM