版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
【移動應用開發(fā)技術】如何使用jquery_mobile來實現(xiàn)一個點電影播放網站
本文將為大家詳細介紹“如何使用jquery_mobile來實現(xiàn)一個點電影播放網站”,內容步驟清晰詳細,細節(jié)處理妥當,而在下每天都會更新不同的知識點,希望這篇“如何使用jquery_mobile來實現(xiàn)一個點電影播放網站”能夠給你意想不到的收獲,請大家跟著在下的思路慢慢深入,具體內容如下,一起去收獲新知識吧。jquery是一個簡潔而快速的JavaScript庫,它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫,以便快速開發(fā)網站。如何使用jquery_mobile來實現(xiàn)一個點電影播放網站jquery_mobile(簡稱JQM)其實就是基于jquery開發(fā)出來的一套移動端框架,適應移動用戶端市場對瀏覽與體驗從而進一步的提升jquery_mobile控件介紹jquery_mobile的語法將各個控件(widget)以data-role的形式定義好樣式,使用時直接引用,則可調用適合手機頁面顯示的樣式。juqery_mobile的常用控件如下所示:我們廢話不多說,開始寫第一個jquery_mobile的模版程序,改名為jqm1.html,代碼如下所示:<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<!--寬高禁縮放
-->
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<!--類webapp-->
<meta
name="apple-mobile-web-app-capable"
content="yes">
<!--狀態(tài)條
-->
<meta
name="apple-mobile-web-app-status-bar-style"
content="black">
<!--電話號碼不是鏈接
-->
<meta
name="format-detection"
content="telephone=no">
<title>jQuery
Mobile
Web
應用程序</title>
<link
href="/mobile/1.0/jquery.mobile-1.0.min.css"
rel="stylesheet"
type="text/css"/>
<script
src="/jquery-1.6.4.min.js"
type="text/javascript"></script>
<script
src="/mobile/1.0/jquery.mobile-1.0.min.js"
type="text/javascript"></script>
</head>
<body>
<div
data-role="page"
id="page1">
<div
data-role="header">
<h2>header</h2>
</div>
<div
data-role="content">
<ul
data-role="listview">
<li><a
href="#page1">第一頁</a></li>
<li><a
href="#page2">第二頁</a></li>
<li><a
href="#page3">第三頁</a></li>
<li><a
href="#page4">第四頁</a></li>
<li><a
href="#page5">第五頁</a></li>
</ul>
</div>
<div
data-role="footer">
<h2>頁面腳注</h2>
</div>
</div>
<div
data-role="page"
id="page2">
<div
data-role="header">
<h2>header2</h2>
</div>
<div
data-role="content">
<img
width="200px"
src="/images/adminlogo.gif"
/>
</div>
<div
data-role="footer">
<h2>頁面腳注</h2>
</div>
</div>
<div
data-role="page"
id="page3">
<div
data-role="header">
<h2>header3</h2>
</div>
<div
data-role="content">
內容3
</div>
<div
data-role="footer">
<h2>footer3</h2>
</div>
</div>
<div
data-role="page"
id="page4">
<div
data-role="header">
<h2>header4</h2>
</div>
<div
data-role="content">
<b>內容4</b>
</div>
<div
data-role="footer">
<h2>footer4
</h2>
</div>
</div>
<div
data-role="page"
id="page5">
<div
data-role="header">
<h2>header5</h2>
</div>
<div
data-role="content">
<h2>內容5</h2>
</div>
<div
data-role="footer">
<h2>footer5</h2>
</div>
</div>
</body>
<html><!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<!--寬高禁縮放
-->
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<!--類webapp-->
<meta
name="apple-mobile-web-app-capable"
content="yes">
<!--狀態(tài)條
-->
<meta
name="apple-mobile-web-app-status-bar-style"
content="black">
<!--電話號碼不是鏈接
-->
<meta
name="format-detection"
content="telephone=no">
<title>jQuery
Mobile
Web
應用程序</title>
<link
href="/mobile/1.0/jquery.mobile-1.0.min.css"
rel="stylesheet"
type="text/css"/>
<script
src="/jquery-1.6.4.min.js"
type="text/javascript"></script>
<script
src="/mobile/1.0/jquery.mobile-1.0.min.js"
type="text/javascript"></script>
</head>
<body>
<div
data-role="page"
id="page1">
<div
data-role="header">
<h2>header</h2>
</div>
<div
data-role="content">
<ul
data-role="listview">
<li><a
href="#page1">第一頁</a></li>
<li><a
href="#page2">第二頁</a></li>
<li><a
href="#page3">第三頁</a></li>
<li><a
href="#page4">第四頁</a></li>
<li><a
href="#page5">第五頁</a></li>
</ul>
</div>
<div
data-role="footer">
<h2>頁面腳注</h2>
</div>
</div>
<div
data-role="page"
id="page2">
<div
data-role="header">
<h2>header2</h2>
</div>
<div
data-role="content">
<img
width="200px"
src="/images/adminlogo.gif"
/>
</div>
<div
data-role="footer">
<h2>頁面腳注</h2>
</div>
</div>
<div
data-role="page"
id="page3">
<div
data-role="header">
<h2>header3</h2>
</div>
<div
data-role="content">
內容3
</div>
<div
data-role="footer">
<h2>footer3</h2>
</div>
</div>
<div
data-role="page"
id="page4">
<div
data-role="header">
<h2>header4</h2>
</div>
<div
data-role="content">
<b>內容4</b>
</div>
<div
data-role="footer">
<h2>footer4
</h2>
</div>
</div>
<div
data-role="page"
id="page5">
<div
data-role="header">
<h2>header5</h2>
</div>
<div
data-role="content">
<h2>內容5</h2>
</div>
<div
data-role="footer">
<h2>footer5</h2>
</div>
</div>
</body>
<html>由上面這段代碼我們可以很清楚的了解到了我們的jquery_mobile是可以通過id來控制下面的列表的,有點像ecshop后臺的添加商品那塊,要注意的是紅色邊框里面的代碼,如下圖所示:然后再寫個fs.php的程序,主要讓他向指定用戶推送鏈接的,代碼如下所示:<?php
header('content-type:text/html;charset=utf-8');
require_o
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2026年企業(yè)風險管理試題風險評估與6S結合探討
- 2026年機械工程師認證試題機械設備維修與維護題庫
- 2026年大學計算機專業(yè)期末考試操作系統(tǒng)計算機網絡綜合題
- 2026年教育心理學學生心理輔導方法考試題庫及答案
- 2026年網絡安全工程師技能等級認證筆試指南
- 2026年少兒科普教育項目設計實戰(zhàn)考核
- 2026年企業(yè)管理戰(zhàn)略制定及執(zhí)行力考察經典試題集
- 2026年網絡直播帶貨的消費心理與市場前景認證題集
- 2025 小學二年級道德與法治上冊公共場合不摸他人頭發(fā)課件
- 2026年市場營銷策略考試題目集
- 2026年新能源汽車動力電池回收體系構建行業(yè)報告
- 2026年空天科技衛(wèi)星互聯(lián)網應用報告及未來五至十年全球通信創(chuàng)新報告
- 2026四川成都市錦江區(qū)國有企業(yè)招聘18人筆試備考試題及答案解析
- 2025學年度人教PEP五年級英語上冊期末模擬考試試卷(含答案含聽力原文)
- 2025年上海市普通高中學業(yè)水平等級性考試地理試卷(含答案)
- 腔鏡器械的清洗與管理
- 企業(yè)內部承包責任制管理辦法
- 胰島細胞瘤課件
- 生鮮采購員知識培訓內容課件
- 《TCSUS69-2024智慧水務技術標準》
- 折彎機操作工作業(yè)指導書
評論
0/150
提交評論