详解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 相关文章推荐
js DOM模型操作
Dec 28 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
js控制div弹出层实现方法
May 11 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
Vue3中toRef与toRefs的区别
Mar 24 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进行MySQL删除记录操作代码
2008/06/07 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
关于vue.js组件数据流的问题
2017/07/26 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Django models文件模型变更错误解决
2020/05/11 Python
Python库安装速度过慢解决方案
2020/07/14 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
ajax是什么及其工作原理
2012/02/08 面试题
电大物流学生的自我评价
2013/10/25 职场文书
经理助理岗位职责
2015/02/02 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang