由于最近工作项目上使用到前台mui框架,笔者在将H5转换为jsp时,遇见各种各样问题,原因归结为对mui框架不熟悉,今天就遇见一个特别奇怪的问题,界面中超链接<a>标签无法跳转,笔者试着添加点击事件,但效果依然是无法跳转,查资料发现mui搞得鬼;

我的代码主要是下边代码搞得鬼:

//删除出行人
  mui('body').on('tap','.business_icon_remove',function(){
    var parentNode_1 = this.parentNode,
        parentNode_2 = parentNode_1.parentNode,
        removeNode = parentNode_2.parentNode,//获取要删除的节点
        fatherNode = removeNode.parentNode;//获取要删除节点的父节点
        if (hasClass(removeNode,'mui-media')) {
          mui.alert('确定要删除该员工?',function(){
          fatherNode.removeChild(removeNode);
        })
        }else if(hasClass(removeNode,'business_remove_invoice')){
          mui.alert('确定要删除该发票?',function(){
          fatherNode.removeChild(removeNode);
        })
        };

});
  mui('body').on('tap','.business_choose_time',function(){
   var set_day = this.getElementsByClassName('business_time_day')[0];
   var set_hour = this.getElementsByClassName('business_time_hour')[0];
     /*
      * 首次显示时实例化组件
      * 示例为了简洁,将 options 放在了按钮的 dom 上
      * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
      */

//设置日期控件模式
     var picker = new mui.DtPicker();
     picker.show(function(rs) {
      /*
       * rs.value 拼合后的 value
       * rs.text 拼合后的 text
       * rs.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
       * rs.m 月,用法同年
       * rs.d 日,用法同年
       * rs.h 时,用法同年
       * rs.i 分(minutes 的第二个字母),用法同年
       */
      set_day.innerText = rs.y.text + '-' +rs.m.text + '-' + rs.d.text;
      set_hour.innerText = rs.h.text + ':' + rs.i.text;
      /*
       * 返回 false 可以阻止选择框的关闭
       * return false;
       */
      /*
       * 释放组件资源,释放后将将不能再操作组件
       * 通常情况下,不需要示放组件,new DtPicker(options) 后,可以一直使用。
       * 当前示例,因为内容较多,如不进行资原释放,在某些设备上会较慢。
       * 所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例。
       */
      picker.dispose();
    }, false);
  });

其实在这里使用mui框架,来实现界面的数据删除和时间的选择两个功能,添加下边代码就可以解决问题:

mui('body').on('tap','a',function(){
      window.top.location.href=this.href;
  });

以上叙述经笔者亲自验证,也可能朋友们是其他原因导致的,但使用mui框架,类似问题,应该都可以解决!

使用mui框架后a标签无法跳转的更多相关文章

  1. mui框架中底部导航的跳转1

    mui框架极大的方便了app的开发但是我们在做页面之间的切换时发现不能实现 a 链接的跳转,这是应为mui相关的一些控件是通过拦截a标签上的href来实现的,所以mui.js会阻止a标签上的href跳 ...

  2. mui框架中底部导航的跳转2

    接上一篇 还有一种方法就是在一心得页面中打开我们所需要的网页 代码如下: 向新的的页面穿值: 获取到新页面上的值:

  3. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  4. MUI框架-10-MUI 数据交互-跳转详情页面

    MUI框架-10-MUI 数据交互-跳转详情页面 上一篇介绍了如何实现数据交互,给别人的 API 发送 ajax 请求,我们得到数据,再使用 art-template 模板引擎拼接 HTML,最终实现 ...

  5. 解决MUI阻止a标签默认跳转事件—方法总结

    用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会 ...

  6. 移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

    一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class=" ...

  7. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...

  8. 跨平台移动端APP开发---简单高效的MUI框架

    MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...

  9. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP

      前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...

随机推荐

  1. 【转载】JAVA中线程的两种实现方法-实现Runnable接口和继承Thread类

    转自: http://blog.csdn.net/sunguangran/article/details/6069317 非常感谢原作者,整理的这么详细. 在java中可有两种方式实现多线程,一种是继 ...

  2. java常见设计模式

    工厂模式 普通工厂模式,就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建. 多个工厂模式,编写多个创建工厂的方法即可. 静态工厂模式,在多个工厂模式的基础上把Factory种方法的返回值标明 ...

  3. 维度属性的KeyColumns,NameColumn和ValueColumn

      维度的每一个属性都有KeyColumns,NameColumn和ValueColumn 1,如何理解KeyColumns,NameColumn和ValueColumn?对一行记录有不同的标识列,但 ...

  4. 2017-02-23 .NET Core Tools转向使用MSBuild项目格式

    微软之前为了让.NET Core和ASP.NET Core能够支持Windows Visual Studio之外的开发平台,创建了基于project.json格式的项目系统.不过可惜,这种格式与之前的 ...

  5. IntelliJ IDEA创建Maven+SSM+Tomcat+Git项目【全程详解】

    记录一下整个创建项目的过程,其中包括: Maven 项目创建: SSM配置文件: Tomcat配置: Git配置: Git忽略文件Ignore配置: 图文讲解,通俗易懂,易上手. 一.创建Maven ...

  6. hadoop2.5.2 安装与部署

    主从机构 主:jobtracker 从:tasktracker 四个阶段 1. split 2. Mapper: key-value(对象) 3. shuffle a)  分区(partition,H ...

  7. KVM- vnc配置

    本文是通过vnc方式访问虚拟主机上的KVM虚拟机. 这里的通过vnc方式访问虚拟机不是在kvm虚拟机安装配置vnc服务器,通过虚拟主机的IP地址与端口进行访问,kvm虚拟化对vnc的支持相对来说比xe ...

  8. HDU - 5306: Gorgeous Sequence (势能线段树)

    There is a sequence aa of length nn. We use aiai to denote the ii-th element in this sequence. You s ...

  9. 下载安装jdk

    阿里云服务器部署第一步:下载-安装jdk 1.下载路径:http://www.oracle.com/ 2.通过windows远程桌面连接上服务器:连接方式: 然后在服务器上c:/user/下创建jav ...

  10. 【转】Cron表达式简介

    Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: Seconds Minutes Hours DayofMonth Month ...