详解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实现不规则TAB选项卡效果代码
Sep 16 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
vue组件开发之slider组件使用详解
Aug 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
PHP安装全攻略:APACHE
2006/10/09 PHP
提升PHP执行速度全攻略
2006/10/09 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
BootStrap中
2016/12/10 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
Django用户认证系统 User对象解析
2019/08/02 Python
python 进程的几种创建方式详解
2019/08/29 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
办公室前台岗位职责
2014/01/04 职场文书
施工安全责任书
2014/04/14 职场文书
我的老师教学反思
2014/05/01 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2016教师节感恩话语
2015/12/09 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang