jqueryMobile使用示例分享_jquery_脚本之家

jQuery
Mobile是客户端代码,但其基于ajax技术与服务器端交互。因此拥有一个Web
Service,才能更好的体验jQuery Mobile的功能。这里不打算介绍Web
Service的搭建过程,朋友们可以根据自己的实际需要自行搭建。

jqueryMobile使用示例分享,jquerymobile示例

jQuery
Mobile是客户端代码,但其基于ajax技术与服务器端交互。因此拥有一个Web
Service,才能更好的体验jQuery Mobile的功能。这里不打算介绍Web
Service的搭建过程,朋友们可以根据自己的实际需要自行搭建。

示例一:

<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
   <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
   <title>jqueryMoblie</title>
 </head>
 <body>

<div data-role="page" id="pageone">
 <div data-role="header">
 <h1>图标</h1>
 </div>

 <div data-role="content">
  <p>定位图标:</p>
  <a href="#link" data-role="button" data-icon="search" data-iconpos="top">顶部</a>
  <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右侧</a>
  <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">底部</a>
  <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左侧</a>
 </div>

 <div data-role="footer">
 <h1>底部文本</h1>
 </div>
</div> 
 </body>
 </html>

 演示图:

图片 1

示例二:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
 <div data-role="header">
  <h1>可折叠块</h1>
 </div>

 <div data-role="content">
  <div data-role="collapsible">
   <h1>点击我 - 我可以折叠!</h1>
   <p>我是可折叠的内容。</p>
  </div>
 </div>

 <div data-role="footer">
  <h1>页脚文本</h1>
 </div>
</div> 

</body>
</html>

演示图

图片 2

示例三:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script> -->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
 <div data-role="header">
  <h1>可折叠集合</h1>
 </div>

 <div data-role="content">
  <div data-role="collapsible-set">
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠!</h3>
     <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠!</h3>
    <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠!</h3>
    <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠!</h3>
    <p>我是可折叠的内容。</p>
   </div>
  </div>
 </div>

 <div data-role="footer">
  <h1>在此插入底部文本</h1>
 </div>
</div> 

</body>
</html>

演示图:

图片 3

示例四:

<html lang="zh_CN">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
</head>
<body>

<div data-role="page" id="pageone">
 <div data-role="header">
 <h1>自定义的列</h1>
 </div>

 <div data-role="content">
  <p>三列样式布局:</p>
  <div class="ui-grid-b">
   <div class="ui-block-a">第一个列</div>
   <div class="ui-block-b">第二个列</div>
   <div class="ui-block-c">第三个列</div>
  </div>
 </div>
</div> 

</body>
</html>

演示图

图片 4

示例五:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
 <div data-role="content">
  <h2>有序列表:</h2>
  <ol data-role="listview">
   <li><a href="#">列表项</a></li>
   <li><a href="#">列表项</a></li>
   <li><a href="#">列表项</a></li>
  </ol>
  <h2>无序列表:</h2>
  <ul data-role="listview">
   <li><a href="#">列表项</a></li>
   <li><a href="#">列表项</a></li>
   <li><a href="#">列表项</a></li>
  </ul>
 </div>
</div> 

</body>
</html>

演示图

图片 5

在介绍过程中有不对的地方或不严谨的地方,欢予以纠正。感谢大家!

与其他教程不同的是,本教程都是通一个个实例进行展示。关键性介绍都会在代码中穿插。

您可能感兴趣的文章:

  • Jquery插件之打造自定义的select标签
  • 基于jQuery的获取标签名的代码
  • jquery如何改变html标签的样式(两种实现方法)
  • Jquery为a标签的href赋值实现代码
  • jquery通过visible来判断标签是否显示或隐藏
  • Jquery 获取指定标签的对象及属性的设置与移除
  • jquery 为a标签绑定click事件示例代码
  • jQuery标签替换函数replaceWith()的使用例子
  • jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
  • jQuery获取标签文本内容和html内容的方法

Mobile自定义标签,jquerymobile
本文实例讲解了jQuery
Mobile自定义标签,分享给大家供大家参考,具体内容如下
规划产品国际化的需求…

如果你之前还没有安装Socket.io,就要确保已安装,为此需要往你的终端中输入npm
install socket.io。

在介绍过程中有不对的地方或不严谨的地方,欢予以纠正。感谢大家!

您可能感兴趣的文章:

  • jquery Mobile入门—多页面切换示例学习
  • jQuery Mobile页面跳转后未加载外部JS原因分析及解决
  • jquery mobile实现拨打电话功能的几种方法
  • jquerymobile局部渲染的各种刷新方法小结
  • jquery mobile的触控点击事件会多次触发问题的解决方法
  • jquery mobile页面跳转后样式丢失js失效的解决方法
  • jQueryMobile之Helloworld与页面切换的方法
  • 使用jQueryMobile实现滑动翻页效果的方法
  • jquery.mobile 共同布局遇到的问题小结
  • 详解jQuery Mobile自定义标签

jQuery
Mobile是客户端代码,但其基于ajax技术与服务器端交互。因此拥有一个Web
Service,才能更好的体…

详解jQuery Mobile自定义标签,jquerymobile

本文实例讲解了jQuery
Mobile自定义标签,分享给大家供大家参考,具体内容如下
规划产品国际化的需求时,涉及到PC
Web,移动Web,和各app。设计了多个版本的移动Web均不理想。
由于移动Web采用了jQuery
Mobile框架,所以将切换语言放在哪个位置更合理进行了讨论。讨论的过程和多个方案我就不提了,先来看看最终效果:

图片 6 

是不是感觉很经验,这里一开始尝试了多次,最终自定义了一个下拉选项,代码如下:

<!DOCTYPE html> 
<html> 
<head> 
  <title>jQuery Mobile</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <meta http-equiv="Expires" content="0"> 
  <meta http-equiv="Pragma" content="no-cache"> 
  <meta http-equiv="Cache-control" content="no-cache, must-revalidate"> 
  <meta http-equiv="Cache" content="no-cache"> 
  <link rel="stylesheet" href="jQuery/jquery.mobile-1.4.4.min.css" type="text/css"> 
  <script type="text/javascript" src="jQuery/jquery-1.8.3.min.js"></script> 
  <script type="text/javascript" src="jQuery/jquery.mobile-1.4.4.min.js"></script> 
  <script type="text/javascript" src="jQuery/jquery.cookie.js"></script> 
  <script type="text/javascript" src="jQuery/jquery.i18n.properties-min-1.0.9.js"></script> 
  <style type="text/css"> 
    .comFooter{ 
      position: absolute; bottom: 0; left:0; height: 40px; width: 100%; 
    } 
  </style> 
</head> 
<body> 
  <div data-role="page" id="pageWel" data-title="脚本"> 
    <div data-role="header" data-theme="b"> 
      <a href="#" data-role="button" class="ui-btn-left" data-icon="check">测试</a> 
      <h1 class="title" data-i18n="global_title"> 
        帮客之家
      </h1> 
      <!-- 具体代码 --> 
      <a href="javascript:void(0);" data-role="none" aria-haspopup="true" class="ui-btn-right"> 
        <select class="hupu_i18n_select" data-icon="check" data-role="button" data-inline="false" data-native-menu="false"> 
          <option value="zh-CN">简体中文</option> 
          <option value="zh-TW">繁體中文</option> 
          <option value="en">English</option> 
          <option value="ja">日本語の</option> 
        </select> 
      </a> 
      </div> 
    <div role="main" class="ui-content"> 
      欢迎大家关注帮客之家 
    </div> 
    <div data-role="footer" data-theme="b" class="comFooter"> 
      1213456 
    </div> 
  </div> 
</body> 
</html>

 以上就是关于 jQuery Mobile自定义标签的相关介绍,希望对大家了解jQuery
Mobile自定义标签有所帮助。

客户端

      jqueryMoblie     图标    顶部 右侧 底部 左侧   底部文本   

    可折叠块    点击我 - 我可以折叠!     页脚文本  

    可折叠集合     点击我 - 我可以折叠!    点击我 - 我可以折叠!    点击我 - 我可以折叠!    点击我 - 我可以折叠!      在此插入底部文本  

.ui-block-a, .ui-block-b, .ui-block-c {background-color: lightgray;border: 1px solid black;height: 100px;font-weight: bold;text-align: center;padding: 30px;}  自定义的列     第一个列 第二个列 第三个列   

  有序列表:  列表项 列表项 列表项  无序列表:  列表项 列表项 列表项   

io = require(‘socket.io’).listen(4000)

与其他教程不同的是,本教程都是通一个个实例进行展示。关键性介绍都会在代码中穿插。

由于我们的服务器已搭建和运行起来,我们可以编写用来画到画布的一些代码。创建一个新文件,名为scripts.coffee。下面的所有代码都在App.init()方法里面执行,一旦jQuery文档准备就绪,我们就触发该方法。

从GitHub下载代码()

图片 7

App = {}   ###      初始化  ###  App.init = ->     App.canvas = document.createElement 'canvas' #创建<canvas>元素      App.canvas.height = 400     App.canvas.width = 800  #加大尺寸      document.getElementsByTagName('article')[0].appendChild(App.canvas) #把它附加到DOM中       AppApp.ctx = App.canvas.getContext("2d") # 存储上下文        # 为我们的线条画设置一些参数      App.ctx.fillStyle = "solid"     App.ctx.strokeStyle = "#bada55"     App.ctx.lineWidth = 5     App.ctx.lineCap = "round"      # 绘图函数      App.draw = (x,y,type) ->         if type is "dragstart"              App.ctx.beginPath()              App.ctx.moveTo(x,y)          else if type is "drag"              App.ctx.lineTo(x,y)              App.ctx.stroke()          else              App.ctx.closePath()      return  
<!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8">     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>     <script type="text/javascript" src="js/jquery.event.drag-2.0.js"></script>     <script src="http://localhost:4000/socket.io/socket.io.js"></script>     <script type="text/javascript" src="scripts.js"></script>     <link rel="stylesheet" href="style.css" />      <title>HTML5 Canvas + Node.JS Socket.io</title> </head> <body>     <article><!—我们的画布将在此插入--></article>      <!-- Scripts required -->     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>     <script type="text/javascript" src="js/jquery.event.drag-2.0.js"></script>     <script src="http://localhost:4000/socket.io/socket.io.js"></script>     <script type="text/javascript" src="scripts.js"></script> </body> 

图片 8

首先,我们不妨立马让index.html文件搭建和运行起来。除了一些基本的标记外,我还加入了jQuery、现在从我们这个服务器提供的Socket.io
JS文件、面向拖动事件的jQuery插件以及我们自己的scripts.js文件。

跨设备/浏览器的兼容性

socket)和画布(Canvas)是目前实施到浏览器中的两项超酷的特性。本教程将简要介绍这两者是如何工作的,并且制作了基于Node.js和…

如果你进入到本地主机:4000,会看到下列结果:

我们要做的第一件事就是建立一台Web套接字服务器。为此,我们要用到Node.js和模块Socket.io。Socket.io使得搭建和运行Web套接字服务器的任务超容易完成。它甚至为不支持原生Web套接字的浏览器提供了可退回到Flash的功能(Flash
fallback)。在本教程中,我们将只使用支持元素的浏览器。

现在,我们不妨建立Web套接字服务器。创建server.coffee文件,采用下列配置。

介绍详细内容的屏幕播放速成教程

服务器端

io.sockets.on ‘connection’, (socket) ->

编译你的coffeescript,重新回到你的终端,输入node
server.js.。现在你已有了一台通过端口4000运行的Web套接字服务器。

创建我们的Canvas元素

#构建我们的应用程序,它有自己的命名空间

Web套接字(Web
socket)和画布(Canvas)是目前实施到浏览器中的两项超酷的特性。本教程将简要介绍这两者是如何工作的,并且制作了基于Node.js和Web套接字的实时画布。为了简洁起见,我将使用CoffeeScript来编写所有代码。如果你青睐用传统的JavaScript来编写,只要看一下相应的.js文件。出于同样的原因,我也弃用了CSS。

网站地图xml地图