详解jQuery Mobile自定义标签


Posted in Javascript onJanuary 06, 2016

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

详解jQuery Mobile自定义标签 

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

<!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"> 
      <span style="height: 40px; line-height: 40px; text-align: center; display: block; font-size: 9px;">1213456</span> 
    </div> 
  </div> 
</body> 
</html>

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

Javascript 相关文章推荐
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
谷歌Chrome浏览器扩展程序开发小记
Jan 06 #Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 #Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 #Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 #Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 #Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 #Javascript
javascript中闭包(Closure)详解
Jan 06 #Javascript
You might like
php google或baidu分页代码
2009/11/26 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
php实现微信扫码支付
2017/03/26 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
大学学习个人的自我评价
2014/02/18 职场文书
铲车司机岗位职责
2014/03/15 职场文书
国庆横幅标语
2014/10/08 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
高中班主任培训心得体会
2016/01/07 职场文书