详解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之原型和继承
Jul 06 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
微信小程序实现签到弹窗动画
Sep 21 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php 图片上添加透明度渐变的效果
2009/06/29 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
Python使用configparser库读取配置文件
2020/02/22 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Python爬虫教程知识点总结
2020/10/19 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
如何做好总经理助理
2013/11/12 职场文书
加拿大留学自荐信
2014/01/28 职场文书
办公室岗位职责
2014/02/12 职场文书
优秀团支部申报材料
2014/12/26 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技