详解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 相关文章推荐
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
吃通javascript正则表达式
Apr 21 Javascript
谷歌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常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
JsRender实用入门教程
2014/10/31 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
浅谈JavaScript 声明提升
2020/09/14 Javascript
用Pygal绘制直方图代码示例
2017/12/07 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
网络工程师职业规划
2014/02/10 职场文书
员工薪酬激励方案
2014/06/13 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
护士年终考核评语
2014/12/31 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
《窃读记》教学反思
2016/02/18 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python