JQuery Mobile简介 唐瑶 2013-5-4 Write less, do more.

Slides:



Advertisements
Similar presentations
第 15 章 Mobile PHP 與 Ajax 15-1 Mobile PHP 15-2 Ajax 的基礎 15-2 Ajax 的基礎 15-3 jQuery 的 Ajax 方法 15-3 jQuery 的 Ajax 方法 15-4 應用實例:關鍵字建議清單 15-4 應用實例:關鍵字建議清單.
Advertisements

Web app和html5给前端带来的变化 —— 我们的html5游戏平台之旅.
《计算机网络技术》 动态网页制作技术 常用HTML控件课程积件 杨 姝.
地圖研究
第5章 HTML 標籤介紹.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
正确的移动适配 飞鹰正义 百度站长平台 飞鹰正义微信 百度站长社区超级版主
20 使用Dreamweaver构建HTML结构
網路程式設計-期末專案 資工二B B975701 2 8 黃首翰 ~Rock your life~
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
5 工具列與ListView清單 5-1 巡覽工具列 5-2 標準工具列 5-3 基本ListView清單 5-4 進階ListView清單.
第五单元课1-3 层叠样式表.
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
14 JavaScript语言基础 JavaScript是一种轻量级、解释型的Web开发语言。所谓轻量级,就是语言的体系结构不是很庞杂,例如,没有C、Java等语言中的类、内存管理、系统管理等高深的知识范畴;所谓解释型,就是语言在浏览器或服务器等环境中直接被解释执行,不需要对源代码进行编译操作。
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
RWD網頁設計實務 李欣螢 以誠研發有限公司.
网页编程基础 曾宪文,Rex Zeng 纸飞机网络技术部部长 Leader of ACE.
HTML.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
武汉纺织大学传媒学院 cm.wtu.edu.cn
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
Google 自訂搜尋 淡江大學資訊中心 專案發展組 朱家璁 2009/10/6.
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
Ch01 HTML 5 資料格式 網頁程式設計.
JQuery Mobile简介 唐瑶 Write less, do more.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
利用PHP將資料存入MySQL PHP 5 Tutorial 範例:
JQuery Mobile 建國科技大學資管系 饒瑞佶 2012/11 V1 2013/3 V2 2103/4 v3.
HTML 钟晖云 QQ:
Ch.13 HTML網頁實作.
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
作者:different(D姐),前端工程师 博客: 新浪微博:inline_block
Web前端开发技术与实践 第3章:初识HTML5 阮晓龙 /
HTML5简介 WEB前端三剑客之一.
JavaScript 靜宜大學 資管系 楊子青.
PHP 程式流程控制結構.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
网 站 设 计 与 建 设 Website design and developments
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
网站设计 前端 选择器(复习),表单.
CSS技术 蒋玉华.
/ 第7讲:移动开发 冯顺磊 /
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
UI 软件 设计 页面布局(二).
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
HTML 103 互動式網頁.
2.2 Web界面设计 信息工程系 向模军 Tel: QQ:
计算机网络与网页制作 Chapter 11:用CSS作页面布局
第13章 CSS 通过CSS可以使用更丰富、更灵活的样式,更简单地 设计出更美观的网页。同时,也让网页的设计与维护 更有效率。CSS在网页设计中的作用尤为重要,是网 页设计师必备的知识。本章首先介绍什么是CSS、CSS 的基本语法等基础知识,接着学习利用“CSS”面板 管理规则,如何在Dreamweaver中创建与应用CSS样式.
第一個cordova project Cordova project建立與平台設定,均藉由cli(command line interface來完成 建立project請打開命令提示字元視窗應輸入下列命令 cordova create hello tw.edu.stust.mis.hello HelloWorld.
JQuery基礎與動畫、特效 靜宜大學 資管系 楊子青.
JQuery基礎與動畫、特效 靜宜大學 資管系 楊子青 網路參考資源:
Ch09 在網頁之間傳遞資訊 網頁程式設計.
武汉纺织大学传媒学院 cm.wtu.edu.cn
主讲:陶建平 华中科技大学网络与计算中心
个人网站作业3 传媒学院.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
《网页设计与制作》.
HTML 103 互動式網頁 助教:黃毓瑩.
利用PHP將資料存入MySQL PHP 5 Tutorial 範例:
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
Unity回傳統計資訊程式說明: 填寫回傳資訊網址(theUrl)。
JQuery 標籤操作 建國科技大學 資管系 饒瑞佶 2013/4 V1.
PHP程式設計 五、程式流程控制結構 建國科技大學 資訊管理學系 饒瑞佶.
CSS基礎 靜宜大學 資管系 楊子青.
活動頁製作規範 數位支付部/數位通路科.
JavaScript 教师:魏小迪
表单页面 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面,用户利用表单可以输入信息或选择选项等,然后将这些信息提交给服务器进行处理。通过表单,既可以将浏览器的信息发送到Internet服务器上,同时表单也可以使用户与站点的浏览者交互或从浏览者那里收集信息。它是网页的设计者和使用者相互交流的工具。表单对象包括文本域(单行、多行、密码)、列表、菜单、复选框、单选框、按钮等。
Presentation transcript:

jQuery Mobile简介 唐瑶 2013-5-4 Write less, do more

jQuery Mobile 简介 快速入门 &组件 页面与对话框 工具栏 布局 表单 实例 &lcell 列表 按钮

简介 jQuery Mobile构建于jQuery,是一个前端开发框架 兼容手机、平板、桌面 通用访问,支持主流移动平台 根据体验的精确细度分为三级评价支持系统 轻量级(js 141k, css 92k) 模块化的结构 易用性 …… A级——具有基于ajax动态渐变效果的高级体验 B——不支持ajax特效的高级体验 C——只支持HTML的基本体验,但功能仍能够实现

快速入门 <!—HTML5文档声明--> <!—与设备同宽--> <!DOCTYPE html>  <html>   <head>    <title>My Page</title>    <meta name=“viewport” content=“width=device-width, initial-scale=1”>    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>   <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head>  <body>  <div data-role="page">  <div data-role="header">   <h1>My Title</h1>  </div><!-- /header -->    <div data-role="content">    <p>Hello world</p>   </div><!-- /content -->  </div><!-- /page --> </body> </html> <!—HTML5文档声明--> <!—与设备同宽-->

快速入门 文档声明 引用js和css文件 宽度设定 data-role=“page”,page容器中任何的html标签都可用,但是典型的JQM页面中,直接子结点为“header””content”和“footer” 但是JQM是灵活的框架,page、header、content和footer都是可选的元素

快速入门  <div data-role="content">    <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">余胜泉</a></li> <li><a href="#">陈敏</a></li> <li><a href="#">丁国柱</a></li> <li><a href="#">宋杰</a></li> <li><a href="#">胡智杰</a></li> </ul>  </div><!-- /content -->

组件——页面和对话框 页面结构 页面转场 对话框 页面脚本 页面初始化时调用: 改变活动的页面 加载页面 滚屏 $( document ).delegate( "pagecreate", "#aboutPage", function() { alert(‘Welcome to 510'); }); 改变活动的页面 $.mobile.changePage( "about/us.html", { transition: "slideup"} ); 加载页面 $.mobile.loadPage( "about/us.html" ); 滚屏 $.mobile.silentScroll(300); 页面结构 页面转场 对话框 页面脚本 <a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

头部栏 组件——工具栏 头部栏 尾部栏 导航栏 尾部栏 导航栏

组件——工具栏 头部栏 <div data-role="header" data-position="inline"> <h1>我创建的学习元</h1> <a href="/mobile/index.jsp" data-role="button" data-icon="home" class="ui-btn-right" >首页</a> </div><!-- /header --> 尾部栏 <div data-role="footer" data-position="fixed"> <h4>© 学习元2013</h4> </div><!-- /foot --> 导航栏 <div data-role="footer" data-position="fixed" > <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">我创建的</a></li> <li><a href="/mobile/ko/myFavKoList.jsp" target="_self">我收藏的</a></li> <li><a href="/mobile/ko/allKoList.jsp" target="_self" >所有LCell</a></li> </ul> </div>

组件——按钮 左箭头data-icon="arrow-l" 右箭头data-icon="arrow-r" 上箭头data-icon="arrow-u" 下箭头data-icon="arrow-d" 删除 data-icon="delete" 添加 data-icon="Plus" 减少 data-icon="minus“ 检查data-icon="Check" 齿轮 data-icon="gear" 前进 data-icon="Forward" 后退 data-icon="Back" 网格 data-icon="Grid" 五角?data-icon="Star" 警告 data-icon="Alert" 信息 data-icon="info" 首页 data-icon="home" 搜索 data-icon="Search"

组件——内容的格式化 分栏布局 网格布局 可折叠的区块 两栏布局 <div class="ui-grid-a">   <div class="ui-block-a"> Block A</div>   <div class="ui-block-b"> Block B</div> </div><!-- /grid-a --> 分栏布局 网格布局 可折叠的区块 三栏布局 <div class="ui-grid-b">   <div class="ui-block-a">Block A</div>   <div class="ui-block-b">Block B</div>   <div class="ui-block-c">Block C</div> </div> 网格布局 给每行的第一个容器设置为class=ui-block-a来清除浮动 Eg. 9个子容器的class应为:class=ui-block-(a,b,c,a,b,c,a,b,c)重复

组件——表单元素 输入框 滑动条 开关 单选、复选按钮 列表选择菜单 迷你表单 所有的表单元素都接受 data-mini="true" 的属性

组件——表单元素 <form action="" method="post" id="loginForm"> <div data-role="fieldcontain"> <label for="username">真实姓名:</label> <input type="text" name="username" onkeyup="check(this.value)" id="username" placeholder="请输入真实姓名" autofocus required><br> </div> <div data-role="controlgroup" data-type="horizontal"> <legend >性别:</legend> <input type="radio" name="gender" id="male" value="男" > <label for="male" data-theme="b">男</label> <input type="radio" name="gender" id="female" value="女"> <label for="female" data-theme="b">女</label> …… <input type="button" id="submit" data-theme="b" data-inline="true" value="提交"> </form>

组件——列表 基本列表 嵌套列表 编号列表 只读列表 拆分按钮列表 列表分隔 搜索过滤器 气泡计数 缩略图和图标 $('#mylist').listview('refresh');

资料 Jquery Mobile 原版文档与示例 http://jquerymobile.com/demos/1.2.1/ Jquery Mobile 中文API站 http://www.jqmapi.com/ 一些JQM 的案例展示 http://www.jqmgallery.com/ jQuery Mobile中文社区 http://www.jqmobile.org/ 书籍: 《jQuery mobile 快速入门》

谢谢! 关机 重新启动