1)引入mui.min.css,然后引入mui.picker.min.css            注意这个mui.picker.min.css  与 mui.picker.css  不一样 2)引入mui.min.js,然后引入mui.picker.min.js                  注意这个mui.picker.min.js  与 mui.picker.js  不一样 3)加入以下代码: HTML: <div id="触发修改时间的对象的类" class=&quo

MUI地址:http://dev.dcloud.net.cn/mui/ 首先引入相关JS CSS脚本. HTML代码: <input class="dt flat" style="width:200px;" value='2018-05-16 19:00' type="text"> 然后给class为dt增加JS事件 <script> $(".dt").on('tap', function () { t

1)引入mui.min.css 2)引入mui.min.js  引入mui.view.js 1.HTML: //这是页面的主体结构 <div id="app" class="mui-views"> <div class="mui-view"> <div class="mui-navbar"></div> <div class="mui-pages">

mui切换选项卡头目对应选项内容是webAPP应用最多的功能 引入mui文件: 引入mui-segmented-control类实现顶部头目: 引入mui-content-padded类加入各选项卡内容: 注:segmentControl中a标签的href是与content-padded内各个mui-control-content的id对应 效果如图:

导读:添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,通过mui.fire()方法可触发目标窗口的自定义事件. 监听自定义事件 添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下: window.addEventListener('customEvent',function(event){  //通过event.detail可获得传递过来的参数内容    .... }); 触发自定义事件 通过mui.fire()方法可触发目标窗口的自

前台最终呈现的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no&quo

手机实现窗体切换 1.在5+环境下(即H5app) 先初始化: mui.init({ subpages:[{ url:"page1.html",//子页面HTML地址,支持本地地址和网络地址 id:"subpage1",//子页面标志 styles:{ top:40,//子页面顶部位置 /*bottom:subpage-bottom-position,//子页面底部位置 width:subpage-width,//子页面宽度,默认为100% height:subpa

做到 是大屏项目,用的websocket,在浏览器切换标签窗口后,过了一段时间回来,页面会非常卡,所以想页面切回来的时候刷新页面,找到了这个方法,这是原来的例子.这段代码可以自己复制去做下测试 var normal_title; document.addEventListener('visibilitychange',function(){ //浏览器切换事件 if(document.visibilityState=='hidden') { //状态判断 normal_title=documen

工作上遇到一个问题 手机移动端app,采用mui框架,要求左边是手机号码,右边是switch开关,并且点击标题的时候,可以展开下面人员的基本信息. 采用了折叠面板. 先上图如下: 开始时出现的问题是:点击右侧开关按钮,也会联动把基本信息打开,不想这样,想要点击开关按钮与折叠面板没有关系,就需要取消点击冒泡操作: 关键代码如下 <ul class="mui-table-view"> <li class="mui-table-view-cell mui-coll

mui是前端框架但是很多人用它写移动端 那么mui底部切换是怎么做到的呢? 如何点击某个tab来切换不同的页面? 解答: 1首先我们需要引入mui框架的底部tab元素 代码如下 <!--table菜单开始-->        <nav class="mui-bar mui-bar-tab">            <a href="index.html" class="mui-tab-item mui-active"

用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会遇到,html代码中未引用mui的组件代码段,但依然会导致a标签默认跳转失效的问题(mui一般用于移动端) 在实际项目使用中,我总结了以下几种方法: ①:直接使用js或jq获取要点击的元素,并绑定相应的点击事件,然后在用window.location.href进行跳转,如下代码: $(functio

项目是vue写的(移动端) <div class="mui-scroll"> <a :href="bannerinfo.activity_url" class="icon play"> 链接点击没反应(点元素的最左边才会跳转) </a> <a :href="'tel:'+item.ac_mobile"> {{item.ac_mobile}} 电话号码点击没反应(点元素的最左边才会

zepto.js和mui一起使用的时候,因为都有tap事件绑定tab事件后会多次触发还会报错,这时不引用zepto中的touch.js就可以了,只用mui的tap相关事件. $(function () { //mui初始化配置,设置需要的事件为true就可使用了 mui.init({ gestureConfig: { tap: true, //默认为true doubletap: true, //默认为false longtap: true, //默认为false //swipe: true,

目录(?)[+]   1.picker(选择器) mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现.*poppicker组件依赖mui.picker.js/.css mui.poppicker.js/.css请务必在mui.js/css后中引用,也可统一引用 压缩版本:mui.picker.min.js (1).popPicker 适用于弹出单级或多级选择器 a.通过new mui.PopPicker()

话说mui这个框架的UI确实挺好看的(个人觉得)所以项目使用了他,结果里面的坑太TM多,不得不说MUI做东西太不用心了,社区不活跃,提问都没人管!; mui第一个坑: 日期选择器默认值无效:使用代码跟踪找到里面实现的方法,里面方法确实没毛病,但是callback不会执行!比如设置日期选择器默认值; picker.setSelectedValue("2018-06-06") 你会惊奇的发现:只是设置了年份的默认值 代码: changeDate: function () { let opt

参考整理自MUI官网 http://dev.dcloud.net.cn/mui/ui/ (1)numbox(数字输入框) mui提供了数字输入框控件,可直接输入数字,也可以点击“+”.“-”按钮变换当前数值:默认numbox控件dom结构比较简单,如下: <div class="mui-numbox"> <!-- "-"按钮,点击可减小当前数值 --> <button class="mui-btn mui-numbox-btn

WebView(网络视图)能加载显示网页,可以将其视为一个浏览器,webview被封装在html5+,plus对象中,底层由java,OC实现. 先来谈谈我对webview的理解: 使用mui开发的app,其实是在做web前端开发,打开的webview是网页,用js+html+css替代了原来的xml+java activity的传统android开发模式,h5最终性能相对原生一定是降低了很多(主要原因不在webkit的解析速度,而是最终所有的ui和业务逻辑还是会转化为android sdk交由

MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完整的语法提示和代码输入法.代码块等,大幅提升HTML .JS.css的开发效率.  01-初识MUI   MUI 有以下两大亮点: 一.轻量 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征: MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 二.原

出框框 js内容 mui(".mui-popover").popover('toggle');         点击“弹出框框”就会弹出这个有class="mui-popover"的窗口,点除了窗口的其他位置就隐藏,注意这个窗口一定要写在header之外 此外,mui(".classname").popover("hide");隐藏classname的内容        mui(".classname").

HBuilder的webview操作 webviewAPI文档:http://www.html5plus.org/doc/zh_cn/webview.html 创建新的webview窗口: WebviewObject plus.webview.create( url, id, styles, extras ); 说明:创建Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后需要调用show方法才能将Webview窗口显示出来. 显示Webvie