Authored by xuqi

build tip plugin

@@ -8,7 +8,7 @@ var $ = require('yoho.zepto'), @@ -8,7 +8,7 @@ var $ = require('yoho.zepto'),
8 ellipsis = require('mlellipsis'), 8 ellipsis = require('mlellipsis'),
9 lazyLoad = require('yoho.lazyload'); 9 lazyLoad = require('yoho.lazyload');
10 10
11 -var api = require('../api'); 11 +var tip = require('../plugin/tip');
12 12
13 ellipsis.init(); 13 ellipsis.init();
14 14
@@ -33,10 +33,10 @@ function initInfosEvt($container) { @@ -33,10 +33,10 @@ function initInfosEvt($container) {
33 if (code === 200) { 33 if (code === 200) {
34 $likeBtn.next('.like-count').text(data.data); 34 $likeBtn.next('.like-count').text(data.data);
35 } else if (code === 400) { 35 } else if (code === 400) {
36 - api.alert('未登录'); 36 + tip.show('未登录');
37 } 37 }
38 }, function() { 38 }, function() {
39 - api.alert('网络断开连接了~'); 39 + tip.show('网络断开连接了~');
40 }); 40 });
41 }); 41 });
42 } 42 }
@@ -12,7 +12,7 @@ var $intro = $('#intro'), @@ -12,7 +12,7 @@ var $intro = $('#intro'),
12 $imt = $('#intro-more-txt'), 12 $imt = $('#intro-more-txt'),
13 $infosContainer = $('#related-infos-container'); 13 $infosContainer = $('#related-infos-container');
14 14
15 -var infoApi = require('./info'); 15 +var info = require('./info');
16 16
17 var mIntro, aIntro; 17 var mIntro, aIntro;
18 18
@@ -30,8 +30,8 @@ setTimeout(function() { @@ -30,8 +30,8 @@ setTimeout(function() {
30 aIntro = $intro.attr('title'); 30 aIntro = $intro.attr('title');
31 }); 31 });
32 32
33 -infoApi.initInfosEvt($infosContainer);  
34 -infoApi.setLazyLoadAndMellipsis($infosContainer.find('.guang-info')); 33 +info.initInfosEvt($infosContainer);
  34 +info.setLazyLoadAndMellipsis($infosContainer.find('.guang-info'));
35 35
36 //文字介绍收起与展开 36 //文字介绍收起与展开
37 $('#more-intro').bind('touchstart', function() { 37 $('#more-intro').bind('touchstart', function() {
@@ -25,46 +25,6 @@ var phoneRegx = { @@ -25,46 +25,6 @@ var phoneRegx = {
25 '+61': /^[0-9]{11}$/ 25 '+61': /^[0-9]{11}$/
26 }; 26 };
27 27
28 -//错误验证  
29 -var $errTip,  
30 - tipTime;  
31 -  
32 -/**  
33 - * 初始化错误提示  
34 - */  
35 -function initErrTip() {  
36 - var errTipHtml = '<div id="err-tip" class="err-tip"></div>';  
37 -  
38 - //插入错误提示HTML  
39 - $('.passport-page').append(errTipHtml);  
40 -  
41 - $errTip = $('#err-tip');  
42 - $errTip.on('touchstart', function() {  
43 - $errTip.fadeOut();  
44 -  
45 - //清除Timeout  
46 - clearTimeout(tipTime);  
47 - });  
48 -}  
49 -  
50 -/**  
51 - * 显示错误提示  
52 - */  
53 -function showErrTip(content) {  
54 - if (typeof $errTip === 'undefined') {  
55 - return;  
56 - }  
57 -  
58 - $errTip.text(content).show();  
59 -  
60 - //若2秒内未点击则自动消失  
61 - tipTime = setTimeout(function() {  
62 - if ($errTip.css('display') === 'block') {  
63 - $errTip.fadeOut();  
64 - }  
65 - }, 2000);  
66 -}  
67 -  
68 //密码显示隐藏 28 //密码显示隐藏
69 function bindEyesEvt() { 29 function bindEyesEvt() {
70 var $hasEye = $('.has-eye'), 30 var $hasEye = $('.has-eye'),
@@ -161,8 +121,6 @@ function selectCssHack($countrySelect) { @@ -161,8 +121,6 @@ function selectCssHack($countrySelect) {
161 module.exports = { 121 module.exports = {
162 emailRegx: emailRegx, 122 emailRegx: emailRegx,
163 phoneRegx: phoneRegx, 123 phoneRegx: phoneRegx,
164 - initErrTip: initErrTip,  
165 - showErrTip: showErrTip,  
166 bindEyesEvt: bindEyesEvt, 124 bindEyesEvt: bindEyesEvt,
167 bindClearEvt: bindClearEvt, 125 bindClearEvt: bindClearEvt,
168 pwdValidate: pwdValidate, 126 pwdValidate: pwdValidate,
@@ -8,10 +8,8 @@ var $ = require('yoho.zepto'); @@ -8,10 +8,8 @@ var $ = require('yoho.zepto');
8 8
9 var $resend = $('#resend'); 9 var $resend = $('#resend');
10 10
11 -var api = require('../api'),  
12 - showErrTip = api.showErrTip;  
13 -  
14 -api.initErrTip(); 11 +var tip = require('../../plugin/tip'),
  12 + showErrTip = tip.show;
15 13
16 $resend.on('touchstart', function(e) { 14 $resend.on('touchstart', function(e) {
17 e.preventDefault(); 15 e.preventDefault();
@@ -9,11 +9,10 @@ var $email = $('#email'), @@ -9,11 +9,10 @@ var $email = $('#email'),
9 $btnSure = $('#btn-sure'); 9 $btnSure = $('#btn-sure');
10 10
11 var api = require('../api'); 11 var api = require('../api');
  12 +var tip = require('../../plugin/tip');
12 13
13 var trim = $.trim; 14 var trim = $.trim;
14 -var showErrTip = api.showErrTip;  
15 -  
16 -api.initErrTip(); 15 +var showErrTip = tip.show;
17 16
18 api.bindClearEvt(); 17 api.bindClearEvt();
19 18
@@ -11,11 +11,10 @@ var $phoneNum = $('#phone-num'), @@ -11,11 +11,10 @@ var $phoneNum = $('#phone-num'),
11 $btnNext = $('#btn-next'); 11 $btnNext = $('#btn-next');
12 12
13 var api = require('../api'); 13 var api = require('../api');
  14 +var tip = require('../../plugin/tip');
14 15
15 var trim = $.trim; 16 var trim = $.trim;
16 -var showErrTip = api.showErrTip;  
17 -  
18 -api.initErrTip(); 17 +var showErrTip = tip.show;
19 18
20 api.bindClearEvt(); 19 api.bindClearEvt();
21 20
@@ -9,11 +9,10 @@ var $pwd = $('#pwd'), @@ -9,11 +9,10 @@ var $pwd = $('#pwd'),
9 $btnOk = $('#btn-ok'); 9 $btnOk = $('#btn-ok');
10 10
11 var api = require('../api'); 11 var api = require('../api');
  12 +var tip = require('../../plugin/tip');
12 13
13 var trim = $.trim; 14 var trim = $.trim;
14 -var showErrTip = api.showErrTip;  
15 -  
16 -api.initErrTip(); 15 +var showErrTip = tip.show;
17 16
18 api.bindEyesEvt(); 17 api.bindEyesEvt();
19 18
@@ -11,9 +11,10 @@ module.exports = function(useInRegister) { @@ -11,9 +11,10 @@ module.exports = function(useInRegister) {
11 $captchaTip = $('#captcha-tip'); 11 $captchaTip = $('#captcha-tip');
12 12
13 var api = require('./api'); 13 var api = require('./api');
  14 + var tip = require('../plugin/tip');
14 15
15 var trim = $.trim; 16 var trim = $.trim;
16 - var showErrTip = api.showErrTip; 17 + var showErrTip = tip.show;
17 18
18 var urlMid = useInRegister ? 'register' : 'back'; 19 var urlMid = useInRegister ? 'register' : 'back';
19 20
@@ -31,8 +32,6 @@ module.exports = function(useInRegister) { @@ -31,8 +32,6 @@ module.exports = function(useInRegister) {
31 }, 1000); 32 }, 1000);
32 } 33 }
33 34
34 - api.initErrTip();  
35 -  
36 api.bindClearEvt(); 35 api.bindClearEvt();
37 36
38 $captcha.bind('input', function() { 37 $captcha.bind('input', function() {
@@ -15,9 +15,10 @@ var $phoneNum = $('#phone-num'), @@ -15,9 +15,10 @@ var $phoneNum = $('#phone-num'),
15 pwdPass = false; 15 pwdPass = false;
16 16
17 var api = require('../api'); 17 var api = require('../api');
  18 +var tip = require('../../plugin/tip');
18 19
19 var trim = $.trim; 20 var trim = $.trim;
20 -var showErrTip = api.showErrTip; 21 +var showErrTip = tip.show;
21 22
22 //登录按钮状态切换 23 //登录按钮状态切换
23 function switchLoginBtnStatus() { 24 function switchLoginBtnStatus() {
@@ -31,9 +32,6 @@ function switchLoginBtnStatus() { @@ -31,9 +32,6 @@ function switchLoginBtnStatus() {
31 //Android-UC下显示select的direction:rtl无效的临时解决办法 32 //Android-UC下显示select的direction:rtl无效的临时解决办法
32 api.selectCssHack($countrySelect); 33 api.selectCssHack($countrySelect);
33 34
34 -//初始化ErrTip  
35 -api.initErrTip();  
36 -  
37 //显示隐藏密码 35 //显示隐藏密码
38 api.bindEyesEvt(); 36 api.bindEyesEvt();
39 37
@@ -16,9 +16,10 @@ var $account = $('#account'), @@ -16,9 +16,10 @@ var $account = $('#account'),
16 pwdPass = false; 16 pwdPass = false;
17 17
18 var api = require('../api'); 18 var api = require('../api');
  19 +var tip = require('../../plugin/tip');
19 20
20 var trim = $.trim; 21 var trim = $.trim;
21 -var showErrTip = api.showErrTip; 22 +var showErrTip = tip.show;
22 23
23 //登录按钮状态切换 24 //登录按钮状态切换
24 function switchLoginBtnStatus() { 25 function switchLoginBtnStatus() {
@@ -41,9 +42,6 @@ function hideRetrivePanel() { @@ -41,9 +42,6 @@ function hideRetrivePanel() {
41 $ways.slideUp(); 42 $ways.slideUp();
42 } 43 }
43 44
44 -//初始化ErrTip  
45 -api.initErrTip();  
46 -  
47 //密码显示与隐藏 45 //密码显示与隐藏
48 api.bindEyesEvt(); 46 api.bindEyesEvt();
49 47
@@ -9,11 +9,10 @@ var $pwd = $('#pwd'), @@ -9,11 +9,10 @@ var $pwd = $('#pwd'),
9 $btnSure = $('#btn-sure'); 9 $btnSure = $('#btn-sure');
10 10
11 var api = require('../api'); 11 var api = require('../api');
  12 +var tip = require('../../plugin/tip');
12 13
13 var trim = $.trim; 14 var trim = $.trim;
14 -var showErrTip = api.showErrTip;  
15 -  
16 -api.initErrTip(); 15 +var showErrTip = tip.show;
17 16
18 api.bindEyesEvt(); 17 api.bindEyesEvt();
19 18
@@ -11,11 +11,10 @@ var $phoneNum = $('#phone-num'), @@ -11,11 +11,10 @@ var $phoneNum = $('#phone-num'),
11 $btnNext = $('#btn-next'); 11 $btnNext = $('#btn-next');
12 12
13 var api = require('../api'); 13 var api = require('../api');
  14 +var tip = require('../../plugin/tip');
14 15
15 var trim = $.trim; 16 var trim = $.trim;
16 -var showErrTip = api.showErrTip;  
17 -  
18 -api.initErrTip(); 17 +var showErrTip = tip.show;
19 18
20 api.bindClearEvt(); 19 api.bindClearEvt();
21 20
  1 +/**
  2 + * 弹框提示
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/10
  5 + */
  6 +var $ = require('yoho.zepto');
  7 +
  8 +var $tip, tipItime;
  9 +
  10 +/**
  11 + * 初始化提示框
  12 + */
  13 +(function() {
  14 + var tipHtml = '<div id="yoho-tip" class="yoho-tip"></div>';
  15 +
  16 + //插入提示HTML
  17 + $('.yoho-page').append(tipHtml);
  18 +
  19 + $tip = $('#yoho-tip');
  20 + $tip.on('touchstart', function() {
  21 + $tip.hide();
  22 +
  23 + //清除Timeout
  24 + clearTimeout(tipItime);
  25 + });
  26 +}());
  27 +
  28 +/**
  29 + * 显示提示
  30 + */
  31 +function show(con, dur) {
  32 + var content, duration;
  33 +
  34 + if (typeof con === 'undefined') {
  35 + return;
  36 + }
  37 +
  38 + content = con.toString();
  39 + duration = (dur && dur > 0) ? dur : 2000;
  40 +
  41 + $tip.text(content).show();
  42 +
  43 + tipItime = setTimeout(function() {
  44 + if ($tip.css('display') === 'block') {
  45 + $tip.hide();
  46 + }
  47 + }, duration);
  48 +}
  49 +
  50 +exports.show = show;
@@ -66,4 +66,22 @@ a { @@ -66,4 +66,22 @@ a {
66 -moz-osx-font-smoothing: grayscale; 66 -moz-osx-font-smoothing: grayscale;
67 } 67 }
68 68
  69 +.yoho-tip {
  70 + position: absolute;
  71 + display: none;
  72 + text-align: center;
  73 + width: 70%;
  74 + padding: 34px 0;
  75 + top: 50%;
  76 + left: 50%;
  77 + margin-left: -35%;
  78 + margin-top: -45px;
  79 + background-color: #000;
  80 + opacity: 0.7;
  81 + color: #fff;
  82 + font-size: 18px;
  83 + border: none;
  84 + @include border-radius(10px);
  85 +}
  86 +
69 @import "layout/header", "layout/footer", "good", "passport/index", "guang/index"; 87 @import "layout/header", "layout/footer", "good", "passport/index", "guang/index";
@@ -159,22 +159,4 @@ body.passport-body { @@ -159,22 +159,4 @@ body.passport-body {
159 .row { 159 .row {
160 margin-bottom: 10px; 160 margin-bottom: 10px;
161 } 161 }
162 -  
163 - .err-tip {  
164 - position: absolute;  
165 - display: none;  
166 - text-align: center;  
167 - width: 70%;  
168 - padding: 34px 0;  
169 - top: 50%;  
170 - left: 50%;  
171 - margin-left: -35%;  
172 - margin-top: -45px;  
173 - background-color: #000;  
174 - opacity: 0.7;  
175 - color: #fff;  
176 - font-size: 18px;  
177 - border: none;  
178 - @include border-radius(10px);  
179 - }  
180 } 162 }