JQueryMobile开发必须的知道的知识

移动Web页面的基本组成元素：

  页面头部，页面内容，页面底部

<!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 -->

    <!-- footer -->
    <div data-role="footer" class="footer" data-theme="b" >
       <img alt="" src="../images/logo.gif" />
    </div>
</div><!-- /page -->

</body>
</html>

 

jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。

jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾。它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使 用。使用该框架可以节省大量的js代码开发时间，尽管目前的版本还是不是一个稳定的版本。但它的应用效果已经备受瞩目。

接下来我们将通过实例向大家展示jQuery Mobile的特性及好处，让我们看一下这个新框架是怎么帮助你在短时间内建立起一个高质量的移动应用程序,接下来的代码讲解中的代码最好使用的移动设备 平台是IPhone或Android。或者是PC电脑上使用 Safari浏览器调试。

Go on!

jQuery Mobile 都能做什么?

◆jQuery Mobile为开发移动应用程序提代了非常简单的用户接口

◆这种接口的配置是标签驱动的，这意味着我们可以在HTML中建立大量的程序接口而不不需要写一行js代码

◆提供了一些自定义的事件用来探测移动和触摸动作。例如tap(敲击)、tap-and-hold(点击并按住)、swipe、orientation change

◆使用一些加强的功能时需要参照一下设备浏览器支持列表

◆使用预设主题可以轻松定制应用程序外观

jQuery Mobile 基本页面结构

大部分jQuery Mobile Web应用程序都要遵循下面的基本模板

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>Page Title</title> 
  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
  8. </head> 
  9. <body> 
  10.   
  11. <div data-role="page"> 
  12.   
  13.   <div data-role="header"> 
  14.     <h1>Page Title</h1> 
  15.   </div> 
  16.   
  17.   <div data-role="content"> 
  18.     <p>Page content goes here.</p>    
  19.   </div> 
  20.   
  21.   <div data-role="footer"> 
  22.     <h4>Page Footer</h4> 
  23.   </div> 
  24. </div> 
  25.   
  26. </body> 
  27. </html> 

要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容

◆ CSS文件jquery.mobile-1.0a1.min.css

◆ jQuery library jquery-1.4.3.min.js

◆ jQuery Mobile library jquery.mobile-1.0a1.min.js

在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。

我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。

说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。

在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。

jQuery Mobile 基本页面结构

多个页面在同一个页面中

有一种建立在一个 HTML页面基础之上的页面结构，即在一个页面中添加多个data-role=”page”。这意味着浏览器仅仅得到一个页面，就可以实现页面平滑切换的客户体验。参看下面实例：(目前有bug)

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>jQuery Mobile: Pages within Pages</title> 
  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
  8. </head> 
  9. <body> 
  10.   
  11. <div data-role="page" id="home"> 
  12.   
  13.   <div data-role="header"> 
  14.     <h1>Home</h1> 
  15.   </div> 
  16.   
  17.   <div data-role="content"> 
  18.     <p><a href="#about">About this app</a></p>    
  19.   </div> 
  20.   
  21. </div> 
  22.   
  23. <div data-role="page" id="about"> 
  24.   
  25.   <div data-role="header"> 
  26.     <h1>About This App</h1> 
  27.   </div> 
  28.   
  29.   <div data-role="content"> 
  30.     <p>This app rocks! <a href="#home">Go home</a></p>    
  31.   </div> 
  32.   
  33. </div> 
  34.   
  35. </body> 
  36. </html> 

正如所见，上面的代码中包含了两个”page”:主页(id为home)和”about”(id为about)。从Home链接到About页面采 用的是连接地址为#about，about页面返回到首页的链接地址为#home。jQuery Mobile会自动切换链接的目的div显示到移动浏览器中。该框架会隐藏除第一个包含data-role=”page”div以外的其它”page”

AJAX 导航

为了实现在移动设备上的无缝客户体验，jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此，当在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。

这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待 数秒的方式要好很多。当一个新的页面做为新的data-role=”page” div插入到主页面时，主页面会有效的缓存取到的内容。使得当要访问一个页面时能够尽快的显示出来。这个工作过程听起来难以置信的复杂，但是做为开发人员 的我们大部份不需要了解其中工作的具体细节。只要能看到效果就OK。

注意:如果你不想采用AJAX的方式加载页面，而想以原生的页面加载方式打开一个链接页面，只需要在打开的链接上添加属性 rel=”external”属性 .

 

页面切换效果

你可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可。可能的值如下

页面切换效果

例如

  1. <p><a href=”#about” data-transition=”flip”>关于页面</a></p> 

在浏览器中查看效果

注意：查看以上的效果需要您的浏览器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。

对话框

通过在链接中添加data-rel=”dialog”的属性，可以使链接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择

例如我们将about的链接变成一个对话框并加入相应的切换效果。代码如下

  1. <p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>    

注意：目前的测试版本存在问题，当在一个页面中写多个”page”时在以dialog的方式打开一个页面时，不会出现对话框效果

按钮

按钮是触摸式应用程序的一部分，它们扮演链接的功能，因为它们提供了更大的目标，当你点击链接的时候(比较适合，手指比较胖的人群)

在jQuery Mobile中把一个链接变成button的效果，只需要在标签中添加data-role=”button属性即可”。例如：

  1. <div data-role="content"> 
  2.     <p><a href="#about" data-role="button">About this app</a></p>    
  3.   </div> 
  4.   
  5. ... 
  6.   
  7.   <div data-role="content"> 
  8.     <p>This app rocks!</p> 
  9.     <a href="#home" data-role="button">Go home</a> 
  10.   </div> 

另外jQuery Mobile也会自动的转换像表单元素中的submit，reset，button，或image为按钮样式。

还可以利用data-icon属性建立各式各样的按钮，建立行内按钮和按钮组(水平或垂直的)

格式化文本

为了使其尽可能的灵活，jQuery Mobile使更多的普通HTML内容更加独立。加入适当的缩进使内容的可读性更强。

有两种布局方法使其格式化变得更简单：布局表格和可折叠的内容块

◆布局表格：组织内容以列的形式显示，有两列表格，和三列表格

◆可折叠的内容：当点击内容块的标题，则会将其隐藏的详细内容展现出来

下面是一个可折叠内容的实例，单击标题将看到具体的内容，再点击标题则会将展现的内容隐藏。

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>Collapsible Content Demo</title> 
  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
  8. </head> 
  9. <body> 
  10.   
  11. <div data-role="page" id="home"> 
  12.   
  13.   <div data-role="header"> 
  14.     <h1>Home</h1> 
  15.   </div> 
  16.   
  17.   <div data-role="content"> 
  18.     <div data-role="collapsible" data-state="collapsed"> 
  19.       <h3>About this app</h3> 
  20.       <p>This app rocks!</p> 
  21.     </div> 
  22.   </div> 
  23.   
  24. </div> 
  25.   
  26. </body> 
  27. </html> 

触摸选择的表单元素

jQuery Mobile会自动替换标准的HTML表单元素，例如文本框，复选框，列表框。以这种自定义的样式工作在触摸设备上的表单元素，易用性更强。

例如，复选框将会变得很大，易于点选。点击下拉列表时，将会弹出一组大按钮列表选项，提供给用户选择。

该框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加两个option选项，创建不错的”打开/关闭”开关，

另外一个不错的特点是组合单选框和组合复选框，可以利用fieldset元素添加属性data-role=”controlgroup”来创建一组单选按钮或复选框，jQuery Mobile自动格式化他们的格式。使它们看上去更fashion!

一般来说，开发者不需要关心表单的那些高级特性，开发者仅需要以正常的方式创建你的表单，jQuery Mobile框架会帮你完成剩余的工作。另外有一件事情需要开发人员来完成，即使用div或fieldset 属性data-role=”fieldcontain”包装每一个label/field。这样jQuery Mobile会在label/field对之间添加一个水平分割条。这样的对齐方式可以使其更容易查找。

下面是一个jQuery Mobile版的表单元素

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>jQuery Mobile Form Demo</title> 
  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
  8. </head> 
  9. <body> 
  10.   
  11. <div data-role="page" id="home"> 
  12.   
  13.   <div data-role="header"> 
  14.     <h1>Ice Cream Order Form</h1> 
  15.   </div> 
  16.   
  17.   <div data-role="content"> 
  18.     <form action="#" method="get"> 
  19.     
  20.      <div data-role="fieldcontain"> 
  21.        <label for="name">Your Name:</label> 
  22.        <input type="text" name="name" id="name" value=""   /> 
  23.      </div> 
  24.      
  25.      <div data-role="controlgroup"> 
  26.        <legend>Which flavour(s) would you like?</legend> 
  27.        
  28.        <input type="checkbox" name="vanilla" id="vanilla" class="custom"  /> 
  29.        <label for="vanilla">Vanilla</label> 
  30.        
  31.        <input type="checkbox" name="chocolate" id="chocolate" class="custom"  /> 
  32.        <label for="chocolate">Chocolate</label> 
  33.        
  34.        <input type="checkbox" name="strawberry" id="strawberry" class="custom"  /> 
  35.        <label for="strawberry">Strawberry</label> 
  36.        
  37.      </div>    
  38.      
  39.      <div data-role="fieldcontain"> 
  40.        <label for="quantity">Number of Cones:</label> 
  41.        <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"   /> 
  42.      </div> 
  43.   
  44.      <div data-role="fieldcontain"> 
  45.        <label for="sprinkles">Sprinkles:</label> 
  46.         <select name="sprinkles" id="sprinkles" data-role="slider"> 
  47.           <option value="off">No</option> 
  48.           <option value="on">Yes</option> 
  49.         </select> 
  50.      </div> 
  51.   
  52.      <div data-role="fieldcontain"> 
  53.        <label for="store">Collect from Store:</label> 
  54.         <select name="store" id="store"> 
  55.           <option value="mainStreet">Main Street</option> 
  56.           <option value="libertyAvenue">Liberty Avenue</option> 
  57.           <option value="circleSquare">Circle Square</option> 
  58.           <option value="angelRoad">Angel Road</option> 
  59.         </select> 
  60.      </div> 
  61.      
  62.     <div class="ui-body ui-body-b"> 
  63.       <fieldset class="ui-grid-a"> 
  64.         <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div> 
  65.         <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>     
  66.       </fieldset> 
  67.     </div> 
  68.      
  69.   </div> 
  70.   
  71. </div> 
  72.   
  73. </body> 
  74. </html> 

列表视图

列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role=”listview”属性。

下面的一些情景将会用到创建列表视图

简单的文件列表项

◆简单的文件列表，会有一个好看的盒环绕着每一个列表项

◆链接列表，框架会自动为每一个链接加一个箭头”>”，显示在链接按钮的右侧

◆嵌套列表，如果你在一个li中嵌套另一个ul，jQuery Mobile会为这个嵌套列表自动建立一个”page”，并为它的父li自动加一个链接，这样很容易实现树状菜单选项，设置功能等等。

◆分隔线的按钮列表，在一个li中存放2个链接，你可以建立一个还垂直分隔条，用户可点击左侧或右侧的列表选项，展现不同的内容

◆记数气泡 如果你在列表选项中添加class=”ui-li-count”，框架会在其中生成一个”小泡泡”图标显现于列表选项的右侧，并在”小泡泡”中显示一些内容。类似在收信箱中看到已经收到的信息条数

◆查找过滤 在ul或ol中添加data-filter=”true”属性。则这个列表项就具备的查询的功能。”Filter result…”文本框将会显示在列表项的上面，允许用户根据条件来将一个大的列表项变小(过滤显示)

◆列表分隔 将列表项分割，可以在任意列表项上添加属性data-role=”list-divider

◆列表缩略图和图标。将img元素放在在列表项的开始， jQuery Mobile将会以缩略图的形式来展现，图片的大小为80 X 80像素。如果添加class=”ui-li-icon”类样式img元素的大小将会以16 X 16像素的图标

以下是一个列表项的实例

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>jQuery Mobile Lists Demo</title> 
  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
  8. </head> 
  9. <body> 
  10.   
  11. <div data-role="page" id="home"> 
  12.   
  13.   <div data-role="header"> 
  14.     <h1>Lists Demo</h1> 
  15.   </div> 
  16.   
  17.   <div data-role="content"> 
  18.   
  19.     <h2 style="padding: 1em 0;">A list view</h2> 
  20.   
  21.     <ul data-role="listview" data-inset="true"> 
  22.       <li>Cat</li> 
  23.       <li>Dog</li> 
  24.       <li>Mouse</li> 
  25.       <li>Squirrel</li> 
  26.     </ul> 
  27.     
  28.     <h2 style="padding: 1em 0;">A list of links</h2> 
  29.   
  30.     <ul data-role="listview" data-inset="true"> 
  31.       <li><a href="#">About this app</a></li> 
  32.       <li><a href="#">Buy ice cream</a></li> 
  33.       <li><a href="#">Find a store</a></li> 
  34.     </ul> 
  35.   
  36.     <h2 style="padding: 1em 0;">Nested lists</h2> 
  37.   
  38.     <ul data-role="listview" data-inset="true"> 
  39.       <li>Play 
  40.         <ul> 
  41.           <li><a href="#">Easy</a></li> 
  42.           <li><a href="#">Medium</a></li> 
  43.           <li><a href="#">Hard</a></li> 
  44.         </ul> 
  45.       </li> 
  46.       <li>Settings 
  47.         <ul> 
  48.           <li><a href="#">Graphics</a></li> 
  49.           <li><a href="#">Sound</a></li> 
  50.           <li><a href="#">Device</a></li> 
  51.         </ul> 
  52.       </li> 
  53.       <li>Highscores 
  54.         <ul> 
  55.           <li><a href="#">View</a></li> 
  56.           <li><a href="#">Submit</a></li> 
  57.           <li><a href="#">Reset</a></li> 
  58.         </ul> 
  59.       </li> 
  60.     </ul> 
  61.   
  62.     <h2 style="padding: 1em 0;">A split button list with filter</h2> 
  63.   
  64.     <ul data-role="listview" data-inset="true" data-filter="true"> 
  65.       <li> 
  66.         <a href="#">The Grapes of Wrath</a> 
  67.         <a href="#">Buy This Book</a> 
  68.       </li> 
  69.       <li> 
  70.         <a href="#">The Trial</a> 
  71.         <a href="#">Buy This Book</a> 
  72.       </li> 
  73.       <li> 
  74.         <a href="#">A Tale of Two Cities</a> 
  75.         <a href="#">Buy This Book</a> 
  76.       </li>      
  77.     </ul> 
  78.   
  79.     <h2 style="padding: 1em 0;">A list with count bubbles</h2> 
  80.   
  81.     <ul data-role="listview" data-inset="true"> 
  82.       <li><a href="#">SuperWidgets</a> <span class="ui-li-count">14</span></li> 
  83.       <li><a href="#">MegaWidgets</a> <span class="ui-li-count">0</span></li> 
  84.       <li><a href="#">WonderWidgets</a> <span class="ui-li-count">327</span></li>      
  85.     </ul> 
  86.     
  87.   </div> 
  88.   
  89. </div> 
  90.   
  91. </body> 
  92. </html> 

data-inset=”true”将格式化列表块为圆角化，如果你使用这种样式的话，列表条目的宽度拉伸成与浏览器窗口的宽度一致

主题

jQuery Mobile渲染的灰色、黑色和蓝色及圆形的组件使其看起来很漂亮，但是如果你的整个应用都使用这样的样式，将会使其变得很乏味。jQuery Mobile允许你自定义官方一些组件的主题。例如：

◆Font family

◆Drop shadows

◆按钮和盒状元素的边框圆角半径

◆图标组件

另外，每一个主题包含26种不同颜色的切换(标记从a 到z)，可以控制前景颜色，背景色和渐变色，典型用法是使页面元素部分替换，你可以使用data-theme属性。例如：

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>Page Title</title> 
  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
  8. </head> 
  9. <body> 
  10.   
  11. <div data-role="page" id="home"> 
  12.   
  13.   <div data-role="header"> 
  14.     <h1>Home</h1> 
  15.   </div> 
  16.   
  17.   <div data-role="content"> 
  18.     <a href="#" data-role="button" data-theme="a">About this app</a> 
  19.     <a href="#" data-role="button" data-theme="b">About this app</a> 
  20.     <a href="#" data-role="button" data-theme="c">About this app</a> 
  21.     <a href="#" data-role="button" data-theme="d">About this app</a> 
  22.     <a href="#" data-role="button" data-theme="e">About this app</a> 
  23.   </div> 
  24.   
  25. </div> 
  26.   
  27. </body> 
  28. </html> 

事件

框架还提供了简单的用户接口，并添加了移动设备支持的特殊事件。

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head> 
    4. <title>jQuery Mobile Events</title> 
    5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
    6. <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
    7. <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
    8. <script type="text/javascript"> 
    9.   
    10. $( function() { 
    11.   
    12.   $('body').bind( 'taphold', function( e ) { 
    13.     alert( 'You tapped and held!' ); 
    14.     e.stopImmediatePropagation(); 
    15.     return false; 
    16.   } );  
    17.   
    18.   $('body').bind( 'swipe', function( e ) { 
    19.     alert( 'You swiped!' ); 
    20.     e.stopImmediatePropagation(); 
    21.     return false; 
    22.   } );  
    23.   
    24. } ); 
    25.   
    26. </script>  
    27.   
    28. </head> 
    29.   
    30. <body> 
    31.   
    32. <div data-role="page" id="home"> 
    33.   
    34.   <div data-role="header"> 
    35.     <h1>jQuery Mobile Events</h1> 
    36.   </div> 
    37.   
    38.   <div data-role="content"> 
    39.     <p>Try:</p> 
    40.     <ul> 
    41.       <li>Tapping and holding</li> 
    42.       <li>Swiping</li> 
    43.     </ul> 
    44.   </div> 
    45.   
    46. </div> 
    47.   
    48. </body> 
    49. </html> 

你可能感兴趣的:(jquerymobile)

  • 十款移动APP开发框架 小小鸟008 前端h5app
    十款移动APP开发框架:1.jquerymobile框架2.bootstrap框架3.ionic框架4.MobileAngularUI框架5.IntelXDK框架6.AppceleratorTitanium框架7.SenchaTouch框架8.KendoUI框架9.PhoneGap框架10.mui框架1.jquerymobile框架jQueryMobile是jQuery在手机上和平板设备上的版本。
  • 2011年软件研发十大关键词盘点 junsure2012 转载专区html5node.jsjqueryadobejavascriptasynchronous
    [CSDN年末专稿]导语：2011年即将过去，和往年一样，这是纠结的一年。不平凡的一年，这也是技术领域精彩缤纷的一年。不管你愿不愿意，时间又来到了年末，又到了该做年度盘点和回顾的时候。CSDN软件研发频道将以十大关键词的形式来为您盘点今年技术领域的重点内容，本文是《CSDN2011年软件研发十大关键词盘点》的上篇：HTML5、jQueryMobile、Github、响应式Web设计(Respons
  • html 表单自定义属性,HTML5基础知识汇总_(2)自定义属性及表单新特性 中式大美生活 html表单自定义属性
    自定义属性data-*说起这个属性,其实现在很常见了;怎么说呢,因为在一些框架都能看到他的身影!!!比如Jquerymobile,里面非常频繁的使用了这个属性;这个属性是哪里来的….当然是跟随最新的H5一起出来的…..兼容性在PC端只能呢说一般般(目前.比较老式浏览器居多),,手机端支持还是比较OK的;虽说是自定义属性,但是还是有一定的规格的,,比如前缀必须是data-[自定义属性];比如这货有什
  • JQuery mobile滑动触发打开面板 YangCaine JQueryMobile滑动面板
    JQueryMobile简单实现屏幕向右滑动实现弹出面板效果图核心代码$(document).on("pagecreate","#pageone",function(){//功能加载$("p").on("swipe",function(){//选择P标签监听滑动事件//$("swiperight").text("滑动检测!");//一旦滑动就打开a标签$('a').click();});});$(
  • jQuery Mobile 和 Kendo UI 的比较（转） weixin_33682790 uijavascript测试ViewUI
    jQueryMobile和KendoUI的比较转自https://www.oschina.net/translate/jquery-mobile-versus-kendo-ui?cmp英文原文：jQueryMobileversusKendoUI–BrotherhoodDifferentiated返回原文QueryMobileandKendoUIarethepopularJavaScriptfram
  • 常用移动web开发框架 道简（Linus） 移动WEBWEB开发移动开发框架
    阿里云优惠：最高￥2000云产品通用代金券https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=dansrwg4纯粹的总结一下移动web开发框架，移动web开发框架有jQueryMobile、SenchaTouch等等,他们都来源于web开发，是成熟的框架，jQueryMobile出自于jQuery家族，SenchaTou
  • jQuery Mobile 入门教程 weixin_34301132 移动开发操作系统c#
    原作：GettingstartedwithjQueryMobile——MatthewDavid翻译：filod译文：http://blog.filod.net/jquerymobile-2/295.html转载声明：请注明原作、翻译以及译文链接。你每天都会对着它讲话，和它玩游戏，用它看新闻——没错，它就是你裤兜里的智能手机。android，黑莓还是iphone？为了让你清楚意识到究竟哪些才算是智能
  • 移动APP开发的三种常见模式 慕斯-ing MUI学习经验分享前端
    （1）当前流行的H5移动端开发框架①jQuerymobile②Bootstrap③Sencha④MUI（2）原生应用（NativeApp）原生应用程序是某一个移动平台（比如ios或安卓）所特有的，使用相应平台支持的开发工具和语言（比如ios平台支持Xcode和Objective-C，安卓平台支持Eclipse和Java）。原生应用程序看起来（外观）和运行起来（性能）是最佳的。但是存在开发成本高的缺
  • HTML 常用第三方库（持续更新） 微笑中的你
    非常感谢这些作者。jQueryhttps://github.com/jquery/jqueryjQuery-mobile在jQuery基础适用于移动端的库https://github.com/jquery/jquery-mobilew3school的教程http://www.w3school.com.cn/jquerymobile/index.asp
  • 让bootstrap轮播图支持手滑效果的解决方案 卡卡西不卡 前端知识bootstrap触摸滑动轮播图
    因为最近开发的项目涉及到移动设备上的HTML5开发，其中需要实现轮播效果。然后最快捷的方式，你知道的（Bootstrap），然后原生的Bootstrap的carousel.js插件并没有支持手势。然后......自己想办法呗，再然后，就有下面3种解决方案：jQueryMobile(http://jquerymobile.com/download/)$("#carousel-generic").sw
  • 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的 weixin_34191734 移动开发javascript操作系统ViewUI
    之前本博连载过《构建跨平台APP：jQueryMobile移动应用实战》一书，深受移动开发入门人员的喜爱。从现在开始，连载它的孪生姐妹书phoneGap移动应用实战一书，希望曾经是小白的你们，已经变成了大白。3.6PhoneGap中的API能干什么本章主要介绍进行PhoneGap开发前所需要做好的准备，那么现在是不是该介绍一些关于PhoneGap的事了呢？其实PhoneGap就是将HTML写成的页
  • 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）... weixin_30721899 移动开发操作系统javascriptViewUI
    之前本博连载过《构建跨平台APP：jQueryMobile移动应用实战》一书。深受移动开发入门人员的喜爱。从如今開始，连载它的孪生姐妹书phoneGap移动应用实战一书，希望以前是小白的你们，已经变成了大白。3.6PhoneGap中的API能干什么本章主要介绍进行PhoneGap开发前所须要做好的准备，那么如今是不是该介绍一些关于PhoneGap的事了呢？事实上PhoneGap就是将HTML写成的
  • 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API） liuyingming910
    之前本博连载过《构建跨平台APP：jQueryMobile移动应用实战》一书，深受移动开发入门人员的喜爱。从现在开始，连载它的孪生姐妹书phoneGap移动应用实战一书，希望曾经是小白的你们，已经变成了大白。3.6PhoneGap中的API能干什么本章主要介绍进行PhoneGap开发前所需要做好的准备，那么现在是不是该介绍一些关于PhoneGap的事了呢？其实PhoneGap就是将HTML写成的页
  • jquery mobile创建个人中心界面 long_w66 jquerymobilejquerycsshtml5
    前段时间利用jQuerymobile做了一个手机APP个人中心界面，话不多说直接展示代码。代码展示*{margin:0;padding:0;border:none;}.my-info-background{position:relative;width:100%;min-height:150px;overflow:hidden;background-image:-webkit-gradient(l
  • 初识JQuery框架 宫jx
    1.JQueryMobile页面的基本框架JQueryMobile是一个基于HTML5，拥有响应式网站特性，兼容所有主流移动平台的统一UI接口系统与前端开发框架，可以运行在所有智能手机平板电脑和桌面设备。JQueryMobile页面拥有一个基本的框架，就是在HTML页面中通过将在标签中添加data-role属性，设置该属性的值为page，使该div形成一个容器，容器中又包含3个子容器，分别在各子容
  • 手绘 正宗大头哥 用户体验设计用户体验设计体验
    移动端用户体验设计正日趋成熟。衡量这一点的方法之一就是看工具。原型工具可以让我们创建线框图以及点击事件，比如Balsamiq、Axure以及Fireworks，帮助我们诠释目标用户体验。跨浏览器的框架工具如PhoneGap、ZurbFoundation以及jQueryMobile可以帮助我们用互联网本地化语言来创建原型：HTML、CSS以及JavaScript。1.当前现状与以往几乎没有时间来设计
  • Web前端开发学习之路——JQuery Mobile UI组件 宇直豪 前端开发前端开发jQueryUI
    套用UI组件jQueryMobile各种可视化组件的语法大多数与HTML5标记大同小异，这里不再阐述，仅列出这些常用的组件。由于按钮（Button）和列表（ListView）功能变化比较大，后面将对其进行详细介绍。文本框（TextInput）inputtype="text"name="uname"id="uid"value="">范围滑块（RangeSlider）单选按钮（RadioButton）
  • 二.快来看看jQuery的基本操作吧 宫jx
    今天计算中心真冷啊，中央空调还没修好，敲代码手都快冻下来了啊jQuery页面的许多功能效果都需要借助HTML5的新增标签和属性，因此创建的HTML页面必须符合HTML5页面规范，在文档的和标签之间需要依次添加jQueryMobile的CSS样式表文件、jQuery基本框架文件和jQueryMobile插件文件。一.jQuery页面实现多容器之间的链接。1.简介(1)内链接。将一个页面中的多个容器当
  • 前端开发学习路线 zs_dolphin 前端学习
    百度了一些学习路线，结合自己学习的进度，一步一步完善自己的前端学习的路线图，希望自己坚持下来：1、HTML,CSS2、JavaScript,jQuery3、AJAX,JSON,XML4、框架扩展学习：Bootstrap，jQueryUI，jQueryEasyUI，jQueryMobile参考的内容如下：1、《写给同事的前端学习路线》www.douban.com/note/330647290/2、《
  • 前端部分框架地址集合 嗝喯唲
    http://www.w3school.com.cn/jquerymobile/jquery-mobile框架http://v3.bootcss.com/css/bootstarap框架http://www.ziqiangxuetang.com/bootstrap/bootstrap-carousel-plugin.htmlbootstarap框架第三方教程http://www.apjs.net/
  • 自学JQuery Mobile的几个例子 weixin_30859423 javascriptxhtmlViewUI
    JQueryMobile是一个用于构建移动Web应用程序的框架，适用于主流的移动设备（智能手机、平板电脑），该框架利用了HTML5和CSS3技术减少了额外的脚本文件的编写。具体JQueryMobile使用请转W3C页面：http://www.w3school.com.cn/jquerymobile/index.asp例子：该例子创建了一个介绍海贼王故事的一系列页面ex1.html文件：JQuery
  • jQuery Mobile初识 crazy__stone
    jQueryMobilejQueryMobile是jQuery在手机上和平板设备上的版本。jQueryMobile不仅会给主流移动平台带来jQuery核心库，而且有一个完整统一的jQuery移动UI框架。缩写页面的参数：data-role='navbar'：定义导航栏data-role='page':显示在浏览器中的页面data-role='content':定义页面中的内容data-role='
  • hybrid app、web app与native app工具的初步比较与分析 约翰码农
    主要前端框架和打包平台、工具WebApp（网页应用）使用的主要前端框架jQueryMobile、amazeuiThinkPHPMobile、mui框架打包工具：cordovaphonegapHybridApp（混合应用）使用的主要前端框架：mui框架Vue.jsReact.jsIonic即Angularjs开发生态打包工具Hbuilder、Appcan、Wex5、ApicloudNativeApp
  • Jquery Mobile初探 呵呵后
    一个汇率换算工具。主要用到的空间就是button和edittext。jqueryajax提交请求，后台用servlet处理运算。页面放在服务器上,本地应用只要用webview访问地址就行。我感觉JqueryMobile的东西不流畅，不知道Senchatouch怎么样工程结构index.htmlMyPage//监听输入框的变化$(document).ready(function(){$("#us")
  • 【JQuery Mobile移动应用开发小程序】期末大作业——书影音 康大大！ 笔记htmljavascriptcssjquery
    一、前言基于JQueryMobile移动应用开发小程序——书影音，实现影视的查阅，类似于豆瓣的一个小功能。二、实现的基本功能总体实现了影视的查询、搜索、增添、删除等功能，具体功能看下文详解。因为影视海报显示图片违规，所以用马赛克遮住。三、界面功能1、主页分别是电影、电视剧、动漫的导航条，实现三者的互相跳转。2、主页底部导航条的[更多]按钮实现了影视的汇总。点击任意任意影视可以查看影视详情。3、主页
  • 【JQuery Mobile移动应用开发实战】JQuery Mobile基础——工具栏的使用 shen子怡 jquery前端javascript
    文章目录2.工具栏的使用2.1稍微复杂的界面2.2方便的快捷键2.3失效的按钮2.4导航栏的应用2.5导航栏的全屏属性2.6内容栏的使用2.7会弹出的面板2.工具栏的使用本章节主要介绍JQueryMobile开发中用于实现导航功能的控件，一般称之为工具栏。工具栏主要包括头部栏和尾部栏，它们常被固定在屏幕的上下两侧，用来实现返回功能和各功能模块间的切换，对于界面美化也有重要的作用。JQueryMob
  • 前端常用插件 我是强强
    touch.js--百度开发移动端手势库isscroll--js模拟上拉加载下拉刷新hammer--移动端手势库H5屏幕适配--flexible.jsjquerymobile--创建移动端应用Swiper是一款免费以及轻量级的移动设备触控滑块的js框架more插件
  • ApacheCN jQuery 译文集 20211121 更新 jquery
    创建jQueryMobile移动应用零、序言一、jQueryMobile原型制作二、jQueryMobile网站三、分析、长表单和前端验证四、QR码、地理位置、谷歌地图API和HTML5视频五、客户端模板、JSONAPI和HTML5Web存储六、HTML5音频七、全响应式照片八、将jQueryMobile集成到现有站点九、内容管理系统和jQM十、将所有内容放在一起——Flood.FMjQuery2
  • 0816_前端框架jQuery Mobile 天才在战斗
    新内容(前端-jQueryMobile框架)jQueryMobile会根据手机不同尺寸来调整适配jM依赖于jQuery(js的一个扩展库)(bootstarp也可以实现webApp,但是它有些没用到的功能,必须也包括到项目里,这里有瑕疵)webAPP思想:单页多应用,以减少用户请求时的断片,增强用户体验引入jM两个文件和一个js的文件jquery.mobile-1.4.5.min.cssjquer
  • H5 紫色冰雨
    H5学习链接如何使用HTML51>自己编写大量的HTML5代码2>使用现成的HTML5框架1nsencha-touch2nphoneGap3njQuerymobile4nBootstrap2手机APP的开发模式1>原生（纯OC）2>纯HTML53>原生+HTML54>ReactNative
  • java数字签名三种方式 知了ing javajdk
    以下3钟数字签名都是基于jdk7的 1，RSA String password="test"; // 1.初始化密钥 KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA"); keyPairGenerator.initialize(51
  • Hibernate学习笔记 caoyong Hibernate
    1>、Hibernate是数据访问层框架，是一个ORM(Object Relation Mapping)框架，作者为:Gavin King 2>、搭建Hibernate的开发环境      a>、添加jar包:      aa>、hibernatte开发包中/lib/required/所
  • 设计模式之装饰器模式Decorator（结构型） 漂泊一剑客 Decorator
    1. 概述        若你从事过面向对象开发，实现给一个类或对象增加行为，使用继承机制，这是所有面向对象语言的一个基本特性。如果已经存在的一个类缺少某些方法，或者须要给方法添加更多的功能（魅力），你也许会仅仅继承这个类来产生一个新类—这建立在额外的代码上。      
  • 读取磁盘文件txt，并输入String 一炮送你回车库 String
    public static void main(String[] args) throws IOException {    String fileContent = readFileContent("d:/aaa.txt");    System.out.println(fileContent);   
  • js三级联动下拉框 3213213333332132 三级联动
    //三级联动 省/直辖市<select id="province"></select> 市/省直辖<select id="city"></select> 县/区 <select id="area"></select>
  • erlang之parse_transform编译选项的应用 616050468 parse_transform游戏服务器属性同步abstract_code
             最近使用erlang重构了游戏服务器的所有代码，之前看过C++/lua写的服务器引擎代码，引擎实现了玩家属性自动同步给前端和增量更新玩家数据到数据库的功能，这也是现在很多游戏服务器的优化方向，在引擎层面去解决数据同步和数据持久化，数据发生变化了业务层不需要关心怎么去同步给前端。由于游戏过程中玩家每个业务中玩家数据更改的量其实是很少
  • JAVA JSON的解析 darkranger java
    // { // “Total”：“条数”， // Code: 1, // // “PaymentItems”:[ // { // “PaymentItemID”:”支款单ID”, // “PaymentCode”:”支款单编号”, // “PaymentTime”:”支款日期”, // ”ContractNo”:”合同号”， //
  • POJ-1273-Drainage Ditches aijuans ACM_POJ
    POJ-1273-Drainage Ditches http://poj.org/problem?id=1273 基本的最大流，按LRJ的白书写的 #include<iostream> #include<cstring> #include<queue> using namespace std; #define INF 0x7fffffff int ma
  • 工作流Activiti5表的命名及含义 atongyeye 工作流Activiti
    activiti5 - http://activiti.org/designer/update在线插件安装 activiti5一共23张表 Activiti的表都以ACT_开头。 第二部分是表示表的用途的两个字母标识。 用途也和服务的API对应。 ACT_RE_*: 'RE'表示repository。 这个前缀的表包含了流程定义和流程静态资源 （图片，规则，等等）。 A
  • android的广播机制和广播的简单使用 百合不是茶 android广播机制广播的注册
          Android广播机制简介 在Android中，有一些操作完成以后，会发送广播，比如说发出一条短信，或打出一个电话，如果某个程序接收了这个广播，就会做相应的处理。这个广播跟我们传统意义中的电台广播有些相似之处。之所以叫做广播，就是因为它只负责“说”而不管你“听不听”，也就是不管你接收方如何处理。另外，广播可以被不只一个应用程序所接收，当然也可能不被任何应
  • Spring事务传播行为详解 bijian1013 javaspring事务传播行为
            在service类前加上@Transactional，声明这个service所有方法需要事务管理。每一个业务方法开始时都会打开一个事务。         Spring默认情况下会对运行期例外(RunTimeException)进行事务回滚。这
  • eidtplus operate 征客丶 eidtplus
    开启列模式: Alt+C 鼠标选择   OR   Alt+鼠标左键拖动 列模式替换或复制内容(多行): 右键-->格式-->填充所选内容-->选择相应操作 OR Ctrl+Shift+V(复制多行数据,必须行数一致) -------------------------------------------------------
  • 【Kafka一】Kafka入门 bit1129 kafka
    这篇文章来自Spark集成Kafka(http://bit1129.iteye.com/blog/2174765)，这里把它单独取出来，作为Kafka的入门吧   下载Kafka http://mirror.bit.edu.cn/apache/kafka/0.8.1.1/kafka_2.10-0.8.1.1.tgz 2.10表示Scala的版本，而0.8.1.1表示Kafka
  • Spring 事务实现机制 BlueSkator spring代理事务
    Spring是以代理的方式实现对事务的管理。我们在Action中所使用的Service对象，其实是代理对象的实例，并不是我们所写的Service对象实例。既然是两个不同的对象，那为什么我们在Action中可以象使用Service对象一样的使用代理对象呢？为了说明问题，假设有个Service类叫AService，它的Spring事务代理类为AProxyService，AService实现了一个接口
  • bootstrap源码学习与示例：bootstrap-dropdown（转帖） BreakingBad bootstrapdropdown
    bootstrap-dropdown组件是个烂东西，我读后的整体感觉。 一个下拉开菜单的设计： <ul class="nav pull-right"> <li id="fat-menu" class="dropdown">
  • 读《研磨设计模式》-代码笔记-中介者模式-Mediator bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* * 中介者模式（Mediator）：用一个中介对象来封装一系列的对象交互。 * 中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。 * * 在我看来，Mediator模式是把多个对象（
  • 常用代码记录 chenjunt3 UIExcelJ#
      1、单据设置某行或某字段不能修改 //i是行号,"cash"是字段名称 getBillCardPanelWrapper().getBillCardPanel().getBillModel().setCellEditable(i, "cash", false); //取得单据表体所有项用以上语句做循环就能设置整行了 getBillC
  • 搜索引擎与工作流引擎 comsci 算法工作搜索引擎网络应用
          最近在公司做和搜索有关的工作，(只是简单的应用开源工具集成到自己的产品中)工作流系统的进一步设计暂时放在一边了，偶然看到谷歌的研究员吴军写的数学之美系列中的搜索引擎与图论这篇文章中的介绍，我发现这样一个关系(仅仅是猜想)   -----搜索引擎和流程引擎的基础--都是图论，至少像在我在JWFD中引擎算法中用到的是自定义的广度优先
  • oracle Health Monitor daizj oracleHealth Monitor
    About Health Monitor Beginning with Release 11g, Oracle Database includes a framework called Health Monitor for running diagnostic checks on the database. About Health Monitor Checks Health M
  • JSON字符串转换为对象 dieslrae javajson
        作为前言,首先是要吐槽一下公司的脑残编译部署方式,web和core分开部署本来没什么问题,但是这丫居然不把json的包作为基础包而作为web的包,导致了core端不能使用,而且我们的core是可以当web来用的(不要在意这些细节),所以在core中处理json串就是个问题.没办法,跟编译那帮人也扯不清楚,只有自己写json的解析了.   
  • C语言学习八结构体，综合应用，学生管理系统 dcj3sjt126com C语言
    实现功能的代码： # include <stdio.h> # include <malloc.h> struct Student { int age; float score; char name[100]; }; int main(void) { int len; struct Student * pArr; int i,
  • vagrant学习笔记 dcj3sjt126com vagrant
    想了解多主机是如何定义和使用的, 所以又学习了一遍vagrant   1. vagrant virtualbox 下载安装 https://www.vagrantup.com/downloads.html https://www.virtualbox.org/wiki/Downloads   查看安装在命令行输入vagrant     2.
  • 14.性能优化-优化-软件配置优化 frank1234 软件配置性能优化
    1.Tomcat线程池 修改tomcat的server.xml文件： <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxThreads="1200" m
  • 一个不错的shell 脚本教程 入门级 HarborChung linuxshell
    一个不错的shell 脚本教程 入门级 建立一个脚本 　　Linux中有好多中不同的shell，但是通常我们使用bash (bourne again shell) 进行shell编程，因为bash是免费的并且很容易使用。所以在本文中笔者所提供的脚本都是使用bash（但是在大多数情况下，这些脚本同样可以在 bash的大姐，bourne shell中运行）。 　　如同其他语言一样
  • Spring4新特性——核心容器的其他改进 jinnianshilongnian spring动态代理spring4依赖注入
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • Linux设置tomcat开机启动 liuxingguome tomcatlinux开机自启动
    执行命令sudo gedit /etc/init.d/tomcat6 然后把以下英文部分复制过去。（注意第一句#!/bin/sh如果不写，就不是一个shell文件。然后将对应的jdk和tomcat换成你自己的目录就行了。 #!/bin/bash # # /etc/rc.d/init.d/tomcat # init script for tomcat precesses
  • 第13章 Ajax进阶（下） onestopweb Ajax
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • Troubleshooting Crystal Reports off BW blueoxygen BO
    http://wiki.sdn.sap.com/wiki/display/BOBJ/Troubleshooting+Crystal+Reports+off+BW#TroubleshootingCrystalReportsoffBW-TracingBOE   Quite useful, especially this part: SAP BW connectivity For t
  • Java开发熟手该当心的11个错误 tomcat_oracle javajvm多线程单元测试
    #1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收 测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置，那么使它成为
  • 正则表达式大全 yang852220741 html编程正则表达式
    今天向大家分享正则表达式大全，它可以大提高你的工作效率 正则表达式也可以被当作是一门语言，当你学习一门新的编程语言的时候，他们是一个小的子语言。初看时觉得它没有任何的意义，但是很多时候，你不得不阅读一些教程，或文章来理解这些简单的描述模式。 一、校验数字的表达式 数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他