Skip to content

M
mui
Commit 3a039738 authored by hbcui1984's avatar hbcui1984
Browse files
Options

修改radio/checkbox的disabled样式

parent 38f8d241
Show whitespace changes
Inline Side-by-side
Showing with 185 additions and 217 deletions
dist/css/mui.css
View file @ 3a039738
......@@ -2240,12 +2240,15 @@ select:focus {
border: 0;
outline: 0 !important;
}
.mui-radio input[type="radio"][disabled]:before, .mui-checkbox input[type="checkbox"][disabled]:before {
opacity: .3;
}
.mui-radio input[type="radio"]:before, .mui-checkbox input[type="checkbox"]:before {
font-family: Muiicons;
font-size: 28px;
font-weight: normal;
line-height: 1;
color: rgba(170, 170, 170, .6);
color: #aaa;
text-decoration: none;
background: none;
border-radius: 0;
......@@ -2256,6 +2259,10 @@ select:focus {
color: #007aff;
}
.mui-radio.mui-disabled label, .mui-radio label.mui-disabled, .mui-checkbox.mui-disabled label, .mui-checkbox label.mui-disabled {
opacity: .4;
}
.mui-radio input[type="radio"]:before {
content: "\e411";
}
......@@ -3276,18 +3283,18 @@ select:focus {
}
.mui-numbox .mui-numbox-input {
display: inline-block;
width: 100%;
width: 100% !important;
height: 100%;
padding: 0 3px;
padding: 0 3px !important;
margin: 0;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
word-break: normal;
border: none;
border-right: solid 1px #ccc;
border-left: solid 1px #ccc;
border-radius: 0;
border: none !important;
border-right: solid 1px #ccc !important;
border-left: solid 1px #ccc !important;
border-radius: 0 !important;
}
.mui-input-row .mui-numbox {
......
dist/css/mui.min.css
View file @ 3a039738
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 3a039738
......@@ -987,7 +987,7 @@ var mui = (function(document, undefined) {
* @returns {undefined}
*/
$.fn.on = function(event, selector, callback) {
this.each(function() {
return this.each(function() {
var element = this;
element.addEventListener(event, function(e) {
var delegates = $.qsa(selector, element);
......@@ -998,6 +998,9 @@ var mui = (function(document, undefined) {
break;
}
if (target && ~delegates.indexOf(target)) {
if (~['click', 'tap', 'doubletap', 'longtap', 'hold'].indexOf(event) && (target.disabled || target.classList.contains('mui-disabled'))) {
break;
}
if (!e.detail) {
e.detail = {
currentTarget: target
......@@ -1010,10 +1013,12 @@ var mui = (function(document, undefined) {
}
}
});
if (event === 'tap') {
////避免多次on的时候重复绑定
element.removeEventListener($.EVENT_CLICK, preventDefault);
//click event preventDefault
element.addEventListener($.EVENT_CLICK, preventDefault);
}
});
};
var preventDefault = function(e) {
......@@ -1880,7 +1885,7 @@ var mui = (function(document, undefined) {
var parent = wobj.parent();
if (parent) {
parent.evalJS('mui&&mui.back();');
}else{
} else {
wobj.canBack(function(e) {
//by chb 暂时注释，在碰到类似popover之类的锚点的时候，需多次点击才能返回；
if (e.canBack) { //webview history back
......@@ -1910,7 +1915,7 @@ var mui = (function(document, undefined) {
$.menu = function() {
var menu = document.querySelector('.mui-action-menu');
if (menu) {
$.trigger(menu, 'touchstart');//临时处理menu无touchstart的话，找不到当前targets的问题
$.trigger(menu, 'touchstart'); //临时处理menu无touchstart的话，找不到当前targets的问题
$.trigger(menu, 'tap');
} else { //执行父窗口的menu
if (window.plus) {
......@@ -1922,17 +1927,27 @@ var mui = (function(document, undefined) {
}
}
};
//默认监听
$.plusReady(function() {
if ($.options.keyEventBind.backbutton) {
plus.key.addEventListener('backbutton', $.back, false);
}
if ($.options.keyEventBind.menubutton) {
plus.key.addEventListener('menubutton', $.menu, false);
}
});
//处理按键监听事件
$.registerInit({
name: 'keyEventBind',
index: 1000,
handle: function() {
$.plusReady(function() {
if ($.options.keyEventBind.backbutton) {
plus.key.addEventListener('backbutton', $.back, false);
//如果不为true，则移除默认监听
if (!$.options.keyEventBind.backbutton) {
plus.key.removeEventListener('backbutton', $.back);
}
if ($.options.keyEventBind.menubutton) {
plus.key.addEventListener('menubutton', $.menu, false);
if (!$.options.keyEventBind.menubutton) {
plus.key.removeEventListener('menubutton', $.menu);
}
});
}
......@@ -2133,7 +2148,7 @@ var mui = (function(document, undefined) {
headers[name.toLowerCase()] = [name, value];
};
var protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol;
var xhr = settings.xhr(protocol);
var xhr = settings.xhr(settings);
var nativeSetHeader = xhr.setRequestHeader;
var abortTimeout;
......@@ -2276,14 +2291,26 @@ var mui = (function(document, undefined) {
* 5+ ajax
*/
(function($) {
var originAnchor = document.createElement('a');
originAnchor.href = window.location.href;
$.plusReady(function() {
$.ajaxSettings = $.extend($.ajaxSettings, {
xhr: function(protocol) {
if (protocol === 'file:') { //本地文件使用标准XMLHttpRequest
return new window.XMLHttpRequest();
xhr: function(settings) {
if (settings.crossDomain) { //强制使用plus跨域
return new plus.net.XMLHttpRequest();
}
//仅在webview的url为远程文件，且ajax请求的资源不同源下使用plus.net.XMLHttpRequest
if (originAnchor.protocol !== 'file:') {
var urlAnchor = document.createElement('a');
urlAnchor.href = settings.url;
urlAnchor.href = urlAnchor.href;
settings.crossDomain = (originAnchor.protocol + '//' + originAnchor.host) !== (urlAnchor.protocol + '//' + urlAnchor.host);
if (settings.crossDomain) {
return new plus.net.XMLHttpRequest();
}
}
return new window.XMLHttpRequest();
}
});
});
})(mui);
......@@ -3854,7 +3881,7 @@ var mui = (function(document, undefined) {
return this.pages[slideNumber][0];
},
_gotoItem: function(slideNumber, time) {
this.currentPage = this._getPage(slideNumber);
this.currentPage = this._getPage(slideNumber, true); //此处传true。可保证程序切换时，动画与人手操作一致(第一张，最后一张的切换动画)
this.scrollTo(this.currentPage.x, 0, time, this.options.bounceEasing);
if (time === 0) {
$.trigger(this.wrapper, 'scrollend', this);
......@@ -3909,7 +3936,7 @@ var mui = (function(document, undefined) {
if (!this.classList.contains(CLASS_SLIDER)) {
sliderElement = this.querySelector('.' + CLASS_SLIDER);
}
if (sliderElement) {
if (sliderElement && sliderElement.querySelector(SELECTOR_SLIDER_ITEM)) {
var id = sliderElement.getAttribute('data-slider');
if (!id) {
id = ++$.uuid;
......@@ -4210,11 +4237,13 @@ var mui = (function(document, undefined) {
}
},
refresh: function(offCanvas) {
this.classList.remove(CLASS_ACTIVE);
// offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
this.scroller.classList.remove(CLASS_TRANSITIONING);
this.scroller.setAttribute('style', '');
// !offCanvas && this.scroller.classList.remove(CLASS_TRANSITIONING);
// !offCanvas && this.scroller.setAttribute('style', '');
this.offCanvasLefts = this.wrapper.querySelectorAll('.' + CLASS_OFF_CANVAS_LEFT);
this.offCanvasRights = this.wrapper.querySelectorAll('.' + CLASS_OFF_CANVAS_RIGHT);
if (offCanvas) {
if (offCanvas.classList.contains(CLASS_OFF_CANVAS_LEFT)) {
this.offCanvasLeft = offCanvas;
......@@ -4230,16 +4259,16 @@ var mui = (function(document, undefined) {
if (this.offCanvasRight) {
this.offCanvasRightWidth = this.offCanvasRight.offsetWidth;
this.offCanvasRightSlideIn = this.slideIn && (this.offCanvasRight.parentNode === this.wrapper);
this.offCanvasRight.classList.remove(CLASS_TRANSITIONING);
this.offCanvasRight.classList.remove(CLASS_ACTIVE);
this.offCanvasRight.setAttribute('style', '');
// this.offCanvasRight.classList.remove(CLASS_TRANSITIONING);
// this.offCanvasRight.classList.remove(CLASS_ACTIVE);
// this.offCanvasRight.setAttribute('style', '');
}
if (this.offCanvasLeft) {
this.offCanvasLeftWidth = this.offCanvasLeft.offsetWidth;
this.offCanvasLeftSlideIn = this.slideIn && (this.offCanvasLeft.parentNode === this.wrapper);
this.offCanvasLeft.classList.remove(CLASS_TRANSITIONING);
this.offCanvasLeft.classList.remove(CLASS_ACTIVE);
this.offCanvasLeft.setAttribute('style', '');
// this.offCanvasLeft.classList.remove(CLASS_TRANSITIONING);
// this.offCanvasLeft.classList.remove(CLASS_ACTIVE);
// this.offCanvasLeft.setAttribute('style', '');
}
this.backdrop = this.scroller.querySelector('.' + CLASS_ACTION_BACKDEOP);
......@@ -4460,7 +4489,13 @@ var mui = (function(document, undefined) {
this.rightShowing = false;
if (x > 0) {
if (this.offCanvasLeft) {
$.each(this.offCanvasLefts, function(index, offCanvas) {
if (offCanvas === this.offCanvasLeft) {
this.offCanvasLeft.style.zIndex = 0;
} else {
offCanvas.style.zIndex = -1;
}
}.bind(this));
}
if (this.offCanvasRight) {
this.offCanvasRight.style.zIndex = -1;
......@@ -4470,7 +4505,14 @@ var mui = (function(document, undefined) {
this.rightShowing = true;
this.leftShowing = false;
if (this.offCanvasRight) {
this.offCanvasRight.style.zIndex = 0;
$.each(this.offCanvasRights, function(index, offCanvas) {
console.log(offCanvas === this.offCanvasRight);
if (offCanvas === this.offCanvasRight) {
offCanvas.style.zIndex = 0;
} else {
offCanvas.style.zIndex = -1;
}
}.bind(this));
}
if (this.offCanvasLeft) {
this.offCanvasLeft.style.zIndex = -1;
......@@ -4526,11 +4568,11 @@ var mui = (function(document, undefined) {
}
} else {
if (direction === 'left') {
shown = this.offCanvasLeft && this.offCanvasLeft.classList.contains(CLASS_ACTIVE);
shown = this.classList.contains(CLASS_ACTIVE) && this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE);
} else if (direction === 'right') {
shown = this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE);
shown = this.classList.contains(CLASS_ACTIVE) && this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE);
} else {
shown = (this.offCanvasLeft && this.offCanvasLeft.classList.contains(CLASS_ACTIVE)) || (this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE));
shown = this.classList.contains(CLASS_ACTIVE) && (this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE) || this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE));
}
}
return shown;
......@@ -4538,7 +4580,7 @@ var mui = (function(document, undefined) {
close: function() {
this._initOffCanvasVisible();
if (this.slideIn) {
this.scroller = this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE) ? this.offCanvasRight : this.offCanvasLeft;
this.scroller = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE) || this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE);
}
if (this.scroller) {
this.scroller.classList.add(CLASS_TRANSITIONING);
......@@ -4548,7 +4590,7 @@ var mui = (function(document, undefined) {
show: function(direction) {
this._initOffCanvasVisible();
if (this.isShown(direction)) {
return;
return false;
}
if (!direction) {
direction = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT) ? 'right' : 'left';
......@@ -4560,6 +4602,7 @@ var mui = (function(document, undefined) {
this.scroller.classList.add(CLASS_TRANSITIONING);
this.openPercentage(direction === 'left' ? 100 : -100);
}
return true;
},
toggle: function(directionOrOffCanvas) {
var direction = directionOrOffCanvas;
......@@ -4567,10 +4610,8 @@ var mui = (function(document, undefined) {
direction = directionOrOffCanvas.classList.contains(CLASS_OFF_CANVAS_LEFT) ? 'left' : 'right';
this.refresh(directionOrOffCanvas);
}
if (this.isShown(direction)) {
if (!this.show(direction)) {
this.close();
} else {
this.show(direction);
}
}
});
......@@ -4596,7 +4637,6 @@ var mui = (function(document, undefined) {
var container = findOffCanvasContainer(offcanvas);
if (container) {
$.targets._container = container;
event.preventDefault(); //fixed hashchange
return offcanvas;
}
}
......@@ -4621,6 +4661,7 @@ var mui = (function(document, undefined) {
var target = e.target;
for (; target && target !== document; target = target.parentNode) {
if (target.tagName === 'A' && target.hash && target.hash === ('#' + $.targets.offcanvas.id)) {
e.detail.gesture.preventDefault(); //fixed hashchange
$($.targets._container).offCanvas().toggle($.targets.offcanvas);
$.targets.offcanvas = $.targets._container = null;
break;
......@@ -4697,7 +4738,6 @@ var mui = (function(document, undefined) {
if (target.tagName === 'A' && target.hash) {
var modal = document.getElementById(target.hash.replace('#', ''));
if (modal && modal.classList.contains(CLASS_MODAL)) {
event.preventDefault(); //fixed hashchange
return modal;
}
}
......@@ -4715,6 +4755,7 @@ var mui = (function(document, undefined) {
window.addEventListener('tap', function(event) {
if ($.targets.modal) {
event.detail.gesture.preventDefault(); //fixed hashchange
$.targets.modal.classList.toggle('mui-active');
}
});
......@@ -4746,7 +4787,6 @@ var mui = (function(document, undefined) {
if (target.tagName === 'A' && target.hash) {
$.targets._popover = document.getElementById(target.hash.replace('#', ''));
if ($.targets._popover && $.targets._popover.classList.contains(CLASS_POPOVER)) {
event.preventDefault(); //fixed hashchange
return target;
} else {
$.targets._popover = null;
......@@ -4821,6 +4861,7 @@ var mui = (function(document, undefined) {
}
}
if (toggle) {
e.detail.gesture.preventDefault(); //fixed hashchange
togglePopover($.targets._popover, $.targets.popover);
}
......@@ -5241,7 +5282,7 @@ var mui = (function(document, undefined) {
});
$.fn.switch = function(options) {
$.fn['switch'] = function(options) {
var switchApis = [];
this.each(function() {
var switchApi = null;
......@@ -5258,7 +5299,7 @@ var mui = (function(document, undefined) {
return switchApis.length > 1 ? switchApis : switchApis[0];
};
$.ready(function() {
$('.' + CLASS_SWITCH).switch();
$('.' + CLASS_SWITCH)['switch']();
});
})(mui, window, 'toggle');
/**
......@@ -6044,6 +6085,7 @@ var mui = (function(document, undefined) {
Input.prototype.speechActionClick = function(event) {
if (window.plus) {
var self = this;
var oldValue = self.element.value;
self.element.value = '';
document.body.classList.add(CLASS_FOCUSIN);
plus.speech.startRecognize({
......@@ -6055,6 +6097,10 @@ var mui = (function(document, undefined) {
$.trigger(self.element, 'recognized', {
value: self.element.value
});
if (oldValue !== self.element.value) {
$.trigger(self.element, 'change');
$.trigger(self.element, 'input');
}
// document.body.classList.remove(CLASS_FOCUSIN);
}, function(e) {
document.body.classList.remove(CLASS_FOCUSIN);
......
dist/js/mui.min.js
View file @ 3a039738
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/mui.min.css
View file @ 3a039738
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/checkbox.html
View file @ 3a039738
......@@ -38,7 +38,7 @@
<label>checkbox</label>
<input name="checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox mui-left">
<div class="mui-input-row mui-checkbox mui-left mui-disabled">
<label>disabled checkbox</label>
<input name="checkbox" type="checkbox" disabled="disabled">
</div>
......@@ -55,7 +55,7 @@
<label>checkbox</label>
<input name="checkbox1" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox">
<div class="mui-input-row mui-checkbox mui-disabled">
<label>disabled checkbox</label>
<input name="checkbox1" type="checkbox" disabled="disabled">
</div>
......
examples/hello-mui/examples/radio.html
View file @ 3a039738
......@@ -40,7 +40,7 @@
<label>radio</label>
<input name="radio1" type="radio" checked>
</div>
<div class="mui-input-row mui-radio mui-left">
<div class="mui-input-row mui-radio mui-left mui-disabled">
<label>disabled radio</label>
<input name="radio1" type="radio" disabled="disabled">
</div>
......@@ -58,7 +58,7 @@
<label>radio</label>
<input name="radio1" type="radio" checked>
</div>
<div class="mui-input-row mui-radio">
<div class="mui-input-row mui-radio mui-disabled">
<label>disabled radio</label>
<input name="radio1" type="radio" disabled="disabled">
</div>
......
examples/hello-mui/examples/setting.html
View file @ 3a039738
......@@ -28,7 +28,7 @@
height: 100%;
background-color: #efeff4;
}
.mui-pages{
.mui-pages {
top: 46px;
height: auto;
}
......@@ -36,7 +36,6 @@
.mui-scroll {
background-color: #efeff4;
}
.mui-page.mui-transitioning {
-webkit-transition: -webkit-transform 200ms ease;
transition: transform 200ms ease;
......@@ -102,6 +101,7 @@
width: 1px;
background-color: rgba(0, 0, 0);
}*/
.mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
......@@ -140,6 +140,7 @@
</head>
<body>
<!--页面主结构开始-->
<div id="app" class="mui-views">
<div class="mui-view">
<div class="mui-navbar">
......@@ -148,13 +149,18 @@
</div>
</div>
</div>
<!--页面主结构结束-->
<!--单页面开始-->
<div id="setting" class="mui-page">
<!--页面标题栏开始-->
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>
</button>
<h1 class="mui-center mui-title">设置</h1>
</div>
<!--页面标题栏结束-->
<!--页面主内容区开始-->
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
......@@ -176,7 +182,7 @@
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于微信</a>
<a href="#about" class="mui-navigate-right">关于MUI</a>
</li>
</ul>
<ul class="mui-table-view">
......@@ -187,7 +193,9 @@
</div>
</div>
</div>
<!--页面主内容区结束-->
</div>
<!--单页面结束-->
<div id="account" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
......@@ -200,7 +208,7 @@
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a>微信号<span class="mui-pull-right">xxxxxx</span></a>
<a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li>
</ul>
<ul class="mui-table-view">
......@@ -211,18 +219,7 @@
<a>手机号<span class="mui-pull-right">18601234567</span></a>
</li>
<li class="mui-table-view-cell">
<a>邮箱地址<span class="mui-pull-right">xxx@xxx.com</span></a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a>微信密码</a>
</li>
<li class="mui-table-view-cell">
<a>账号保护</a>
</li>
<li class="mui-table-view-cell">
<a>微信安全中心</a>
<a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li>
</ul>
</div>
......@@ -247,16 +244,23 @@
<ul class="mui-table-view">
<li class="mui-table-view-cell">
通知显示消息详情
<div class="mui-switch mui-active">
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div class="mui-content-padded">
<p>若关闭，当收到新消息时，通知提示将不显示发信人和内容摘要</p>
</div>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#notifications_disturb" class="mui-navigate-right">功能消息免打扰</a>
</li>
</ul>
<div class="mui-content-padded">
<p>设置系统功能消息提示声音和震动的时段</p>
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
......@@ -265,25 +269,21 @@
<ul class="mui-table-view">
<li class="mui-table-view-cell">
声音
<div class="mui-switch mui-active">
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
震动
<div class="mui-switch mui-active">
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
朋友圈照片更新
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
<div class="mui-content-padded">
<p>当HelloMUI在运行时，你可以设置是否需要声音或者震动</p>
</div>
</li>
</ul>
<div></div>
</div>
</div>
</div>
......@@ -298,15 +298,15 @@
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<ul class="mui-table-view mui-table-view-radio">
<li class="mui-table-view-cell">
<a>开启</a>
<a class="mui-navigate-right">开启</a>
</li>
<li class="mui-table-view-cell">
<a>只在夜间开启</a>
<a class="mui-navigate-right">只在夜间开启</a>
</li>
<li class="mui-table-view-cell">
<a>关闭</a>
<a class="mui-navigate-right">关闭</a>
</li>
</ul>
</div>
......@@ -327,7 +327,7 @@
<li class="mui-table-view-divider">通讯录</li>
<li class="mui-table-view-cell">
加我为朋友时需要验证
<div class="mui-switch mui-active">
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
......@@ -335,13 +335,13 @@
<ul class="mui-table-view">
<li class="mui-table-view-cell">
向我推荐QQ好友
<div class="mui-switch">
<div class="mui-switch mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
通过QQ号搜索到我
<div class="mui-switch">
<div class="mui-switch mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
......@@ -349,49 +349,28 @@
<ul class="mui-table-view">
<li class="mui-table-view-cell">
可通过手机号搜索到我
<div class="mui-switch mui-active">
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
向我推荐通讯录朋友
<div class="mui-switch">
<div class="mui-switch mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-divider">开启后，为你推荐已经开通微信的手机联系人</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
通过微信号搜索到我
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-divider">关闭后，其他用户将不能通过微信号搜索到你</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a>通讯录黑名单</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-divider">朋友圈</li>
<li class="mui-table-view-cell">
<a>不让他(她)看我的朋友圈</a>
</li>
<li class="mui-table-view-cell">
<a>不看他(她)的朋友圈</a>
</li>
<li class="mui-table-view-divider">开启后，为你推荐已经开通HBuilder的手机联系人</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
允许陌生人查看十张照片
<div class="mui-switch">
通过HBuilder账号搜索到我
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-divider">关闭后，其他用户将不能通过HBuilder号搜索到你</li>
</ul>
</div>
</div>
</div>
......@@ -411,24 +390,11 @@
多语言
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
字体大小
</li>
<li class="mui-table-view-cell">
<a href="#general_bg" class="mui-navigate-right">聊天背景</a>
</li>
<li class="mui-table-view-cell">
我的背景
</li>
<li class="mui-table-view-cell">
<a href="#general_video" class="mui-navigate-right">朋友圈小视频</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
听筒模式
<div class="mui-switch">
<div class="mui-switch mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
......@@ -438,94 +404,24 @@
功能
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
聊天记录迁移
</li>
<li class="mui-table-view-cell">
清理微信存储空间
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell" style="text-align: center;">
清空聊天记录
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="general_bg" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>通用
</button>
<h1 class="mui-center mui-title">聊天背景</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
选择背景图
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
从手机相册选择
</li>
<li class="mui-table-view-cell">
拍一张
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell" style="text-align: center;">
将背景应用到所有聊天背景
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="general_video" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>通用
</button>
<h1 class="mui-center mui-title">朋友圈小视频</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-divider">朋友圈自动播放小视频</li>
<li class="mui-table-view-cell">
<a>3G/4G和Wi-Fi</a>
</li>
<li class="mui-table-view-cell">
<a>仅Wi-Fi</a>
</li>
<li class="mui-table-view-cell">
<a>关闭</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="about" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>设置
</button>
<h1 class="mui-center mui-title">关于微信</h1>
<h1 class="mui-center mui-title">关于MUI</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
去评分
<a id="rate">去评分</a>
</li>
<li class="mui-table-view-cell">
欢迎页
......@@ -549,12 +445,26 @@
<script src="../js/mui.view.js "></script>
<script>
mui.init();
//初始化单页view
var viewApi = mui('#app').view({
defaultPage: '#setting'
});
//初始化单页的区域滚动
mui('.mui-scroll-wrapper').scroll();
var view = viewApi.view;
(function($) {
//去评分
var rateLinkEl = document.getElementById("rate");
var rateLink = '';
if ($.os.ios) {
rateLink = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?id=682211190&pageNumber=0&sortOrdering=2&type=&mt=8';
} else if ($.os.plus && $.os.android) {
rateLink = 'market://details?id=io.dcloud.HelloMUI';
}
if (rateLink) {
rateLinkEl.classList.add('mui-navigate-right');
rateLinkEl.href = rateLink;
}
//处理view的后退与webview后退
var oldBack = $.back;
$.back = function() {
......
examples/hello-mui/js/mui.min.js
View file @ 3a039738
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/list.html
View file @ 3a039738
......@@ -326,14 +326,19 @@
</li>
<li class="mui-table-view-divider">模板</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/lazyload-image.html">
lazyload（懒加载）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/locker-dom.html">
locker（手势图案锁屏）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/lazyload-image.html">
lazyload（懒加载）
<a class="mui-navigate-right" open-type="common" href="examples/setting.html">
setting（设置）
</a>
</li>
</ul>
......@@ -458,11 +463,11 @@
mui.fire(headerWebview,'updateHeader',{title:title,showMenu:showMenu});
var reload = true;
if (!template.loaded) {
//if (contentWebview.getURL() != this.href) {
if (contentWebview.getURL() != this.href) {
contentWebview.loadURL(this.href);
//} else {
// reload = false;
//}
} else {
reload = false;
}
} else {
reload = false;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment