内的a标签 全部不能点击。换成电脑浏览器可以点击

重现步骤

[代码片段]

Hello MUI

html,

body {

background-color: #efeff4;

}

p {

text-indent: 22px;

}

span.mui-icon {

font-size: 14px;

color: #007aff;

margin-left: -15px;

padding-right: 10px;

}

.mui-off-canvas-right {

color: #fff;

}

.title {

margin: 35px 15px 10px;

}

.title+.content {

margin: 10px 15px 35px;

color: #bbb;

text-indent: 1em;

font-size: 14px;

line-height: 24px;

}

input {

color: #000;

}

侧滑导航

这是可拖动式侧滑菜单示例,你可以在这里放置任何内容;关闭侧滑菜单有多种方式: 1.在手机屏幕任意位置向右拖动(drag);2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮

;4.Android手机按back键;5.Android手机按menu键

关闭侧滑菜单

侧滑列表示例

左滑导航

这是可拖动式左滑导航示例,主页面和菜单在一个HTML文件中, 优点是支持拖动手势(跟手),缺点是不支持菜单内容在多页面的复用; 当前页面为主界面,你可以在主界面放置任何内容; 打开侧滑菜单有多种方式: 1、在当前页面向左拖动; 2、点击页面右上角的

图标; 3、通过JS API触发(例如点击如下蓝色按钮体验);

4、Android手机按menu键;

显示侧滑菜单

侧滑菜单的移动动画,支持多种效果,切换如下选项体验不同动画效果:

侧滑菜单的移动动画,支持多种效果,切换如下选项体验不同动画效果:

侧滑菜单的移动动画,支持多种效果,切换如下选项体验不同动画效果:

侧滑菜单的移动动画,支持多种效果,切换如下选项体验不同动画效果:

侧滑菜单的移动动画,支持多种效果,切换如下选项体验不同动画效果:

主界面移动、菜单不动

主界面不动、菜单移动

整体移动

缩放式侧滑(类手机QQ)

mui.init({

swipeBack: false,

});

//侧滑容器父节点

var offCanvasWrapper = mui('#offCanvasWrapper');

//主界面容器

var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');

//菜单容器

var offCanvasSide = document.getElementById("offCanvasSide");

//Android暂不支持整体移动动画

if (!mui.os.android) {

document.getElementById("move-togger").classList.remove('mui-hidden');

var spans = document.querySelectorAll('.android-only');

for (var i = 0, len = spans.length; i < len; i++) {

spans[i].style.display = "none";

}

}

//移动效果是否为整体移动

var moveTogether = false;

//侧滑容器的class列表,增加.mui-slide-in即可实现菜单移动、主界面不动的效果;

var classList = offCanvasWrapper[0].classList;

//变换侧滑动画移动效果;

mui('.mui-input-group').on('change', 'input', function() {

if (this.checked) {

offCanvasSide.classList.remove('mui-transitioning');

offCanvasSide.setAttribute('style', '');

classList.remove('mui-slide-in');

classList.remove('mui-scalable');

switch (this.value) {

case 'main-move':

if (moveTogether) {

//仅主内容滑动时,侧滑菜单在off-canvas-wrap内,和主界面并列

offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);

moveTogether = false;

}

break;

case 'main-move-scalable':

if (moveTogether) {

//仅主内容滑动时,侧滑菜单在off-canvas-wrap内,和主界面并列

offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);

}

classList.add('mui-scalable');

break;

case 'menu-move':

classList.add('mui-slide-in');

break;

case 'all-move':

moveTogether = true;

//整体滑动时,侧滑菜单在inner-wrap内

offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);

break;

}

offCanvasWrapper.offCanvas().refresh();

}

});

document.getElementById('offCanvasShow').addEventListener('tap', function() {

offCanvasWrapper.offCanvas('show');

});

document.getElementById('offCanvasHide').addEventListener('tap', function() {

offCanvasWrapper.offCanvas('close');

});

//主界面和侧滑菜单界面均支持区域滚动;

mui('#offCanvasSideScroll').scroll();

mui('#offCanvasContentScroll').scroll();

//实现ios平台的侧滑关闭页面;

if (mui.os.plus && mui.os.ios) {

offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件

plus.webview.currentWebview().setStyle({

'popGesture': 'none'

});

});

offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件

plus.webview.currentWebview().setStyle({

'popGesture': 'close'

});

});

}

联系方式

[QQ]956716282

html a标签 left,offcanvas-drag-left.html手机web a标签触屏失效相关推荐

  1. seaborn可视化散点图并自定义数据轴标签(X轴和Y轴的轴标签,Change X Y Axis Labels to a Seaborn Plot)

    seaborn可视化散点图并自定义数据轴标签(X轴和Y轴的轴标签,Change X & Y Axis Labels to a Seaborn Plot) 目录

  2. R语言ggplot2可视化、使用axis.ticks.length函数设置坐标轴间隔标签竖线的长度、并设置坐标轴间隔标签在图像内部(刻度标记放置在图像内部)

    R语言ggplot2可视化.使用axis.ticks.length函数设置坐标轴间隔标签竖线的长度.并设置坐标轴间隔标签在图像内部(刻度标记放置在图像内部) 目录

  3. python使用matplotlib对比多个模型在测试集上的效果并可视化、设置模型性能可视化结果柱状图(bar plot)标签的小数点位数(例如,强制柱状图标签0.7显示为两位小数0.70)

    python使用matplotlib对比多个模型在测试集上的效果并可视化.设置模型性能可视化结果柱状图(bar plot)标签的小数点位数(例如,强制柱状图标签0.7显示为两位小数0.70) 目录

  4. a标签右侧尖括号_没想到贴线缆标签有很多讲究和技巧?一般人真不知道

    网络工程中,为了区分网线.标识网线连接的设备,一般会给每根网线贴上标签. 普贴线缆标签 随着标签的广泛使用,标签不仅用来区分网线,还用来记录网线连接的两端设备信息,并且也有专门打印标签的标签机.标签机 ...

  5. Struts标签、Ognl表达式、el表达式、jstl标签库这四者之间的关系和各自作用

    来自:http://blog.csdn.net/love_you_99/article/details/8184797 一 介绍 1.Struts2的作用 Struts2标签库提供了主题.模板支持,极 ...

  6. java web 自定义标签_JavaWeb学习——自定义标签

    自定义标签 一.自定义标签概述 使用标准JSP访问.操作JavaBean,是实现展现(HTML)与业务实现(Java代码)分离的第一步.然而,标准方法功能不够强大,以至于开发者无法仅仅使用它们开发应用 ...

  7. JavaWeb的web.xml标签元素(二)

    JavaWeb的web.xml标签元素(一) 九.session-config 为Web应用中的javax.servlet.http.HttpSession对象定义参数 session-config ...

  8. JavaWeb的web.xml标签元素(一)

    普通信息标签 (1)display-name 定义了WEB应用的名字,在servletContextConfig display-name* XML语法: <display-name>Ap ...

  9. java标签用法详解_介绍一个javaWeb自定义标签的用法详解

    这篇文章主要介绍了javaWeb自定义标签用法,结合实例形式分析了javaweb自定义标签的功能.定义方法及执行原理,需要的朋友可以参考下 本文实例讲述了javaWeb自定义标签用法.分享给大家供大家 ...

最新文章

  1. 汉字转换成html,汉字与16进制、汉字与Html转义符的转换
  2. 两个tplink路由器有线桥接_路由器有线桥接设置方法
  3. UnidentifiedImageError: cannot identify image file <_io.BufferedReader name=‘D:\\Download\
  4. 10分钟快速配置sublime2支持jQuery开发
  5. castle windsor学习-----XML Inline Parameters 内联参数
  6. Asp.net中防止用户多次登录的方法
  7. CTF盲水印工具安装(排雷)
  8. 链表python笔试题目_python经典面试算法题1.4:如何对链表进行重新排序
  9. 初识单点登录及JWT实现
  10. 风暴事件处理器–每个工作者的GC日志文件
  11. Android学习_ContentProvider和Uri
  12. 力扣501. 二叉搜索树中的众数(JavaScript)
  13. 【疑点】当子元素全部浮动时,怎么解决父元素塌陷的问题?
  14. 只让类访问, 而不让类的实例来访问某个成员变量
  15. 完整的棋牌游戏开发流程,你知道多少棋牌游戏开发。
  16. Oracle全局临时表和私有临时表
  17. 机载激光雷达原理与应用科普(一)
  18. 直观理解图片的EXIF orientation
  19. CARLA 笔记(05)— Actors and blueprints(创建和修改 Blueprint、生成 Spawning、使用 Handling、销毁 Destruction)
  20. 学计算机要数学和英语怎么说,高中数学和英语有点恼火。但本人大学想学计算机,就是不知道英语和数学与计算机专业有什么必要联络吗?...

热门文章

  1. 摄像头RTSP流硬解码
  2. 对创业者总担心大公司抄袭的八点建议——兼谈腾讯微博
  3. sql update left join
  4. 机动目标跟踪——目标模型概述(匀速运动CV模型)
  5. 列车运行图编制系统/列车运行图绘制系统(C#)
  6. #【精华】转换大写人民币
  7. cadence SPB17.4 - orcad更新指定元件的位号(保持其他元件编号不变)
  8. 哪些手机支持android q,华为首批升级Android Q机型曝光 共17款
  9. 微信小程序 城市选择器
  10. 参数调整类毕业论文文献都有哪些?