diff --git a/.gitignore b/.gitignore index fec8c58..cd59f04 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ .idea/ node_modules -publish.sh \ No newline at end of file +npm-debug.log \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d057e4..d9990b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,24 @@ +#### v1.0.0 (2016-09-23) + +- 【增强】 采用BEM命名规范 +- 【增强】 新增Flex布局 +- 【增强】 新增Gallery +- 【增强】 新增Preview +- 【增强】 新增Agreement +- 【增强】 新增Footer +- 【增强】 新增Dialog和Actionsheet的Android样式 +- 【修复】 修正了部分组件的间距 +- 【修复】 修复了已知问题 + + #### v0.4.3 (2016-07-05) -- [修复] 图片上传组件无法选中图片的缺陷 -- [修复] 九宫格组件少于3个时出现多余线段的缺陷 -- [修复] 解决某些组件的z-index冲突,标准化z-index -- [修复] 解决`pannel`图标没有对齐的问题 -- [增强] demo 更新 router -- [增强] autoprefixer 指定浏览器范围 +- 【修复】 图片上传组件无法选中图片的缺陷 +- 【修复】 九宫格组件少于3个时出现多余线段的缺陷 +- 【修复】 解决某些组件的z-index冲突,标准化z-index +- 【修复】 解决`pannel`图标没有对齐的问题 +- 【增强】 demo 更新 router +- 【增强】 autoprefixer 指定浏览器范围 详情参考: @@ -18,12 +31,12 @@ #### v0.4.2 (2016-04-28) -- [修复] 修复 `weui_label` 在英文字符下溢出的缺陷 -- [增强] Article 页面增加支持图片样式 -- [修复] demo 页面的 `lang` 属性修改 -- [修复] 修复 demo 页面的 ActionSheet mask 无动画的缺陷 -- [增强] 优化 demo, 为tab中navbar和tabbar里标签添加点击事件交互,方便查看实际效果 -- [修复] 修改 `weui_label` 的宽度为 105px +- 【修复】 修复 `weui_label` 在英文字符下溢出的缺陷 +- 【增强】 Article 页面增加支持图片样式 +- 【修复】 demo 页面的 `lang` 属性修改 +- 【修复】 修复 demo 页面的 ActionSheet mask 无动画的缺陷 +- 【增强】 优化 demo, 为tab中navbar和tabbar里标签添加点击事件交互,方便查看实际效果 +- 【修复】 修改 `weui_label` 的宽度为 105px 详情参考: diff --git a/bower.json b/bower.json index 0632dba..98440a5 100644 --- a/bower.json +++ b/bower.json @@ -6,7 +6,7 @@ }, "description": "wechat mobile ui", "main": "dist/style/weui.css", - "version": "0.4.3", + "version": "1.0.0", "authors": [ "wechat ui team" ], diff --git a/dist/example/example.css b/dist/example/example.css index d760d05..965909b 100644 --- a/dist/example/example.css +++ b/dist/example/example.css @@ -1 +1 @@ -body,html{height:100%;-webkit-tap-highlight-color:transparent}body{overflow-x:hidden;background-color:#fbf9fe}.container{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}.container>div{background-color:#fbf9fe}.hd{padding:2em 0}.page_title{text-align:center;font-size:34px;color:#3cc51f;font-weight:400;margin:0 15%}.page_desc{text-align:center;color:#888;font-size:14px}.bd.spacing{padding:0 15px}.home{padding-bottom:30px}.button .page_title{color:#225fba}.button .bd{padding:0 15px}.button .button_sp_area{padding:10px 0;width:60%;margin:0 auto;text-align:justify;text-justify:distribute-all-lines;font-size:0}.button .button_sp_area:after{display:inline-block;width:100%;height:0;font-size:0;margin:0;padding:0;overflow:hidden;content:"."}.cell .page_title{color:#225fba}.cell .bd{padding-bottom:30px}.dialog .bd,.toast .bd{padding:120px 15px 0}.msg{background-color:#fff}.panel .bd{padding-bottom:20px}.article{background-color:#fff}.article .page_title{color:#de7c23}.icons{background-color:#fff;text-align:center}.icons .page_title{color:#3e24bd}.icons .bd{padding:30px 0;text-align:center}.icons .icon_sp_area{padding:10px 20px;text-align:left}.icons i{margin:0 5px 10px}.tabbar{height:100%}.search_show{display:none;margin-top:0;font-size:14px}.search_show .weui_cell_bd{padding:2px 0 2px 20px;color:#666}.icon{display:inline-block;width:28px;height:28px;vertical-align:middle}.icon_button{background:url(images/icon_nav_button.png) no-repeat;background-size:28px 28px}.icon_cell{background:url(images/icon_nav_cell.png) no-repeat;background-size:28px 28px}.icon_toast{background:url(images/icon_nav_toast.png) no-repeat;background-size:28px 28px}.icon_dialog{background:url(images/icon_nav_dialog.png) no-repeat;background-size:28px 28px}.icon_progress{background:url(images/icon_nav_progress.png) no-repeat;background-size:28px 28px}.icon_msg{background:url(images/icon_nav_msg.png) no-repeat;background-size:28px 28px}.icon_article{background:url(images/icon_nav_article.png) no-repeat;background-size:28px 28px}.icon_actionSheet{background:url(images/icon_nav_actionSheet.png) no-repeat;background-size:28px 28px}.icon_icons{background:url(images/icon_nav_icons.png) no-repeat;background-size:28px 28px}.icon_panel{background:url(images/icon_nav_panel.png) no-repeat;background-size:28px 28px}.icon_tab{background:url(images/icon_nav_tab.png) no-repeat;background-size:28px 28px}.icon_search_bar{background:url(images/icon_nav_search_bar.png) no-repeat;background-size:28px 28px}@-webkit-keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}.enter,.leave{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.enter{-webkit-animation:a .2s forwards;animation:a .2s forwards}.leave{-webkit-animation:b .25s forwards;animation:b .25s forwards} \ No newline at end of file +body,html{height:100%;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system-font,Helvetica Neue,Helvetica,sans-serif}ul{list-style:none}.page,body{background-color:#f8f8f8}.link{color:#1aad19}.container{overflow:hidden}.container,.page{position:absolute;top:0;right:0;bottom:0;left:0}.page{overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;z-index:1}.page.js_show{opacity:1}.page__hd{padding:40px}.page__bd_spacing{padding:0 15px}.page__ft{padding-top:40px;padding-bottom:10px;text-align:center}.page__ft img{height:18px}.page__ft.j_bottom{position:absolute;bottom:0;left:0;right:0}.page__title{text-align:left;font-size:20px;font-weight:400}.page__desc{margin-top:5px;color:#888;text-align:left;font-size:14px}.page.home .page__intro-icon{margin-top:-.2em;margin-left:5px;width:16px;height:16px;vertical-align:middle}.page.home .page__title{font-size:0;margin-bottom:15px}.page.home .page__bd img{width:30px;height:30px}.page.home .page__bd li{margin:10px 0;background-color:#fff;overflow:hidden;border-radius:2px;cursor:pointer}.page.home .page__bd li.js_show .weui-flex{opacity:.4}.page.home .page__bd li.js_show .page__category{height:auto}.page.home .page__bd li.js_show .page__category-content{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.page.home .page__bd li:first-child{margin-top:0}.page.home .page__category{height:0;overflow:hidden}.page.home .page__category-content{opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}.page.home .weui-flex{padding:20px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:.3s;transition:.3s}.page.home .weui-cells{margin-top:0}.page.home .weui-cells:after,.page.home .weui-cells:before{display:none}.page.home .weui-cell{padding-left:20px;padding-right:20px}.page.home .weui-cell:before{left:20px;right:20px}.page.button .page__bd{padding:0 15px}.page.button .button-sp-area{margin:0 auto;padding:15px 0;width:60%}.page.cell .page__bd,.page.form .page__bd{padding-bottom:30px}.page.actionsheet,.page.dialog{background-color:#fff}.page.dialog .page__bd{padding:0 15px}.page.msg,.page.msg_success,.page.msg_warn,.page.toast{background-color:#fff}.page.panel .page__bd{padding-bottom:20px}.page.article{background-color:#fff}.page.icons{text-align:center}.page.icons .page__bd{padding:0 40px;text-align:left}.page.icons .icon-box{margin-bottom:25px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page.icons .icon-box i{margin-right:18px}.page.icons .icon-box__ctn{-webkit-flex-shrink:100;flex-shrink:100}.page.icons .icon-box__title{font-weight:400}.page.icons .icon-box__desc{margin-top:6px;font-size:12px;color:#888}.page.icons .icon_sp_area{margin-top:10px;text-align:left}.page.icons .icon_sp_area i:before{margin-bottom:5px}.page.flex .placeholder{background-color:#ebebeb;height:2.3em;line-height:2.3em;text-align:center;margin:5px;color:#cfcfcf}.page.loadmore{background-color:#fff}.page.layers{overflow-x:hidden;-webkit-perspective:1000px;perspective:1000px}@media only screen and (max-width:320px){.page.layers .page__hd{padding-left:20px;padding-right:20px}}.page.layers .page__bd{position:relative}.page.layers .page__desc{min-height:4.8em}.page.layers .layers__layer{position:absolute;left:50%;width:150px;height:266px;margin-left:-75px;box-sizing:border-box;-webkit-transition:.5s;transition:.5s;background:url(images/layers/transparent.gif) no-repeat center center;background-size:contain;font-size:14px;color:#fff}.page.layers .layers__layer span{position:absolute;bottom:5px;left:0;right:0;text-align:center;-webkit-transition:.5s;transition:.5s}.page.layers .layers__layer:last-child span{color:#aaa}.page.layers .layers__layer.j_hide{opacity:0}.page.layers .layers__layer.j_pic span{color:transparent}@media only screen and (min-width:375px) and (min-height:603px){.page.layers .layers__layer{width:180px;height:320px;margin-left:-90px}}@media only screen and (min-width:414px) and (min-height:640px){.page.layers .layers__layer{width:200px;height:355px;margin-left:-100px}}.page.layers .layers__layer_popout{border:1px solid hsla(0,0%,80%,.5);z-index:4}.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px)}}.page.layers .layers__layer_popout.j_pic{background-image:url(images/layers/popout.png)}.page.layers .layers__layer_mask{background-color:rgba(0,0,0,.5);z-index:3}.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px)}}.page.layers .layers__layer_navigation{background-color:rgba(40,187,102,.5);z-index:2}.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px)}}.page.layers .layers__layer_navigation.j_pic{background-color:transparent;background-image:url(images/layers/navigation.png)}.page.layers .layers__layer_content{background-color:#fff;z-index:1}.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}}.page.layers .layers__layer_content.j_pic{background-image:url(images/layers/content.png)}.page.searchbar .search_show{display:none;margin-top:0;font-size:14px}.page.searchbar .search_show .weui-cell__bd{padding:2px 0 2px 20px;color:#666}.page.actionsheet{overflow:hidden}.page.actionsheet .actionsheet__mask{display:none;-webkit-transition:background .3s;transition:background .3s}.page.actionsheet .actionsheet__mask_show{background:rgba(0,0,0,.6)}.page.gallery,.page.picker{overflow:hidden}@-webkit-keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}.page.slideIn{-webkit-animation:a .2s forwards;animation:a .2s forwards}.page.slideOut{-webkit-animation:b .2s forwards;animation:b .2s forwards} \ No newline at end of file diff --git a/dist/example/example.js b/dist/example/example.js index 49c9322..e71195b 100644 --- a/dist/example/example.js +++ b/dist/example/example.js @@ -1,103 +1,321 @@ +/** + * Created by jf on 2015/9/11. + * Modified by bear on 2016/9/7. + */ $(function () { - - var router = new Router({ - container: '#container', - enterTimeout: 250, - leaveTimeout: 250 - }); - - // grid - var home = { - url: '/', - className: 'home', - render: function () { - return $('#tpl_home').html(); + var winH = $(window).height(); + var supportTouch = function(){ + try { + document.createEvent("TouchEvent"); + return true; + } catch (e) { + return false; } - }; - - // button - var button = { - url: '/button', - className: 'button', - render: function () { - return $('#tpl_button').html(); - } - }; - - // cell - var cell = { - url: '/cell', - className: 'cell', - render: function () { - return $('#tpl_cell').html(); + }(); + var pageManager = { + $container: $('#container'), + _pageStack: [], + _configs: [], + _pageAppend: function(){}, + _defaultPage: null, + _pageIndex: 1, + setDefault: function (defaultPage) { + this._defaultPage = this._find('name', defaultPage); + return this; }, - bind: function (){ - $('.container').on('click', '#showTooltips', function (){ - $('.js_tooltips').show(); - setTimeout(function (){ - $('.js_tooltips').hide(); - }, 3000); + setPageAppend: function (pageAppend) { + this._pageAppend = pageAppend; + return this; + }, + init: function () { + var self = this; + + $(window).on('hashchange', function () { + var state = history.state || {}; + var url = location.hash.indexOf('#') === 0 ? location.hash : '#'; + var page = self._find('url', url) || self._defaultPage; + if (state._pageIndex <= self._pageIndex || self._findInStack(url)) { + self._back(page); + } else { + self._go(page); + } }); - } - }; - // toast - var toast = { - url: '/toast', - className: 'toast', - render: function () { - return $('#tpl_toast').html(); + if (history.state && history.state._pageIndex) { + this._pageIndex = history.state._pageIndex; + } + + this._pageIndex--; + + var url = location.hash.indexOf('#') === 0 ? location.hash : '#'; + var page = self._find('url', url) || self._defaultPage; + this._go(page); + return this; }, - bind: function () { - $('#container').on('click', '#showToast', function () { - $('#toast').show(); - setTimeout(function () { - $('#toast').hide(); - }, 2000); - }).on('click', '#showLoadingToast', function () { - $('#loadingToast').show(); - setTimeout(function () { - $('#loadingToast').hide(); - }, 2000); + push: function (config) { + this._configs.push(config); + return this; + }, + go: function (to) { + var config = this._find('name', to); + if (!config) { + return; + } + location.hash = config.url; + }, + _go: function (config) { + this._pageIndex ++; + + history.replaceState && history.replaceState({_pageIndex: this._pageIndex}, '', location.href); + + var html = $(config.template).html(); + var $html = $(html).addClass('slideIn').addClass(config.name); + $html.on('animationend webkitAnimationEnd', function(){ + $html.removeClass('slideIn').addClass('js_show'); + }); + this.$container.append($html); + this._pageAppend.call(this, $html); + this._pageStack.push({ + config: config, + dom: $html }); - } - }; - // dialog - var dialog = { - url: '/dialog', - className: 'dialog', - render: function () { - return $('#tpl_dialog').html(); + if (!config.isBind) { + this._bind(config); + } + + return this; }, - bind: function () { - $('#container').on('click', '#showDialog1', function () { - $('#dialog1').show().on('click', '.weui_btn_dialog', function () { - $('#dialog1').off('click').hide(); - }); - }).on('click', '#showDialog2', function () { - $('#dialog2').show().on('click', '.weui_btn_dialog', function () { - $('#dialog2').off('click').hide(); + back: function () { + history.back(); + }, + _back: function (config) { + this._pageIndex --; + + var stack = this._pageStack.pop(); + if (!stack) { + return; + } + + var url = location.hash.indexOf('#') === 0 ? location.hash : '#'; + var found = this._findInStack(url); + if (!found) { + var html = $(config.template).html(); + var $html = $(html).css('opacity', 1).addClass(config.name); + $html.insertBefore(stack.dom); + + if (!config.isBind) { + this._bind(config); + } + + this._pageStack.push({ + config: config, + dom: $html }); + } + + stack.dom.addClass('slideOut').on('animationend', function () { + stack.dom.remove(); + }).on('webkitAnimationEnd', function () { + stack.dom.remove(); }); + return this; + }, + _findInStack: function (url) { + var found = null; + for(var i = 0, len = this._pageStack.length; i < len; i++){ + var stack = this._pageStack[i]; + if (stack.config.url === url) { + found = stack; + break; + } + } + return found; + }, + _find: function (key, value) { + var page = null; + for (var i = 0, len = this._configs.length; i < len; i++) { + if (this._configs[i][key] === value) { + page = this._configs[i]; + break; + } + } + return page; + }, + _bind: function (page) { + var events = page.events || {}; + for (var t in events) { + for (var type in events[t]) { + var that = this; + if(type == 'click' && supportTouch){ + (function(dom, event){ + var touchStartY; + that.$container.on('touchstart', dom, function (e) { + touchStartY = e.changedTouches[0].clientY; + }); + that.$container.on('touchend', dom, function (e) { + if (Math.abs(e.changedTouches[0].clientY - touchStartY) > 10) return; + e.preventDefault(); + + events[dom][event].call(this, e); + }); + })(t, type); + }else{ + this.$container.on(type, t, events[t][type]); + } + } + } + page.isBind = true; + } + }; + 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 + }; + } + + 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'); + } + }; + }() } }; - // progress - var progress = { - url: '/progress', - className: 'progress', - render: function () { - return $('#tpl_progress').html(); - }, - bind: function () { - $('#container').on('click', '#btnStartProgress', function () { - if ($(this).hasClass('weui_btn_disabled')) { + pages.input.events = { + '#showTooltips': { + click: function () { + var $tooltips = $('.js_tooltips'); + if ($tooltips.css('display') != 'none') { return; } - $(this).addClass('weui_btn_disabled'); + // 如果有`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'); @@ -109,172 +327,159 @@ $(function () { } next(); - }); + } } }; - - // msg - var msg = { - url: '/msg', - className: 'msg', - render: function () { - return $('#tpl_msg').html(); - } - }; - - // article - var article = { - url: '/article', - className: 'article', - render: function () { - return $('#tpl_article').html(); - } - }; - - // actionsheet - var actionsheet = { - url: '/actionsheet', - className: 'actionsheet', - render: function () { - return $('#tpl_actionsheet').html(); - }, - bind: function () { - $('#container').on('click', '#showActionSheet', function () { - var mask = $('#mask'); - var weuiActionsheet = $('#weui_actionsheet'); - weuiActionsheet.addClass('weui_actionsheet_toggle'); - mask.show() - .focus()//加focus是为了触发一次页面的重排(reflow or layout thrashing),使mask的transition动画得以正常触发 - .addClass('weui_fade_toggle').one('click', function () { - hideActionSheet(weuiActionsheet, mask); - }); - $('#actionsheet_cancel').one('click', function () { - hideActionSheet(weuiActionsheet, mask); - }); - mask.unbind('transitionend').unbind('webkitTransitionEnd'); - + pages.actionsheet.events = { + '#showIOSActionSheet': { + click: (function(){ function hideActionSheet(weuiActionsheet, mask) { - weuiActionsheet.removeClass('weui_actionsheet_toggle'); - mask.removeClass('weui_fade_toggle'); - mask.on('transitionend', function () { - mask.hide(); + weuiActionsheet.removeClass('weui-actionsheet_toggle'); + mask.removeClass('actionsheet__mask_show'); + weuiActionsheet.on('transitionend', function () { + mask.css('display', 'none'); }).on('webkitTransitionEnd', function () { - mask.hide(); + mask.css('display', 'none'); }) } - }); - } - }; - - // icons - var icons = { - url: '/icons', - className: 'icons', - render: function () { - return $('#tpl_icons').html(); - } - }; - - // panel - var panel = { - url: '/panel', - className: 'panel', - render: function () { - return $('#tpl_panel').html(); - } - }; - - // tab - var tab = { - url: '/tab', - className: 'tab', - render: function () { - return $('#tpl_tab').html(); - } - }; - - // navbar - var navbar = { - url: '/navbar', - className: 'navbar', - render: function () { - return $('#tpl_navbar').html(); + return function () { + var mask = $('#mask'); + var weuiActionsheet = $('#weui-actionsheet'); + weuiActionsheet.addClass('weui-actionsheet_toggle'); + mask.show().focus().addClass('actionsheet__mask_show').one('click', function () { + hideActionSheet(weuiActionsheet, mask); + }); + $('#actionsheet_cancel').one('click', function () { + hideActionSheet(weuiActionsheet, mask); + }); + weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd'); + } + })() }, - bind: function () { - $('#container').on('click', '.weui_navbar_item', function () { - $(this).addClass('weui_bar_item_on').siblings('.weui_bar_item_on').removeClass('weui_bar_item_on'); - }); + '#showAndroidActionSheet':{ + 'click':function(){ + var $androidActionSheet = $('#weui-android-actionsheet'); + var $androidMask = $androidActionSheet.find('.weui-mask'); + $('#weui-android-actionsheet').fadeIn(200); + $androidMask.one('click',function () { + $androidActionSheet.fadeOut(200); + }); + } } }; - - // tabbar - var tabbar = { - url: '/tabbar', - className: 'tabbar', - render: function () { - return $('#tpl_tabbar').html(); - }, - bind: function () { - $('#container').on('click', '.weui_tabbar_item', function () { - $(this).addClass('weui_bar_item_on').siblings('.weui_bar_item_on').removeClass('weui_bar_item_on'); - }); - } - }; - - // searchbar - var searchbar = { - url: '/searchbar', - className: 'searchbar', - render: function () { - return $('#tpl_searchbar').html(); - }, - bind: function () { - $('#container').on('focus', '#search_input', function () { + pages.searchbar.events = { + '#search_input':{ + focus:function(){ + //searchBar var $weuiSearchBar = $('#search_bar'); - $weuiSearchBar.addClass('weui_search_focusing'); - }).on('blur', '#search_input', function () { + $weuiSearchBar.addClass('weui-search-bar_focusing'); + }, + blur:function(){ var $weuiSearchBar = $('#search_bar'); - $weuiSearchBar.removeClass('weui_search_focusing'); - if ($(this).val()) { + $weuiSearchBar.removeClass('weui-search-bar_focusing'); + if($(this).val()){ $('#search_text').hide(); - } else { + }else{ $('#search_text').show(); } - }).on('input', '#search_input', function () { - var $searchShow = $("#search_show"); - if ($(this).val()) { + }, + input:function(){ + var $searchShow = $('#search_show'); + if($(this).val()){ $searchShow.show(); - } else { + }else{ $searchShow.hide(); } - }).on('touchend', '#search_cancel', function () { + } + }, + '#search_cancel':{ + touchend:function(){ $("#search_show").hide(); $('#search_input').val(''); - }).on('touchend', '#search_clear', function () { + } + }, + '#search_clear':{ + touchend:function(){ $("#search_show").hide(); $('#search_input').val(''); - }); + } } }; - router.push(home) - .push(button) - .push(cell) - .push(toast) - .push(dialog) - .push(progress) - .push(msg) - .push(article) - .push(actionsheet) - .push(icons) - .push(panel) - .push(tab) - .push(navbar) - .push(tabbar) - .push(searchbar) - .setDefault('/') + 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://team.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: location.href, + 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 @@ -291,4 +496,4 @@ $(function () { } }) } -}); +}); \ No newline at end of file diff --git a/dist/example/images/icon_footer.png b/dist/example/images/icon_footer.png new file mode 100644 index 0000000..17aac2f Binary files /dev/null and b/dist/example/images/icon_footer.png differ diff --git a/dist/example/images/icon_footer_link.png b/dist/example/images/icon_footer_link.png new file mode 100644 index 0000000..bebdc0d Binary files /dev/null and b/dist/example/images/icon_footer_link.png differ diff --git a/dist/example/images/icon_intro.png b/dist/example/images/icon_intro.png new file mode 100644 index 0000000..d2bf4a5 Binary files /dev/null and b/dist/example/images/icon_intro.png differ diff --git a/dist/example/images/icon_nav_feedback.png b/dist/example/images/icon_nav_feedback.png new file mode 100644 index 0000000..8c03743 Binary files /dev/null and b/dist/example/images/icon_nav_feedback.png differ diff --git a/dist/example/images/icon_nav_flow.png b/dist/example/images/icon_nav_flow.png new file mode 100644 index 0000000..dd663bf Binary files /dev/null and b/dist/example/images/icon_nav_flow.png differ diff --git a/dist/example/images/icon_nav_form.png b/dist/example/images/icon_nav_form.png new file mode 100644 index 0000000..9d2addb Binary files /dev/null and b/dist/example/images/icon_nav_form.png differ diff --git a/dist/example/images/icon_nav_layout.png b/dist/example/images/icon_nav_layout.png new file mode 100644 index 0000000..1d07c1f Binary files /dev/null and b/dist/example/images/icon_nav_layout.png differ diff --git a/dist/example/images/icon_nav_msg.png b/dist/example/images/icon_nav_msg.png index 6a3da3d..8c03743 100644 Binary files a/dist/example/images/icon_nav_msg.png and b/dist/example/images/icon_nav_msg.png differ diff --git a/dist/example/images/icon_nav_nav.png b/dist/example/images/icon_nav_nav.png new file mode 100644 index 0000000..b4fe0f6 Binary files /dev/null and b/dist/example/images/icon_nav_nav.png differ diff --git a/dist/example/images/icon_nav_progress.png b/dist/example/images/icon_nav_progress.png index 53eb3d7..48e8535 100644 Binary files a/dist/example/images/icon_nav_progress.png and b/dist/example/images/icon_nav_progress.png differ diff --git a/dist/example/images/icon_nav_search.png b/dist/example/images/icon_nav_search.png new file mode 100644 index 0000000..6efea86 Binary files /dev/null and b/dist/example/images/icon_nav_search.png differ diff --git a/dist/example/images/icon_nav_special.png b/dist/example/images/icon_nav_special.png new file mode 100644 index 0000000..7c46cf9 Binary files /dev/null and b/dist/example/images/icon_nav_special.png differ diff --git a/dist/example/images/icon_nav_z-index.png b/dist/example/images/icon_nav_z-index.png new file mode 100644 index 0000000..f32f620 Binary files /dev/null and b/dist/example/images/icon_nav_z-index.png differ diff --git a/dist/example/images/icon_nav_zindex.png b/dist/example/images/icon_nav_zindex.png new file mode 100644 index 0000000..f32f620 Binary files /dev/null and b/dist/example/images/icon_nav_zindex.png differ diff --git a/dist/example/images/icon_tabbar.png b/dist/example/images/icon_tabbar.png new file mode 100644 index 0000000..20b30ab Binary files /dev/null and b/dist/example/images/icon_tabbar.png differ diff --git a/dist/example/images/layers/content.png b/dist/example/images/layers/content.png new file mode 100644 index 0000000..3f3d9ba Binary files /dev/null and b/dist/example/images/layers/content.png differ diff --git a/dist/example/images/layers/navigation.png b/dist/example/images/layers/navigation.png new file mode 100644 index 0000000..8103123 Binary files /dev/null and b/dist/example/images/layers/navigation.png differ diff --git a/dist/example/images/layers/popout.png b/dist/example/images/layers/popout.png new file mode 100644 index 0000000..07a9959 Binary files /dev/null and b/dist/example/images/layers/popout.png differ diff --git a/dist/example/images/layers/transparent.gif b/dist/example/images/layers/transparent.gif new file mode 100644 index 0000000..452b831 Binary files /dev/null and b/dist/example/images/layers/transparent.gif differ diff --git a/dist/example/images/logo.png b/dist/example/images/logo.png new file mode 100644 index 0000000..0810604 Binary files /dev/null and b/dist/example/images/logo.png differ diff --git a/dist/example/images/pic_160.png b/dist/example/images/pic_160.png new file mode 100644 index 0000000..ba94170 Binary files /dev/null and b/dist/example/images/pic_160.png differ diff --git a/dist/example/images/pic_article_1.jpg b/dist/example/images/pic_article_1.jpg deleted file mode 100644 index 929e2fa..0000000 Binary files a/dist/example/images/pic_article_1.jpg and /dev/null differ diff --git a/dist/example/images/pic_article_2.jpg b/dist/example/images/pic_article_2.jpg deleted file mode 100644 index 67af640..0000000 Binary files a/dist/example/images/pic_article_2.jpg and /dev/null differ diff --git a/dist/example/index.html b/dist/example/index.html index 494fc09..847c837 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -8,835 +8,1469 @@
+