<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <link href="css/mui.min.css" rel="stylesheet" />

        <script src="js/mui.min.js"></script>

        <script src="js/h.js"></script>

        <script type="text/javascript">

            mui.init({

                subpages: [{

                    url: 'sub1.html',

                    id: 'sub1.html',

                    styles: { top: '44px', bottom: '44px', width: '100%' }

                }, {

                    url: 'sub2.html',

                    id: 'sub2.html',

                    styles: { top: '44px', bottom: '44px', width: '100%', left: '100%' }

                }, {

                    url: 'sub3.html',

                    id: 'sub3.html',

                    styles: { top: '44px', bottom: '44px', width: '100%', left: '200%' }

                }, {

                    url: 'sub4.html',

                    id: 'sub4.html',

                    styles: { top: '44px', bottom: '44px', width: '100%', left: '300%' }

                }]

            });

            mui.ready(function(){

                h('#nava1').tap(function() {

                    mui.toast('123');

                    console.log(11);

                });

                h('#nava2').tap(function() {

                    mui.toast('456');

                });

            });   //用h.js时 放在上面要加mui.ready,放在下面就不用

        </script>

    </head>

    <body>

        <header class="mui-bar mui-bar-nav">

            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

            <h1 class="mui-title">标题</h1>

        </header>

        <nav class="mui-bar mui-bar-tab">

            <a class="mui-tab-item mui-active" id="nava1">

                <span class="mui-icon mui-icon-home"></span>

                <span class="mui-tab-label">首页</span>

            </a>

            <a class="mui-tab-item" id="nava2">

                <span class="mui-icon mui-icon-phone"></span>

                <span class="mui-tab-label">电话</span>

            </a>

            <a class="mui-tab-item" id="nava3">

                <span class="mui-icon mui-icon-email"></span>

                <span class="mui-tab-label">邮件</span>

            </a>

            <a class="mui-tab-item" id="nava4">

                <span class="mui-icon mui-icon-gear"></span>

                <span class="mui-tab-label">设置</span>

            </a>

        </nav>

    </body>

</html>

MUI --- h.js无效的更多相关文章

  1. 偏前端 - div+mui+vue.js 制作问卷调查单页 ——题目答案由后台随机给出10道

    封装的ajax获取数据.代码可能有些是多余的,没做处理!!点击提交后有弹框,在这里我没有贴出来.第一次写博客,这些也是别人教我的,经理解后,贴出来于大家分享 ——html—— <script t ...

  2. Nginx启用Gzip压缩js无效的原因

    Nginx启用gzip很简单,只需要设置一下配置文件即可完成,可以参考文章Nginx如何配置Gzip压缩功能.不过,在群里常有人提到,他们的网站Gzip压缩虽然成功了,但检测到JS仍然没有压缩成功,这 ...

  3. MUI 里js动态添加数字输入框后，增加、减少按钮无效

    numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...

  4. mui H5 js动态添加不同类型的数据

    html页面需要添加的页面的数据格式 <ul class="mui-table-view" id="OA_task_1"> <li class ...

  5. LayUI加载js无效问题

    在部署系统的时候,本地调试一切正常,layer.js均能正常加载.然而部署到服务器之后,经常性的出现layer.js无法加载问题.导致页面弹框无法使用. 一开始以为是Google浏览器问题,因为刚刚更 ...

  6. vue项目中引入mui.poppicker.js文件时报错“Uncaught ReferenceError: mui is not defined”

    解决:在mui.js的源文件后最后加上 window.mui = mui;

  7. mui longtap 事件无效

    1.mui  的部分事件默认是关闭的 需要在init中单独配置事件开关 mui.init({ gestureConfig: { longtap: true, //默认为false } })

  8. mui.min.js:7 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load

    mui框架做的微信公众号网页,在上传数据的时候报了这个错,async: true,//将false改为true就可以了 https://blog.csdn.net/liuzp111/article/d ...

  9. js依赖mui.css生成图片验证码

    js依赖mui.css生成图片验证码 相关css和js引入路径 https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/css/mui.css https:/ ...

随机推荐

  1. [javascript]编码&i字符串格式化&nput历史记录&清空模态框

    js中编码问题 https://www.haorooms.com/post/js_escape_encodeURIComponent 我在前端js添加时候创建dom时候,有汉字,发现是乱码就研究了下 ...

  2. openstack部署心得

    官方文档:https://docs.openstack.org/ 个别版本有中文 不要轻易尝试最新版本 新版本刚推出一般存在不少BUG或者文档没有更新,按照文档配置就是不能成功.推荐尝试最新版本的上一 ...

  3. [LeetCode] 832. Flipping an Image_Easy

    Given a binary matrix A, we want to flip the image horizontally, then invert it, and return the resu ...

  4. TCP状态转换图、滑动窗口、半连接状态、2MSL

    一.TCP状态转换图 下图对排除和定位网络或系统故障时大有帮助,也帮助我们更好的编写Linux程序,对嵌入式开发也有指导意义.    先回顾一下TCP建立连接的三次握手过程,以及关闭连接的四次握手过程 ...

  5. sql怎么批量替换字段里的字符串的

    方法一:varchar和nvarchar类型是支持replace,所以如果你的text不超过8000可以先转换成前面两种类型再使用replace 替换 text ntext 数据类型字段的语句 . 1 ...

  6. Code Blocks+gtest环境配置

    本文仅介绍Code::Blocks+gtest环境配置,gtest具体使用方法请参考: 玩转Google开源C++单元测试框架Google Test系列(gtest)(总) http://www.cn ...

  7. JVM内存分布

    参考引用文章地址: http://hllvm.group.iteye.com/group/wiki/3053-JVMhttp://blog.csdn.net/william001zs/article/ ...

  8. Linux基础命令---comm

    comm 逐行比较两个已经排序过的文件.结果以3列显示:第1列显示只在file1出现的内容,第2列显示只在file2出现的内容,第3列显示同时出现的内容. 此命令的适用范围:RedHat.RHEL.U ...

  9. python3.4学习笔记(四) 3.x和2.x的区别，持续更新

    python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...

  10. Cannot find JRE '1.8'