【移動應用開發(fā)技術】如何使用jquery-mobile來實現(xiàn)一個點電影播放網站_第1頁
【移動應用開發(fā)技術】如何使用jquery-mobile來實現(xiàn)一個點電影播放網站_第2頁
【移動應用開發(fā)技術】如何使用jquery-mobile來實現(xiàn)一個點電影播放網站_第3頁
【移動應用開發(fā)技術】如何使用jquery-mobile來實現(xiàn)一個點電影播放網站_第4頁
【移動應用開發(fā)技術】如何使用jquery-mobile來實現(xiàn)一個點電影播放網站_第5頁
已閱讀5頁,還剩5頁未讀 繼續(xù)免費閱讀

付費下載

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

【移動應用開發(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. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論