jQuery Mobile 学习笔记(一)

原创 2015年11月19日 22:00:30
慕课网视频教程地址:
http://www.imooc.com/video/4230
jQuery版本需要1.8以上版本的支持
html5没有必要加type="text/javascript"
基本的页面框架
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>  </title>
  <meta name="viewport" content="width=device-width , initial-scale=1">
  <link rel="stylesheet" href="css/jquery.mobile-1.4.3.css"/>
</head>
<body> 

here is the jQM code

<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.mobile-1.4.23.js"></script>

here is the js code

</body>
</html>

HTML5 data-*属性用于通过jQuery Mobile为移动设备创建交互外观

<div data-role="page">
  <div data-role="header">
     <h1>  <h1>
  </div>
  <div role="mian" class="ui-content">
     <p>  <p>
  </div>
  <div data-role="footer">
      <h1>   <h1>
   </div>
</div>


HERE IS THE JQM CODE

<div data-role="page">
    <div data-role="header">
         <h1>  </h1>
    </div>
    <div data-role="main" class="ui-content">
         <p>我是页面</p>
    </div>
    <div data-role="footer">
         <h1>   </h1>
    </div>
</div>


在jQuery Mobile中,可以在单一HTML文件中创建多个页面
需要通过唯一的id来分隔每张页面,并使用href属性来连接彼此
 

<div data-role="page" id="index">
    <div data-role="header">
         <h1>  </h1>
    </div>
    <div data-role="main" class="ui-content">
         <p>我是页面1</p>
         <p><a href="#index2">index2</a></p>
    </div>
    <div data-role="footer">
         <h1>   </h1>
    </div>
</div>

<div data-role="page" id="index2">
    <div data-role="header">
         <h1>  </h1>
    </div>
    <div data-role="main" class="ui-content">
         <p>我是页面2</p>
          <p><a href="#index">index</a></p>
    </div>
    <div data-role="footer">
         <h1>   </h1>
    </div>
</div>


jQuery Mobile
拥有一系列如何从一页过渡到下一页的效果,过渡效果可以应用于任意链接

data-transition="slide"

<p><a href="#index2" data-transition="slide"> index2 </a> </p>

data-transition的属性值
slide:         默认值,从右到左滑动的页面效果
slideup:     向上滑动的动画效果
slidedown: 向下滑动的动画效果
pop:             以弹出的效果打开页面
fade:            渐变褪色的动画效果
flip:              旧页飞出,新页飞入的动画效果

jQuery Mobile拥有很多的页面事件


Page Initialization
页面创建前pagebeforecreate ,
页面创建时 pagecreate ,
页面初始化之后pageinit

<script>
  $(document).on("pagebeforecreate",function(){
       alert("pagebeforecreate");
});
$(document).on("pagecreate",function(){
       alert("pagecreate");
});
$(document).on("pageinit",function(){
       alert("pageinit");
});
</script>



Page Load/Unload-当外部页面加载时,卸载时或遭遇失败时(pagebeforeload  , 加载成功,并已经加入到dom中pageload)

Page Transition 在页面过度之前和之后(在过渡动画之前pagebeforeshow   ,  在过渡动画完成之后pageshow .  过渡页面开始前pagebeforehide   .  过渡动画完成后 pagehide)

$(document).on("pagebeforehide","#index",function(){
       alert("pagebeforecreate");
});
$(document).on("pagehide","#index",function(){
       alert("pagehide");
});
$(document).on("pagebeforeshow","#index2",function(){
       alert("pagebeforeshow");
});
$(document).on("pageshow","#index2",function(){
       alert("pageshow");
});


区别一下pageinit和pageshow
pageinit是只在初始化的时候一次
pageshow是每次进入页面都执行


jQuery Mobile按钮
通过给a  button 或者 input元素添加样式(或者增加data-role="button"),可以创建按钮
<a class="ui-btn">我是按钮</a>
<input type="submit" value="我也是按钮"> 
这两种比较,前一种样式不丰富,通过这些可以设置样式
 ui-corner-all 圆角
 ui-shadow    阴影
 ui-btn-inline 并排显示
 ui-btn-a       皮肤
 ui-btn-b       皮肤

例子:
    <a class="ui-btn">按钮1</a>
    <a class="ui-btn">按钮2</a>
   并排显示:  
    <a class="ui-btn  ui-btn-inline">按钮1</a>
    <a class="ui-btn  ui-btn-inline">按钮2</a>
   两种样式:    
    <a class="ui-btn  ui-btn-a">按钮1</a>
    <a class="ui-btn  ui-btn-b">按钮2</a>
   添加圆角和阴影:    
    <a class="ui-btn  ui-btn-a ui-corner-all ui-shadow">按钮1</a>
    <a class="ui-btn  ui-btn-b ui-corner-all ui-shadow">按钮2</a>

jQuery Mobile 导航栏
  
   导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部
   导航栏中的链接会自动转换为按钮,使用data-role="navbar"属性来定义导航栏
   <div data-role="footer">
        <div data-role="navbar">
           <ul>
              <li><a href="#">导航栏1 </a></li>
              <li><a href="#">导航栏1 </a></li>
              <li><a href="#">导航栏1 </a></li>
           </ul>
   </div>

    如果导航栏一行中超过5个,导航栏就会换行显示。因为移动端的屏幕显示问题,5个就已经很多了。

如何设置固定样式
data-position="fixed"
<div data-role="header" data-position="fixed">
<div data-role="footer"  data-position="fixed">


如何添加图标
有很多内置的图表,参考官方文档和样式,也可以写出自己的icon
在超链接中加入data-icon="camera"
例如:<li><a href="#" data-icon="camera">导航</a></li>

jQueryMobile列表
  jQuery Mobile中的列表视图是标准的HTML列表:
   有序列表<ol>和无序列表<ul>
  如需创建列表,需向<ol>或<ul>元素添加data-role="listview"
  如需使这些项目可以点击,在每个列表项<li>中规定链接,链接显示的就是一个按钮
  <div role="main" class="ui-content">
     <ul data-role="listview">
        <li><a href="#">无序列表项1</a></li>
        <li><a href="#">无序列表项2</a></li>
        <li><a href="#">无序列表项3</a></li>
     </ul>
  </div>

   列表不要贴边显示,要与屏幕边有一定的间距
   data-inset="true"
  <ul data-role="listview"  data-inset="true">

jQuery Mobile 可以实现格式比较复杂的列表:
  class="ui-li-aside"内容显示到侧边的位置
   <li><a href="#">
        <h2>G1次</h2>
        <p> 北京-上海 </p>
        <p>用时:4,48</p>
        <p class="ui-li-aside">09:00:00</p>
   </a></li>


jQuery Mobile查询表单(使用HTML原生表单即可)
    
    <form>
       <label>发车站</label>
      <input type="text">
       <label>到达站</label>
      <input type="text">
       <label>车次</label>
    <form>
     表单自适应 ui-field-contain  480px宽屏幕 窄屏幕之分界线
    
<form>
      <div class="ui-field-contain">
       <label>发车站</label>
      <input type="text">
      </div>
       <label>到达站</label>
      <input type="text">
       <label>车次</label>
    <form>

   表单的id必须唯一

相关文章推荐

jQuery Mobile学习笔记(八)——安装及离线

本章学习创建一个不通过应用商店发布的离线Web应用。使用这种方案,用户可以通过手机浏览器访问Web应用然后将它安装到手机上,下一次可以通过同样的URL或者应用图标来访问这个应用时,应用将不再从服务器端...

《jQuery Mobile即学即用》学习笔记01——框架起步

参考网页: http://www.w3school.com.cn/h.asp 参考书籍: 《 jQuery Mobile即学即用 》 工具:Dreamweaver 优点:   1.使用Dreamwe...

jQuery Mobile 框架相关学习笔记(一)【开发环境篇】!

废话几句:接触web前端也有快1年半了,本职是dot Net 一枚,由于公司发展需要,被迫学习web前端相关,初入计算机也是接触的网页设计制作,觉得做前端给我不是压力很大,本身也是后端开发,在前端js...
  • kvkens
  • kvkens
  • 2013年04月16日 11:19
  • 863

jQuery Mobile基础 学习笔记

1.了解jQuery Mobile 1.认识与下载jQuery Mobile 认识jQuery Mobile 1.jQuery Mobile:     jQuery Mobile是jQuery在手机上...

jquery mobile学习笔记——网格布局

3.4 内容格式化 jQuery Mobile中提供了许多非常有用的工具与组件,如多列的网格布局、折叠形的面板控制等,这些组件可以帮助开发者快速实现正文区域内容的格式化。 3.4.1 网格...
  • FS_sky
  • FS_sky
  • 2014年05月03日 22:45
  • 1363

jQuery Mobile学习笔记(一)——移动平台

jQuery Mobile概览性知识

jQuery Mobile学习笔记(七)——主题与打包

这一章介绍JQM主题和JQM APP的打包:主题JQM允许开发者通过调整主题和CSS来定制整套用户界面。JQM的每一个样式都能用CSS来覆盖。主题是一组配色方案,包括 文字颜色 背景颜色和渐变 字体 ...

jQuery Mobile学习笔记(五)——表单组件

jQueryMobile中表单组件

jquery mobile 学习笔记——入门基础(一)

本人目前在做微信服务平台,
  • FS_sky
  • FS_sky
  • 2014年04月27日 23:14
  • 896

以前学习的jquery mobile的一些笔记

Html5+css+juquery mobile 学习小结 一、开发环境的搭建         1.Java SDK            2.Eclipse            3.And...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery Mobile 学习笔记(一)
举报原因:
原因补充:

(最多只允许输入30个字)