javascript/weui
1
0
Fork 0
mirror of https://github.com/Tencent/weui.git synced 2026-03-13 08:02:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化example.js，把对应的页面级js挪到对应的html里

Browse Source
This commit is contained in:
bearyan
2016-10-09 17:48:30 +08:00
parent e7cd949332
commit cd575c58cf
8 changed files with 597 additions and 599 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
dist/example/example.js vendored
View File

@@ -170,255 +170,122 @@ $(function () {
}
};
var pages = {}, tpls = $('script[type="text/html"]');
window.home = function(){
location.hash = '';
};
for (var i = 0, len = tpls.length; i < len; ++i) {
var tpl = tpls[i], name = tpl.id.replace(/tpl_/, '');
pages[name] = {
name: name,
url: '#' + name,
template: '#' + tpl.id
function preload(){
$(window).on("load", function(){
var imgList = [
"./images/layers/content.png",
"./images/layers/navigation.png",
"./images/layers/popout.png",
"./images/layers/transparent.gif"
];
for (var i = 0, len = imgList.length; i < len; ++i) {
new Image().src = imgList[i];
}
});
}
function androidInputBugFix(){
// .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
// 相关 issue: https://github.com/weui/weui/issues/15
// 解决方法:
// 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
// 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
// Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
if (/Android/gi.test(navigator.userAgent)) {
window.addEventListener('resize', function () {
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
})
}
}
function setJSAPI(){
$.getJSON('https://weui.io/api/sign?url=' + encodeURIComponent(location.href.split('#')[0]), function (res) {
wx.config({
beta: true,
debug: false,
appId: res.appid,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
// 'setNavigationBarColor',
'setBounceBackground'
]
});
wx.ready(function () {
/*
wx.invoke('setNavigationBarColor', {
color: '#F8F8F8'
});
*/
wx.invoke('setBounceBackground', {
'backgroundColor': '#F8F8F8',
'footerBounceColor' : '#F8F8F8'
});
wx.onMenuShareAppMessage({
title: 'WeUI',
desc: '为微信 Web 服务量身设计',
link: location.href,
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
});
wx.onMenuShareTimeline({
title: 'WeUI, 为微信 Web 服务量身设计',
desc: 'WeUI, 为微信 Web 服务量身设计',
link: "https://weui.io",
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
});
wx.onMenuShareQQ(option);
});
});
}
function setPageManager(){
for (var i = 0, len = tpls.length; i < len; ++i) {
var tpl = tpls[i], name = tpl.id.replace(/tpl_/, '');
pages[name] = {
name: name,
url: '#' + name,
template: '#' + tpl.id
};
}
pages.home.url = '#';
for (var page in pages) {
pageManager.push(pages[page]);
}
pageManager
.setPageAppend(function($html){
var $foot = $html.find('.page__ft');
if($foot.length < 1) return;
if($foot.position().top + $foot.height() < winH){
$foot.addClass('j_bottom');
}else{
$foot.removeClass('j_bottom');
}
})
.setDefault('home')
.init();
}
function init(){
preload();
androidInputBugFix();
setJSAPI();
setPageManager();
window.pageManager = pageManager;
window.home = function(){
location.hash = '';
};
}
pages.home.url = '#';
pages.home.events = {
'.js_item': {
click: function (e) {
var id = $(this).data('id');
pageManager.go(id);
}
},
'.js_category': {
click: function(){
var winH = $(window).height();
var categorySpace = 10;
return function(){
var $this = $(this),
$inner = $this.next('.js_categoryInner'),
$page = $this.parents('.page'),
$parent = $(this).parent('li');
var innerH = $inner.data('height');
if(!innerH){
$inner.css('height', 'auto');
innerH = $inner.height();
$inner.removeAttr('style');
$inner.data('height', innerH);
}
if($parent.hasClass('js_show')){
$parent.removeClass('js_show');
}else{
$parent.siblings().removeClass('js_show');
if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
$page.scrollTop(this.offsetTop + this.offsetHeight + innerH - winH + categorySpace);
}
$parent.addClass('js_show');
}
};
}()
}
};
pages.input.events = {
'#showTooltips': {
click: function () {
var $tooltips = $('.js_tooltips');
if ($tooltips.css('display') != 'none') {
return;
}
// 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$tooltips.css('display', 'block');
setTimeout(function () {
$tooltips.css('display', 'none');
}, 2000);
}
}
};
pages.toast.events = {
'#showToast': {
click: function (e) {
var $toast = $('#toast');
if ($toast.css('display') != 'none') {
return;
}
$toast.fadeIn(100);
setTimeout(function () {
$toast.fadeOut(100);
}, 2000);
}
},
'#showLoadingToast': {
click: function (e) {
var $loadingToast = $('#loadingToast');
if ($loadingToast.css('display') != 'none') {
return;
}
$loadingToast.fadeIn(100);
setTimeout(function () {
$loadingToast.fadeOut(100);
}, 2000);
}
}
};
pages.dialog.events = {
'#showDialog1': {
click: function (e) {
var $dialog = $('#dialog1');
$dialog.fadeIn(200);
$dialog.find('.weui-dialog__btn').one('click', function () {
$dialog.fadeOut(200);
});
}
},
'#showDialog2': {
click: function (e) {
var $dialog = $('#dialog2');
$dialog.fadeIn(200);
$dialog.find('.weui-dialog__btn').one('click', function () {
$dialog.fadeOut(200);
});
}
},
'#showDialog3': {
click: function (e) {
var $dialog = $('#dialog3');
$dialog.fadeIn(200);
$dialog.find('.weui-dialog__btn').one('click', function () {
$dialog.fadeOut(200);
});
}
},
'#showDialog4': {
click: function (e) {
var $dialog = $('#dialog4');
$dialog.fadeIn(200);
$dialog.find('.weui-dialog__btn').one('click', function () {
$dialog.fadeOut(200);
});
}
}
};
pages.progress.events = {
'#btnStartProgress': {
click: function () {
if ($(this).hasClass('weui-btn_disabled')) {
return;
}
$(this).addClass('weui-btn_disabled');
var progress = 0;
var $progress = $('.js_progress');
function next() {
$progress.css({width: progress + '%'});
progress = ++progress % 100;
setTimeout(next, 30);
}
next();
}
}
};
for (var page in pages) {
pageManager.push(pages[page]);
}
pageManager
.setPageAppend(function($html){
var $foot = $html.find('.page__ft');
if($foot.length < 1) return;
if($foot.position().top + $foot.height() < winH){
$foot.addClass('j_bottom');
}else{
$foot.removeClass('j_bottom');
}
})
.setDefault('home')
.init();
$.getJSON('https://weui.io/api/sign?url=' + encodeURIComponent(location.href.split('#')[0]), function (res) {
wx.config({
beta: true,
debug: false,
appId: res.appid,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
// 'setNavigationBarColor',
'setBounceBackground'
]
});
wx.ready(function () {
/*
wx.invoke('setNavigationBarColor', {
color: '#F8F8F8'
});
*/
wx.invoke('setBounceBackground', {
'backgroundColor': '#F8F8F8',
'footerBounceColor' : '#F8F8F8'
});
wx.onMenuShareAppMessage({
title: 'WeUI',
desc: '为微信 Web 服务量身设计',
link: location.href,
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
});
wx.onMenuShareTimeline({
title: 'WeUI, 为微信 Web 服务量身设计',
desc: 'WeUI, 为微信 Web 服务量身设计',
link: "https://weui.io",
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
});
wx.onMenuShareQQ(option);
});
});
// preload
$(window).on("load", function(){
var imgList = [
"./images/layers/content.png",
"./images/layers/navigation.png",
"./images/layers/popout.png",
"./images/layers/transparent.gif"
];
for (var i = 0, len = imgList.length; i < len; ++i) {
new Image().src = imgList[i];
}
});
// .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
// 相关 issue: https://github.com/weui/weui/issues/15
// 解决方法:
// 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
// 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
// Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
if (/Android/gi.test(navigator.userAgent)) {
window.addEventListener('resize', function () {
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
})
}
init();
});

230
dist/example/index.html vendored
View File

@@ -210,6 +210,42 @@
<a href="javascript:home()"><img src="./images/icon_footer.png" /></a>
</div>
</div>
<script type="text/javascript">
$(function(){
var winH = $(window).height();
var categorySpace = 10;
$('.js_item').on('click', function(){
var id = $(this).data('id');
window.pageManager.go(id);
});
$('.js_category').on('click', function(){
var $this = $(this),
$inner = $this.next('.js_categoryInner'),
$page = $this.parents('.page'),
$parent = $(this).parent('li');
var innerH = $inner.data('height');
if(!innerH){
$inner.css('height', 'auto');
innerH = $inner.height();
$inner.removeAttr('style');
$inner.data('height', innerH);
}
if($parent.hasClass('js_show')){
$parent.removeClass('js_show');
}else{
$parent.siblings().removeClass('js_show');
if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
$page.scrollTop(this.offsetTop + this.offsetHeight + innerH - winH + categorySpace);
}
$parent.addClass('js_show');
}
});
});
</script>
</script>
<script type="text/html" id="tpl_button">
<div class="page">
@@ -533,6 +569,23 @@
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
</div>
</div>
<script type="text/javascript">
$(function(){
var $tooltips = $('.js_tooltips');
$('#showTooltips').on('click', function(){
if ($tooltips.css('display') != 'none') return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$tooltips.css('display', 'block');
setTimeout(function () {
$tooltips.css('display', 'none');
}, 2000);
});
});
</script>
</script>
<script type="text/html" id="tpl_toast">
<div class="page">
@@ -567,6 +620,33 @@
</div>
</div>
</div>
<script type="text/javascript">
// toast
$(function(){
var $toast = $('#toast');
$('#showToast').on('click', function(){
if ($toast.css('display') != 'none') return;
$toast.fadeIn(100);
setTimeout(function () {
$toast.fadeOut(100);
}, 2000);
});
});
// loading
$(function(){
var $loadingToast = $('#loadingToast');
$('#showLoadingToast').on('click', function(){
if ($loadingToast.css('display') != 'none') return;
$loadingToast.fadeIn(100);
setTimeout(function () {
$loadingToast.fadeOut(100);
}, 2000);
});
});
</script>
</script>
<script type="text/html" id="tpl_dialog">
<div class="page">
@@ -575,69 +655,96 @@
<p class="page__desc">对话框</p>
</div>
<div class="page__bd page__bd_spacing">
<a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog1">iOS Dialog样式一</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog2">iOS Dialog样式二</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog3">Android Dialog样式一</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog4">Android Dialog样式二</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog1">Android Dialog样式一</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog2">Android Dialog样式二</a>
</div>
<div class="page__ft">
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
</div>
<!--BEGIN dialog1-->
<div id="dialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
<div id="dialogs">
<!--BEGIN dialog1-->
<div class="js_dialog" id="iosDialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
</div>
<!--END dialog1-->
<!--BEGIN dialog2-->
<div id="dialog2" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
<!--END dialog1-->
<!--BEGIN dialog2-->
<div class="js_dialog" id="iosDialog2" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
</div>
</div>
</div>
</div>
<!--END dialog2-->
<!--BEGIN dialog3-->
<div id="dialog3" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-skin_android">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
<div class="weui-dialog__bd">
弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
<!--END dialog2-->
<!--BEGIN dialog3-->
<div class="js_dialog" id="androidDialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-skin_android">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
<div class="weui-dialog__bd">
弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
</div>
<!--END dialog3-->
<!--BEGIN dialog4-->
<div id="dialog4" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-skin_android">
<div class="weui-dialog__bd">
弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
<!--END dialog3-->
<!--BEGIN dialog4-->
<div class="js_dialog" id="androidDialog2" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-skin_android">
<div class="weui-dialog__bd">
弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
<!--END dialog4-->
</div>
<!--END dialog4-->
</div>
<script type="text/javascript">
$(function(){
var $iosDialog1 = $('#iosDialog1'),
$iosDialog2 = $('#iosDialog2'),
$androidDialog1 = $('#androidDialog1'),
$androidDialog2 = $('#androidDialog2');
$('#dialogs').on('click', '.weui-dialog__btn', function(){
$(this).parents('.js_dialog').fadeOut(200);
});
$('#showIOSDialog1').on('click', function(){
$iosDialog1.fadeIn(200);
});
$('#showIOSDialog2').on('click', function(){
$iosDialog2.fadeIn(200);
});
$('#showAndroidDialog1').on('click', function(){
$androidDialog1.fadeIn(200);
});
$('#showAndroidDialog2').on('click', function(){
$androidDialog2.fadeIn(200);
});
});
</script>
</script>
<script type="text/html" id="tpl_progress">
<div class="page">
@@ -673,13 +780,38 @@
</a>
</div>
<div class="weui-btn-area">
<a href="javascript:;" class="weui-btn weui-btn_primary" id="btnStartProgress">上传</a>
<a href="javascript:;" class="weui-btn weui-btn_primary" id="btnUpload">上传</a>
</div>
</div>
<div class="page__ft">
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
</div>
</div>
<script type="text/javascript">
$(function(){
var $progress = $('.js_progress'),
$btnUpload = $('#btnUpload');
var progress = 0;
function next() {
if(progress > 100){
progress = 0;
$btnUpload.removeClass('weui-btn_disabled');
return;
}
$progress.css({width: progress + '%'});
progress = ++progress;
setTimeout(next, 20);
}
$btnUpload.on('click', function(){
if ($btnUpload.hasClass('weui-btn_disabled')) return;
$btnUpload.addClass('weui-btn_disabled');
next();
});
});
</script>
</script>
<script type="text/html" id="tpl_msg">
<div class="page">

363
src/example/example.js
View File

@@ -170,255 +170,122 @@ $(function () {
}
};
var pages = {}, tpls = $('script[type="text/html"]');
window.home = function(){
location.hash = '';
};
for (var i = 0, len = tpls.length; i < len; ++i) {
var tpl = tpls[i], name = tpl.id.replace(/tpl_/, '');
pages[name] = {
name: name,
url: '#' + name,
template: '#' + tpl.id
function preload(){
$(window).on("load", function(){
var imgList = [
"./images/layers/content.png",
"./images/layers/navigation.png",
"./images/layers/popout.png",
"./images/layers/transparent.gif"
];
for (var i = 0, len = imgList.length; i < len; ++i) {
new Image().src = imgList[i];
}
});
}
function androidInputBugFix(){
// .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
// 相关 issue: https://github.com/weui/weui/issues/15
// 解决方法:
// 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
// 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
// Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
if (/Android/gi.test(navigator.userAgent)) {
window.addEventListener('resize', function () {
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
})
}
}
function setJSAPI(){
$.getJSON('https://weui.io/api/sign?url=' + encodeURIComponent(location.href.split('#')[0]), function (res) {
wx.config({
beta: true,
debug: false,
appId: res.appid,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
// 'setNavigationBarColor',
'setBounceBackground'
]
});
wx.ready(function () {
/*
wx.invoke('setNavigationBarColor', {
color: '#F8F8F8'
});
*/
wx.invoke('setBounceBackground', {
'backgroundColor': '#F8F8F8',
'footerBounceColor' : '#F8F8F8'
});
wx.onMenuShareAppMessage({
title: 'WeUI',
desc: '为微信 Web 服务量身设计',
link: location.href,
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
});
wx.onMenuShareTimeline({
title: 'WeUI, 为微信 Web 服务量身设计',
desc: 'WeUI, 为微信 Web 服务量身设计',
link: "https://weui.io",
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
});
wx.onMenuShareQQ(option);
});
});
}
function setPageManager(){
for (var i = 0, len = tpls.length; i < len; ++i) {
var tpl = tpls[i], name = tpl.id.replace(/tpl_/, '');
pages[name] = {
name: name,
url: '#' + name,
template: '#' + tpl.id
};
}
pages.home.url = '#';
for (var page in pages) {
pageManager.push(pages[page]);
}
pageManager
.setPageAppend(function($html){
var $foot = $html.find('.page__ft');
if($foot.length < 1) return;
if($foot.position().top + $foot.height() < winH){
$foot.addClass('j_bottom');
}else{
$foot.removeClass('j_bottom');
}
})
.setDefault('home')
.init();
}
function init(){
preload();
androidInputBugFix();
setJSAPI();
setPageManager();
window.pageManager = pageManager;
window.home = function(){
location.hash = '';
};
}
pages.home.url = '#';
pages.home.events = {
'.js_item': {
click: function (e) {
var id = $(this).data('id');
pageManager.go(id);
}
},
'.js_category': {
click: function(){
var winH = $(window).height();
var categorySpace = 10;
return function(){
var $this = $(this),
$inner = $this.next('.js_categoryInner'),
$page = $this.parents('.page'),
$parent = $(this).parent('li');
var innerH = $inner.data('height');
if(!innerH){
$inner.css('height', 'auto');
innerH = $inner.height();
$inner.removeAttr('style');
$inner.data('height', innerH);
}
if($parent.hasClass('js_show')){
$parent.removeClass('js_show');
}else{
$parent.siblings().removeClass('js_show');
if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
$page.scrollTop(this.offsetTop + this.offsetHeight + innerH - winH + categorySpace);
}
$parent.addClass('js_show');
}
};
}()
}
};
pages.input.events = {
'#showTooltips': {
click: function () {
var $tooltips = $('.js_tooltips');
if ($tooltips.css('display') != 'none') {
return;
}
// 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$tooltips.css('display', 'block');
setTimeout(function () {
$tooltips.css('display', 'none');
}, 2000);
}
}
};
pages.toast.events = {
'#showToast': {
click: function (e) {
var $toast = $('#toast');
if ($toast.css('display') != 'none') {
return;
}
$toast.fadeIn(100);
setTimeout(function () {
$toast.fadeOut(100);
}, 2000);
}
},
'#showLoadingToast': {
click: function (e) {
var $loadingToast = $('#loadingToast');
if ($loadingToast.css('display') != 'none') {
return;
}
$loadingToast.fadeIn(100);
setTimeout(function () {
$loadingToast.fadeOut(100);
}, 2000);
}
}
};
pages.dialog.events = {
'#showDialog1': {
click: function (e) {
var $dialog = $('#dialog1');
$dialog.fadeIn(200);
$dialog.find('.weui-dialog__btn').one('click', function () {
$dialog.fadeOut(200);
});
}
},
'#showDialog2': {
click: function (e) {
var $dialog = $('#dialog2');
$dialog.fadeIn(200);
$dialog.find('.weui-dialog__btn').one('click', function () {
$dialog.fadeOut(200);
});
}
},
'#showDialog3': {
click: function (e) {
var $dialog = $('#dialog3');
$dialog.fadeIn(200);
$dialog.find('.weui-dialog__btn').one('click', function () {
$dialog.fadeOut(200);
});
}
},
'#showDialog4': {
click: function (e) {
var $dialog = $('#dialog4');
$dialog.fadeIn(200);
$dialog.find('.weui-dialog__btn').one('click', function () {
$dialog.fadeOut(200);
});
}
}
};
pages.progress.events = {
'#btnStartProgress': {
click: function () {
if ($(this).hasClass('weui-btn_disabled')) {
return;
}
$(this).addClass('weui-btn_disabled');
var progress = 0;
var $progress = $('.js_progress');
function next() {
$progress.css({width: progress + '%'});
progress = ++progress % 100;
setTimeout(next, 30);
}
next();
}
}
};
for (var page in pages) {
pageManager.push(pages[page]);
}
pageManager
.setPageAppend(function($html){
var $foot = $html.find('.page__ft');
if($foot.length < 1) return;
if($foot.position().top + $foot.height() < winH){
$foot.addClass('j_bottom');
}else{
$foot.removeClass('j_bottom');
}
})
.setDefault('home')
.init();
$.getJSON('https://weui.io/api/sign?url=' + encodeURIComponent(location.href.split('#')[0]), function (res) {
wx.config({
beta: true,
debug: false,
appId: res.appid,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
// 'setNavigationBarColor',
'setBounceBackground'
]
});
wx.ready(function () {
/*
wx.invoke('setNavigationBarColor', {
color: '#F8F8F8'
});
*/
wx.invoke('setBounceBackground', {
'backgroundColor': '#F8F8F8',
'footerBounceColor' : '#F8F8F8'
});
wx.onMenuShareAppMessage({
title: 'WeUI',
desc: '为微信 Web 服务量身设计',
link: location.href,
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
});
wx.onMenuShareTimeline({
title: 'WeUI, 为微信 Web 服务量身设计',
desc: 'WeUI, 为微信 Web 服务量身设计',
link: "https://weui.io",
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
});
wx.onMenuShareQQ(option);
});
});
// preload
$(window).on("load", function(){
var imgList = [
"./images/layers/content.png",
"./images/layers/navigation.png",
"./images/layers/popout.png",
"./images/layers/transparent.gif"
];
for (var i = 0, len = imgList.length; i < len; ++i) {
new Image().src = imgList[i];
}
});
// .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
// 相关 issue: https://github.com/weui/weui/issues/15
// 解决方法:
// 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
// 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
// Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
if (/Android/gi.test(navigator.userAgent)) {
window.addEventListener('resize', function () {
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
})
}
init();
});

125
src/example/fragment/dialog.html
View File

@@ -4,66 +4,93 @@
<p class="page__desc">对话框</p>
</div>
<div class="page__bd page__bd_spacing">
<a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog1">iOS Dialog样式一</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog2">iOS Dialog样式二</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog3">Android Dialog样式一</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog4">Android Dialog样式二</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog1">Android Dialog样式一</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog2">Android Dialog样式二</a>
</div>
<div class="page__ft">
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
</div>
<!--BEGIN dialog1-->
<div id="dialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
<div id="dialogs">
<!--BEGIN dialog1-->
<div class="js_dialog" id="iosDialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
</div>
<!--END dialog1-->
<!--BEGIN dialog2-->
<div id="dialog2" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
<!--END dialog1-->
<!--BEGIN dialog2-->
<div class="js_dialog" id="iosDialog2" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
</div>
</div>
</div>
</div>
<!--END dialog2-->
<!--BEGIN dialog3-->
<div id="dialog3" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-skin_android">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
<div class="weui-dialog__bd">
弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
<!--END dialog2-->
<!--BEGIN dialog3-->
<div class="js_dialog" id="androidDialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-skin_android">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
<div class="weui-dialog__bd">
弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
</div>
<!--END dialog3-->
<!--BEGIN dialog4-->
<div id="dialog4" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-skin_android">
<div class="weui-dialog__bd">
弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
<!--END dialog3-->
<!--BEGIN dialog4-->
<div class="js_dialog" id="androidDialog2" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-skin_android">
<div class="weui-dialog__bd">
弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
<!--END dialog4-->
</div>
<!--END dialog4-->
</div>
</div>
<script type="text/javascript">
$(function(){
var $iosDialog1 = $('#iosDialog1'),
$iosDialog2 = $('#iosDialog2'),
$androidDialog1 = $('#androidDialog1'),
$androidDialog2 = $('#androidDialog2');
$('#dialogs').on('click', '.weui-dialog__btn', function(){
$(this).parents('.js_dialog').fadeOut(200);
});
$('#showIOSDialog1').on('click', function(){
$iosDialog1.fadeIn(200);
});
$('#showIOSDialog2').on('click', function(){
$iosDialog2.fadeIn(200);
});
$('#showAndroidDialog1').on('click', function(){
$androidDialog1.fadeIn(200);
});
$('#showAndroidDialog2').on('click', function(){
$androidDialog2.fadeIn(200);
});
});
</script>

38
src/example/fragment/home.html
View File

@@ -194,4 +194,40 @@
<div class="page__ft">
<a href="javascript:home()"><img src="./images/icon_footer.png" /></a>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var winH = $(window).height();
var categorySpace = 10;
$('.js_item').on('click', function(){
var id = $(this).data('id');
window.pageManager.go(id);
});
$('.js_category').on('click', function(){
var $this = $(this),
$inner = $this.next('.js_categoryInner'),
$page = $this.parents('.page'),
$parent = $(this).parent('li');
var innerH = $inner.data('height');
if(!innerH){
$inner.css('height', 'auto');
innerH = $inner.height();
$inner.removeAttr('style');
$inner.data('height', innerH);
}
if($parent.hasClass('js_show')){
$parent.removeClass('js_show');
}else{
$parent.siblings().removeClass('js_show');
if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
$page.scrollTop(this.offsetTop + this.offsetHeight + innerH - winH + categorySpace);
}
$parent.addClass('js_show');
}
});
});
</script>

19
src/example/fragment/input.html
View File

@@ -196,4 +196,21 @@
<div class="page__ft">
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $tooltips = $('.js_tooltips');
$('#showTooltips').on('click', function(){
if ($tooltips.css('display') != 'none') return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$tooltips.css('display', 'block');
setTimeout(function () {
$tooltips.css('display', 'none');
}, 2000);
});
});
</script>

29
src/example/fragment/progress.html
View File

@@ -31,10 +31,35 @@
</a>
</div>
<div class="weui-btn-area">
<a href="javascript:;" class="weui-btn weui-btn_primary" id="btnStartProgress">上传</a>
<a href="javascript:;" class="weui-btn weui-btn_primary" id="btnUpload">上传</a>
</div>
</div>
<div class="page__ft">
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $progress = $('.js_progress'),
$btnUpload = $('#btnUpload');
var progress = 0;
function next() {
if(progress > 100){
progress = 0;
$btnUpload.removeClass('weui-btn_disabled');
return;
}
$progress.css({width: progress + '%'});
progress = ++progress;
setTimeout(next, 20);
}
$btnUpload.on('click', function(){
if ($btnUpload.hasClass('weui-btn_disabled')) return;
$btnUpload.addClass('weui-btn_disabled');
next();
});
});
</script>

29
src/example/fragment/toast.html
View File

@@ -29,4 +29,31 @@
<p class="weui-toast__content">数据加载中</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// toast
$(function(){
var $toast = $('#toast');
$('#showToast').on('click', function(){
if ($toast.css('display') != 'none') return;
$toast.fadeIn(100);
setTimeout(function () {
$toast.fadeOut(100);
}, 2000);
});
});
// loading
$(function(){
var $loadingToast = $('#loadingToast');
$('#showLoadingToast').on('click', function(){
if ($loadingToast.css('display') != 'none') return;
$loadingToast.fadeIn(100);
setTimeout(function () {
$loadingToast.fadeOut(100);
}, 2000);
});
});
</script>