jQuery Mobile 学习笔记(一)

原创 2015年11月19日 22:00:30
慕课网视频教程地址:
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显示加载提示,并自动消失

$.mobile.loading( "show", { text: "亲,出现错误了", textVisible: true, theme:...
  • zhengxiaojunkite
  • zhengxiaojunkite
  • 2015年11月12日 17:36
  • 1324

推荐30个jQuery Mobile插件和教程

本文涉及的 jQuery Mobile 教程包括以下 5 大方面的内容: 1. jQuery Mobile Swipe 2. jQuery Mobile Gallery(移动相册) 3....
  • albert528108
  • albert528108
  • 2014年09月04日 23:16
  • 3305

jQuery Mobile 所有data-*选项,开发全解+完美注释

jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项jQuery Mobile 所有data-*选项:data-ro...
  • luanpeng825485697
  • luanpeng825485697
  • 2017年08月05日 15:39
  • 2031

基于jQuery Mobile的图表应用JQMCharts

JQMCharts是一款基于jQuery Mobile的移动图表应用,同时也是jQuery Mobile的一个扩展。和MPAndroidChart类似,JQMCharts也支持3种图表类型,柱形图、饼...
  • sqzhao
  • sqzhao
  • 2015年01月05日 14:08
  • 1034

jquery mobile用代码弹出dialog

一、点击弹出dialog 见 http://www.w3school.com.cn/jquerymobile/jquerymobile_pages.asp 中“将页面作为dialog”这节 ...
  • zengmingen
  • zengmingen
  • 2015年12月01日 12:04
  • 3279

Jquery mobile 使用之基础篇

首先声明:jquery mobile 版本不同,代码差距比较大,建议使用最新版本---1.4.5; 官网主页:http://jquerymobile.com/ 注:复制官网上的代码时,需要注意空格删除...
  • yinjingjing00
  • yinjingjing00
  • 2015年04月24日 15:25
  • 1075

Jquery Mobile的表单提交方式

因为之前没用过Jquery Mobile,因此被一个问题难住了,原因是表单提交后的页面样式不对,我一看发现居然继承了上个页面的css样式,查了半天也没查出个所以然,于是乎改了另外一种方式提交,用js的...
  • f756707471
  • f756707471
  • 2013年09月02日 18:37
  • 1031

jQuery Mobile 导航栏和布局

导航栏 1.使用data-role=”navbar”属性来定义导航栏,导航栏最多放置5个按钮,否则会换行。 ...
  • Sabrina_TSM
  • Sabrina_TSM
  • 2016年05月11日 11:43
  • 1320

jquery mobile两个页面以及源码(登录与注册)

注册: 登录核心代码: 01 script type="text/javascript"> 02 ...
  • liangyixin19800304
  • liangyixin19800304
  • 2014年03月15日 17:16
  • 1019

使用jQuery Mobile框架开发移动端Web App的入门教程

jQuery Mobile是移动端的基于jQuery的Web前端开发框架,移动设备上的浏览器对HTML5的支持普遍较强,因而jQuery Mobile的UI设计主要针对HTML5,下面就来详细看一下使...
  • slqgenius
  • slqgenius
  • 2016年12月06日 12:47
  • 1994
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery Mobile 学习笔记(一)
举报原因:
原因补充:

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