Skip to content

V
Vphoto
Commit 3311832d by 邓丽
Options

tab修改

parent 62430ca6
Showing with 464 additions and 217 deletions
dist/css/bootstrap.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/css/bootstrap.min.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/css/picture-live.min.css.map
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/html/appoint.html
......@@ -27,77 +27,77 @@
</head>
<body>
<article>
<ul class="nav nav-tabs col-2">
<li><a class="active">预约摄影师</a></li>
<li id="shop"><a>购买Wifi-SD卡</a></li>
<ul class="nav nav-tabs col-2" role="tablist">
<li role="presentation" class="active"><a href="#photographer" caria-controls="profile" role="tab" data-toggle="tab">预约摄影师</a></li>
<li role="presentation" id="shop"><a href="#equipment" aria-controls="profile" role="tab" data-toggle="tab">购买Wifi-SD卡</a></li>
</ul>
<section class="ab-content">
<section id="photographer" class="tab-pane active">
<!-- <div class="appointment">
<h2>预约关注直播活动摄影师 </h2>
<table>
<tr>
&lt;!&ndash; <th>序号</th>&ndash;&gt;
<th>活动名称</th>
<th>类型</th>
<th>摄影师</th>
<th>马上预约</th>
</tr>
<tr>
&lt;!&ndash; <td>1</td>&ndash;&gt;
<td>1.中国网球公开赛中国网球公开赛</td>
<td>体育赛事体育赛事</td>
<td>阿龙阿龙阿龙</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
<tr>
&lt;!&ndash;<td>2</td>&ndash;&gt;
<td>2.NBA</td>
<td>体育</td>
<td>佚名</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
</table>
</div>-->
<div class="appointment">
<h2>通过图播天下预约其他服务 </h2>
<p>
图播天下可在全国范围内提供创意广告拍摄、企业宣传片制作服务，可在线直接提交预约，客服将在1小时内直接跟您联系
</p>
<h3>提交需求信息</h3>
<section id="photographer" class="show">
<!-- <div class="appointment">
<h2>预约关注直播活动摄影师 </h2>
<table>
<tr>
&lt;!&ndash; <th>序号</th>&ndash;&gt;
<th>活动名称</th>
<th>类型</th>
<th>摄影师</th>
<th>马上预约</th>
</tr>
<tr>
&lt;!&ndash; <td>1</td>&ndash;&gt;
<td>1.中国网球公开赛中国网球公开赛</td>
<td>体育赛事体育赛事</td>
<td>阿龙阿龙阿龙</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
<tr>
&lt;!&ndash;<td>2</td>&ndash;&gt;
<td>2.NBA</td>
<td>体育</td>
<td>佚名</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
</table>
</div>-->
<div class="appointment">
<h2>通过图播天下预约其他服务 </h2>
<p>
图播天下可在全国范围内提供创意广告拍摄、企业宣传片制作服务，可在线直接提交预约，客服将在1小时内直接跟您联系
</p>
<h3>提交需求信息</h3>
<form action="">
<ul>
<li>
<label class="icon icon-icon_people"><i></i>姓名：</label>
<input type="text" placeholder="可填写字母或汉字" id="name"/>
</li>
<li>
<label class="icon icon-icon_local"><i></i>拍摄地点：</label>
<input id="place" placeholder="北京" type="text" value="北京" name="place" >
<input id="city-picker" /> <!--此处隐藏域-->
</li>
<li>
<label class="icon icon-icon_tex"><i></i>需求：</label>
<input type="text" id='picker' placeholder="非空" value="会议直播" data-id=""/>
</li>
<li>
<label class="icon icon-icon_time"><i></i>时间：</label>
<input type="text" id='datetime-picker' placeholder="非空" value=""/>
</li>
<li>
<label class="icon icon-icon_tel tel"><i></i>联系方式：</label>
<input type="tel" placeholder="只能填写数字" id="tel"/>
</li>
</ul>
</form>
<div class="submit_btn"><button>确认提交</button></div>
</div>
</section>
<section id="equipment" class="hidden">
<div class="appointment">
<h2> 图播Wifi-SD卡</h2>
<!--幻灯片-->
<form action="">
<ul>
<li>
<label class="icon icon-icon_people"><i></i>姓名：</label>
<input type="text" placeholder="可填写字母或汉字" id="name"/>
</li>
<li>
<label class="icon icon-icon_local"><i></i>拍摄地点：</label>
<input id="place" placeholder="北京" type="text" value="北京" name="place" >
<input id="city-picker" /> <!--此处隐藏域-->
</li>
<li>
<label class="icon icon-icon_tex"><i></i>需求：</label>
<input type="text" id='picker' placeholder="非空" value="会议直播" data-id=""/>
</li>
<li>
<label class="icon icon-icon_time"><i></i>时间：</label>
<input type="text" id='datetime-picker' placeholder="非空" value=""/>
</li>
<li>
<label class="icon icon-icon_tel tel"><i></i>联系方式：</label>
<input type="tel" placeholder="只能填写数字" id="tel"/>
</li>
</ul>
</form>
<div class="submit_btn"><button>确认提交</button></div>
</div>
</section>
<section id="equipment" class="tab-pane">
<div class="appointment">
<h2> 图播Wifi-SD卡</h2>
<!--幻灯片-->
<div class="box" id="slider">
<ul >
<li>
......@@ -113,33 +113,35 @@
</div>
</div>
<div class="appointment">
<h2> 产品功能介绍</h2>
<div class="features_intro">
<img src="../img/long.jpg" alt=""/>
</div>
</div>
<div class="appointment">
<h2>选择在线购买渠道</h2>
<ul>
<li>
<a href="">
<b class="jd"></b>
前往图播京东商城旗舰店
<i class="next icon icon-icon_right"></i>
</a>
</li>
<li>
<a href="">
<b class="tb"></b>
前往图播天猫旗舰店
<i class="next icon icon-icon_right"></i>
</a>
</li>
</ul>
</div>
<div class="appointment">
<h2> 产品功能介绍</h2>
<div class="features_intro">
<img src="../img/long.jpg" alt=""/>
</div>
</div>
<div class="appointment">
<h2>选择在线购买渠道</h2>
<ul>
<li>
<a href="">
<b class="jd"></b>
前往图播京东商城旗舰店
<i class="next icon icon-icon_right"></i>
</a>
</li>
<li>
<a href="">
<b class="tb"></b>
前往图播天猫旗舰店
<i class="next icon icon-icon_right"></i>
</a>
</li>
</ul>
</div>
</section>
</section>
<div class="contactTel">
<a href="tel:400-132-155">
<span>直接联系图播天下客服：</span>
......
dist/html/dir-appoint.html
......@@ -97,7 +97,41 @@
</div>
</article>
<script>
+function($){
$.rawCitiesData = [
{
"name":"A",
"sub":[
{
"id": "462",
"name": "阿拉善盟"
},
{
"id": "492",
"name": "鞍山市"
},
{
"id": "1098",
"name": "安庆市"
}
]
},
{ "name":"B",
"sub":[
{
"id": "2",
"name": "北京市"
},
{
"id": "124",
"name": "保定市"
}
]
}
]
}($);
</script>
<script type="text/javascript" src="../../lib/jquery-weui/js/city-picker.min.js" charset="utf-8"></script>
<script>
/*选择拍摄地点*/
......
dist/html/picture-live.html
......@@ -23,13 +23,14 @@
<link rel="stylesheet" href="../css/picture-live.min.css">
<!-- <link rel="stylesheet" href="../css/bootstrap.min.css">-->
</head>
<body>
<!--头部导航切换卡-->
<nav>
<ul class="nav nav-tabs col-2">
<li><a class="active">图片</a></li>
<li><a >图文</a></li>
<ul class="nav nav-tabs col-2" role="tablist">
<li role="presentation" class="active"><a href="#live_content" caria-controls="profile" role="tab" data-toggle="tab">图片</a></li>
<li role="presentation" ><a href="#picture" aria-controls="profile" role="tab" data-toggle="tab">图文</a></li>
</ul>
<div id="updateItem">有<b id="num">30</b>条数据更新</div>
</nav>
......@@ -68,9 +69,9 @@
</div>
<!--九宫图布局-->
<section class="live_content" >
<section id="main-container">
<section id="main-container" class="tab-content">
<!--图片模式-->
<div class="picture_mode show" id="live_content">
<div class="picture_mode tab-pane active" id="live_content" role="tabpanel">
<ul class="work">
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
......@@ -79,14 +80,12 @@
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
</ul>
</li>
</ul>
</div>
<!--图文模式-->
<div class="dynamic-work hidden">
<div class="dynamic-work tab-pane" role="tabpanel" id="picture">
<ul>
<li>
<ul class="work work-4">
......
dist/js/appoint.min.js
!function e(n,t,i){function r(s,l){if(!t[s]){if(!n[s]){var o="function"==typeof require&&require;if(!l&&o)return o(s,!0);if(a)return a(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var d=t[s]={exports:{}};n[s][0].call(d.exports,function(e){var t=n[s][1][e];return r(t?t:e)},d,d.exports,e,n,t,i)}return t[s].exports}for(var a="function"==typeof require&&require,s=0;s<i.length;s++)r(i[s]);return r}({1:[function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}var r=e("./widget/tabs.js"),a=(i(r),e("./widget/slider.js"));i(a)},{"./widget/slider.js":2,"./widget/tabs.js":3}],2:[function(e,n,t){"use strict";(function(e,n){function t(){var n=o(),t=document.createElement("ol");u.append(t);for(var i=e(d.SLIDER_OL),r=0;r<f.length;r++){var a=document.createElement("li");i.append(a),0==r&&i.find("li").addClass("active")}var s=(n-20*f.length)/2;i.css("left",s)}function i(){var n=e(d.SLIDER_OL);n.find("li").eq(L).addClass("active").siblings().removeClass("active")}function r(e){var n=o();L++,L>=I&&(L=I-1),v.animate({"margin-left":-n*L},500),i()}function a(e){var n=o();L--,L<=-1&&(L=0),v.animate({"margin-left":-n*L},500),i()}function s(){var i=o();parseInt(f.width(i));var s=parseInt(f.width());v.width(parseInt(s*f.length));var l=document.getElementById("slider"),u=new n(l);t(),u.on(c.SWIPELEFT,function(e){r(e)}),u.on(c.SWIPRIGHT,function(e){a(e)});var I=e(d.SLIDER_OL_LI);I.click(function(n){var t=e(this).index();L=t,e(this).addClass("active").siblings("li").removeClass("active"),v.animate({"margin-left":-i*t},500)})}function l(){window.setInterval(function(){var e=o();L++,L>=I&&(L=0),v.animate({"margin-left":-e*L},500),i()},3e3)}function o(){var e=window.screen.availWidth;return e>640&&(e=640),e}var c={PANDWON:"pandown",PANUP:"panup",PAN:"pan",PANSTART:"panstart",PANEND:"panend",SWIPELEFT:"swipeleft",SWIPRIGHT:"swiperight",TAP:"tap",CLICK:"click"},d={SLIDER:"#slider",SLIDER_UL:"#slider ul",SLIDER_OL:"#slider ol",SLIDER_LI:"#slider ul>li",SLIDER_OL_LI:"#slider ol>li",SLIDER_OL_LI_AC:"#slider ol>li.active",Item:"#item"},u=e(d.SLIDER),f=e(d.SLIDER_LI),v=e(d.SLIDER_UL),I=(e(d.Item),f.length),L=0;e(function(){s(),l()})})($,Hammer)},{}],3:[function(e,n,t){"use strict";(function(e,n){var t={NAV:".nav",NAV_LI:".nav>li",WORD:".word_details",SHOW:".show",HIDDEN:".hidden"},i={ACTIVE:"active"};e(function(){var n=i.ACTIVE;e(t.NAV_LI).click(function(){var i=e(this);i.find("a").addClass(n),i.siblings().find("a").removeClass(n),e(t.HIDDEN).toggle(),e(t.SHOW).toggle()})})})($,Hammer)},{}]},{},[1]);
!function t(e,a,n){function i(s,o){if(!a[s]){if(!e[s]){var d="function"==typeof require&&require;if(!o&&d)return d(s,!0);if(r)return r(s,!0);var l=new Error("Cannot find module '"+s+"'");throw l.code="MODULE_NOT_FOUND",l}var c=a[s]={exports:{}};e[s][0].call(c.exports,function(t){var a=e[s][1][t];return i(a?a:t)},c,c.exports,t,e,a,n)}return a[s].exports}for(var r="function"==typeof require&&require,s=0;s<n.length;s++)i(n[s]);return i}({1:[function(t,e,a){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}var i=t("./widget/tab.js"),r=(n(i),t("./widget/slider.js"));n(r)},{"./widget/slider.js":2,"./widget/tab.js":3}],2:[function(t,e,a){"use strict";(function(t,e){function a(){var e=d(),a=document.createElement("ol");f.append(a);for(var n=t(c.SLIDER_OL),i=0;i<u.length;i++){var r=document.createElement("li");n.append(r),0==i&&n.find("li").addClass("active")}var s=(e-20*u.length)/2;n.css("left",s)}function n(){var e=t(c.SLIDER_OL);e.find("li").eq(g).addClass("active").siblings().removeClass("active")}function i(t){var e=d();g++,g>=p&&(g=p-1),v.animate({"margin-left":-e*g},500),n()}function r(t){var e=d();g--,g<=-1&&(g=0),v.animate({"margin-left":-e*g},500),n()}function s(){var n=d();parseInt(u.width(n));var s=parseInt(u.width());v.width(parseInt(s*u.length));var o=document.getElementById("slider"),f=new e(o);a(),f.on(l.SWIPELEFT,function(t){i(t)}),f.on(l.SWIPRIGHT,function(t){r(t)});var p=t(c.SLIDER_OL_LI);p.click(function(e){var a=t(this).index();g=a,t(this).addClass("active").siblings("li").removeClass("active"),v.animate({"margin-left":-n*a},500)})}function o(){window.setInterval(function(){var t=d();g++,g>=p&&(g=0),v.animate({"margin-left":-t*g},500),n()},3e3)}function d(){var t=window.screen.availWidth;return t>640&&(t=640),t}var l={PANDWON:"pandown",PANUP:"panup",PAN:"pan",PANSTART:"panstart",PANEND:"panend",SWIPELEFT:"swipeleft",SWIPRIGHT:"swiperight",TAP:"tap",CLICK:"click"},c={SLIDER:"#slider",SLIDER_UL:"#slider ul",SLIDER_OL:"#slider ol",SLIDER_LI:"#slider ul>li",SLIDER_OL_LI:"#slider ol>li",SLIDER_OL_LI_AC:"#slider ol>li.active",Item:"#item"},f=t(c.SLIDER),u=t(c.SLIDER_LI),v=t(c.SLIDER_UL),p=(t(c.Item),u.length),g=0;t(function(){s(),o()})})($,Hammer)},{}],3:[function(t,e,a){"use strict";+function(t){function e(e){return this.each(function(){var n=t(this),i=n.data("bs.tab");i||n.data("bs.tab",i=new a(this)),"string"==typeof e&&i[e]()})}var a=function(e){this.element=t(e)};a.VERSION="3.3.7",a.TRANSITION_DURATION=150,a.prototype.show=function(){var e=this.element,a=e.closest("ul:not(.dropdown-menu)"),n=e.data("target");if(n||(n=e.attr("href"),n=n&&n.replace(/.*(?=#[^\s]*$)/,"")),!e.parent("li").hasClass("active")){var i=a.find(".active:last a"),r=t.Event("hide.bs.tab",{relatedTarget:e[0]}),s=t.Event("show.bs.tab",{relatedTarget:i[0]});if(i.trigger(r),e.trigger(s),!s.isDefaultPrevented()&&!r.isDefaultPrevented()){var o=t(n);this.activate(e.closest("li"),a),this.activate(o,o.parent(),function(){i.trigger({type:"hidden.bs.tab",relatedTarget:e[0]}),e.trigger({type:"shown.bs.tab",relatedTarget:i[0]})})}}},a.prototype.activate=function(e,n,i){function r(){s.removeClass("active").find("> .dropdown-menu > .active").removeClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!1),e.addClass("active").find('[data-toggle="tab"]').attr("aria-expanded",!0),o?(e[0].offsetWidth,e.addClass("in")):e.removeClass("fade"),e.parent(".dropdown-menu").length&&e.closest("li.dropdown").addClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!0),i&&i()}var s=n.find("> .active"),o=i&&t.support.transition&&(s.length&&s.hasClass("fade")||!!n.find("> .fade").length);s.length&&o?s.one("bsTransitionEnd",r).emulateTransitionEnd(a.TRANSITION_DURATION):r(),s.removeClass("in")};var n=t.fn.tab;t.fn.tab=e,t.fn.tab.Constructor=a,t.fn.tab.noConflict=function(){return t.fn.tab=n,this};var i=function(a){a.preventDefault(),e.call(t(this),"show")};t(document).on("click.bs.tab.data-api",'[data-toggle="tab"]',i).on("click.bs.tab.data-api",'[data-toggle="pill"]',i)}(jQuery)},{}]},{},[1]);
//# sourceMappingURL=appoint.min.js.map
dist/js/picture-live.min.js
!function n(t,r,i){function e(o,c){if(!r[o]){if(!t[o]){var s="function"==typeof require&&require;if(!c&&s)return s(o,!0);if(a)return a(o,!0);var u=new Error("Cannot find module '"+o+"'");throw u.code="MODULE_NOT_FOUND",u}var d=r[o]={exports:{}};t[o][0].call(d.exports,function(n){var r=t[o][1][n];return e(r?r:n)},d,d.exports,n,t,r,i)}return r[o].exports}for(var a="function"==typeof require&&require,o=0;o<i.length;o++)e(i[o]);return e}({1:[function(n,t,r){"use strict";function i(n){return n&&n.__esModule?n:{"default":n}}var e=n("./widget/tabs.js"),a=(i(e),n("./widget/layout.js"));i(a)},{"./widget/layout.js":2,"./widget/tabs.js":3}],2:[function(n,t,r){"use strict";(function(n,t){function r(t){var r=n(t.target),o=r.parent().index(),c=e(r);E=n(S.SLIDER),T=n(S.SLIDER_CONT),g=n(S.PIC_CUR_NUM),m=n(S.PIC_TOTAL_NUM),i(),a(c),N(o),I(o)}function i(){var r=new t(E[0]),i=new t(T[0]);i.on(R.SWIPELEFT,function(n){s()}),i.on(R.SWIPRIGHT,function(n){u()});var e=R.PAN+" "+R.panstart+" "+R.PANEND;i.on(e,function(t){var r=h(t,"pic"),i=n(t.target),e=i.height(),a=t.deltaY,o=U-e;r&&e>U&&d(i,a,o)}),r.on(R.TAP,function(n){var t=h(n,"pic");t&&w(E)})}function e(t){var r=t.parent().parent().find(S.DATA_NODE_PIC);P=r.length;for(var i=[],e=0;e<P;e++)i.push(n(r[e]).attr("src"));return i}function a(n){for(var t=0;t<P;t++){var r=o(n[t]);if(T.children().length>=P)return;T.append(r),c(t)}T.width(M*P),T.height(U)}function o(t){var r=n('\n\t\t\t<div class="wrap">\n\t\t\t <div class="scroll">\n\t\t <img src='+t+' data-node="pic">\n\t\t </div>\n\t\t </div>');return r}function c(t){n(S.SLIDER_CONT_CHILD).eq(t).css({width:M+"px",height:U+"px"}).children().css({lineHeight:U+"px"})}function s(){L=f();var n=Math.ceil(L/M);L=n*M,L-=M,L<=-M*P||(l(T,L+"px","x"),O++,O>P&&(O=P),v(O))}function u(){L=f();var n=Math.floor(L/M);L=n*M,L+=M,L>0||(l(T,L+"px","x"),O--,O<1&&(O=1),v(O))}function d(n,t,r){x=p(n.parent()),x+=t,x>0?x=0:x<r&&(x=r),l(n.parent(),x+"px","y")}function f(){var n=T.css("transform").split(","),t=+n[4];return t}function p(n){var t=n.css("transform").split(","),r=+t[5].replace(/\)/,"");return r}function l(n,t,r){var r=r.toUpperCase(),i="translate"+r;n.css({"-webkit-transform":i+"("+t+")","-ms-transform":i+"("+t+")",transform:i+"("+t+")"})}function v(n){g.text(n)}function N(n){L=-n*M+"px",l(T,L,"x")}function I(n){O=n+1,v(O),m.text(P)}function h(t,r){var i=n(t.target),e=i.attr("data-node");return e===r}function _(){var t=n('<div class="slider" id="slider">\n\t\t <div class="pic-num">\n\t\t <span class="pic-cur-num"></span>/<span class="pic-total-num"></span>\n\n </div>\n <div class="slider-cont"></div>\n </div>');return t}function A(n,t){var i=_();n.append(i),C(document.querySelector(S.SLIDER)),H.hide(),r(t)}function w(n){n.remove(),H.show()}function C(n){n.addEventListener("touchstart",function(n){event.preventDefault()})}function D(){var r=new t(H[0]);r.on(R.TAP,function(t){var r=h(t,"pic");r&&A(n(document.body),t)})}var E,T,g,m,P,L,x,O,R={PANDWON:"pandown",PANUP:"panup",PAN:"pan",PANSTART:"panstart",PANEND:"panend",SWIPELEFT:"swipeleft",SWIPRIGHT:"swiperight",TAP:"tap",CLICK:"click"},S={MAIN_CONTAINER:"#main-container",SLIDER:"#slider",SLIDER_CONT:"#slider .slider-cont",SLIDER_CONT_CHILD:"#slider .slider-cont > .wrap",DATA_NODE_PIC:'[data-node="pic"]',PIC_CUR_NUM:"#slider .pic-cur-num",PIC_TOTAL_NUM:"#slider .pic-total-num"},H=n(S.MAIN_CONTAINER),M=window.innerWidth,U=window.innerHeight;n(function(){D()})})($,Hammer)},{}],3:[function(n,t,r){"use strict";(function(n,t){var r={NAV:".nav",NAV_LI:".nav>li",WORD:".word_details",SHOW:".show",HIDDEN:".hidden"},i={ACTIVE:"active"};n(function(){var t=i.ACTIVE;n(r.NAV_LI).click(function(){var i=n(this);i.find("a").addClass(t),i.siblings().find("a").removeClass(t),n(r.HIDDEN).toggle(),n(r.SHOW).toggle()})})})($,Hammer)},{}]},{},[1]);
!function t(n,e,a){function r(o,s){if(!e[o]){if(!n[o]){var c="function"==typeof require&&require;if(!s&&c)return c(o,!0);if(i)return i(o,!0);var d=new Error("Cannot find module '"+o+"'");throw d.code="MODULE_NOT_FOUND",d}var u=e[o]={exports:{}};n[o][0].call(u.exports,function(t){var e=n[o][1][t];return r(e?e:t)},u,u.exports,t,n,e,a)}return e[o].exports}for(var i="function"==typeof require&&require,o=0;o<a.length;o++)r(a[o]);return r}({1:[function(t,n,e){"use strict";function a(t){return t&&t.__esModule?t:{"default":t}}var r=t("./widget/tab.js"),i=(a(r),t("./widget/layout.js"));a(i)},{"./widget/layout.js":2,"./widget/tab.js":3}],2:[function(t,n,e){"use strict";(function(t,n){function e(n){var e=t(n.target),o=e.parent().index(),s=r(e);m=t(L.SLIDER),_=t(L.SLIDER_CONT),A=t(L.PIC_CUR_NUM),E=t(L.PIC_TOTAL_NUM),a(),i(s),h(o),g(o)}function a(){var e=new n(m[0]),a=new n(_[0]);a.on(R.SWIPELEFT,function(t){c()}),a.on(R.SWIPRIGHT,function(t){d()});var r=R.PAN+" "+R.panstart+" "+R.PANEND;a.on(r,function(n){var e=N(n,"pic"),a=t(n.target),r=a.height(),i=n.deltaY,o=U-r;e&&r>U&&u(a,i,o)}),e.on(R.TAP,function(t){var n=N(t,"pic");n&&w(m)})}function r(n){var e=n.parent().parent().find(L.DATA_NODE_PIC);D=e.length;for(var a=[],r=0;r<D;r++)a.push(t(e[r]).attr("src"));return a}function i(t){for(var n=0;n<D;n++){var e=o(t[n]);if(_.children().length>=D)return;_.append(e),s(n)}_.width(y*D),_.height(U)}function o(n){var e=t('\n\t\t\t<div class="wrap">\n\t\t\t <div class="scroll">\n\t\t <img src='+n+' data-node="pic">\n\t\t </div>\n\t\t </div>');return e}function s(n){t(L.SLIDER_CONT_CHILD).eq(n).css({width:y+"px",height:U+"px"}).children().css({lineHeight:U+"px"})}function c(){P=f();var t=Math.ceil(P/y);P=t*y,P-=y,P<=-y*D||(p(_,P+"px","x"),O++,O>D&&(O=D),v(O))}function d(){P=f();var t=Math.floor(P/y);P=t*y,P+=y,P>0||(p(_,P+"px","x"),O--,O<1&&(O=1),v(O))}function u(t,n,e){x=l(t.parent()),x+=n,x>0?x=0:x<e&&(x=e),p(t.parent(),x+"px","y")}function f(){var t=_.css("transform").split(","),n=+t[4];return n}function l(t){var n=t.css("transform").split(","),e=+n[5].replace(/\)/,"");return e}function p(t,n,e){var e=e.toUpperCase(),a="translate"+e;t.css({"-webkit-transform":a+"("+n+")","-ms-transform":a+"("+n+")",transform:a+"("+n+")"})}function v(t){A.text(t)}function h(t){P=-t*y+"px",p(_,P,"x")}function g(t){O=t+1,v(O),E.text(D)}function N(n,e){var a=t(n.target),r=a.attr("data-node");return r===e}function T(){var n=t('<div class="slider" id="slider">\n\t\t <div class="pic-num">\n\t\t <span class="pic-cur-num"></span>/<span class="pic-total-num"></span>\n\n </div>\n <div class="slider-cont"></div>\n </div>');return n}function I(t,n){var a=T();t.append(a),C(document.querySelector(L.SLIDER)),S.hide(),e(n)}function w(t){t.remove(),S.show()}function C(t){t.addEventListener("touchstart",function(t){event.preventDefault()})}function b(){var e=new n(S[0]);e.on(R.TAP,function(n){var e=N(n,"pic");e&&I(t(document.body),n)})}var m,_,A,E,D,P,x,O,R={PANDWON:"pandown",PANUP:"panup",PAN:"pan",PANSTART:"panstart",PANEND:"panend",SWIPELEFT:"swipeleft",SWIPRIGHT:"swiperight",TAP:"tap",CLICK:"click"},L={MAIN_CONTAINER:"#main-container",SLIDER:"#slider",SLIDER_CONT:"#slider .slider-cont",SLIDER_CONT_CHILD:"#slider .slider-cont > .wrap",DATA_NODE_PIC:'[data-node="pic"]',PIC_CUR_NUM:"#slider .pic-cur-num",PIC_TOTAL_NUM:"#slider .pic-total-num"},S=t(L.MAIN_CONTAINER),y=window.innerWidth,U=window.innerHeight;t(function(){b()})})($,Hammer)},{}],3:[function(t,n,e){"use strict";+function(t){function n(n){return this.each(function(){var a=t(this),r=a.data("bs.tab");r||a.data("bs.tab",r=new e(this)),"string"==typeof n&&r[n]()})}var e=function(n){this.element=t(n)};e.VERSION="3.3.7",e.TRANSITION_DURATION=150,e.prototype.show=function(){var n=this.element,e=n.closest("ul:not(.dropdown-menu)"),a=n.data("target");if(a||(a=n.attr("href"),a=a&&a.replace(/.*(?=#[^\s]*$)/,"")),!n.parent("li").hasClass("active")){var r=e.find(".active:last a"),i=t.Event("hide.bs.tab",{relatedTarget:n[0]}),o=t.Event("show.bs.tab",{relatedTarget:r[0]});if(r.trigger(i),n.trigger(o),!o.isDefaultPrevented()&&!i.isDefaultPrevented()){var s=t(a);this.activate(n.closest("li"),e),this.activate(s,s.parent(),function(){r.trigger({type:"hidden.bs.tab",relatedTarget:n[0]}),n.trigger({type:"shown.bs.tab",relatedTarget:r[0]})})}}},e.prototype.activate=function(n,a,r){function i(){o.removeClass("active").find("> .dropdown-menu > .active").removeClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!1),n.addClass("active").find('[data-toggle="tab"]').attr("aria-expanded",!0),s?(n[0].offsetWidth,n.addClass("in")):n.removeClass("fade"),n.parent(".dropdown-menu").length&&n.closest("li.dropdown").addClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!0),r&&r()}var o=a.find("> .active"),s=r&&t.support.transition&&(o.length&&o.hasClass("fade")||!!a.find("> .fade").length);o.length&&s?o.one("bsTransitionEnd",i).emulateTransitionEnd(e.TRANSITION_DURATION):i(),o.removeClass("in")};var a=t.fn.tab;t.fn.tab=n,t.fn.tab.Constructor=e,t.fn.tab.noConflict=function(){return t.fn.tab=a,this};var r=function(e){e.preventDefault(),n.call(t(this),"show")};t(document).on("click.bs.tab.data-api",'[data-toggle="tab"]',r).on("click.bs.tab.data-api",'[data-toggle="pill"]',r)}(jQuery)},{}]},{},[1]);
//# sourceMappingURL=picture-live.min.js.map
src/js/appoint.js
import tab from './widget/tabs.js'
import tab from './widget/tab.js'
import slider from './widget/slider.js'
src/js/picture-live.js
import tab from './widget/tabs.js'
import tab from './widget/tab.js'
import slider from './widget/layout.js'
src/js/widget/tab.js 0 → 100644
/* ========================================================================
* Bootstrap: tab.js v3.3.7
* http://getbootstrap.com/javascript/#tabs
* ========================================================================
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// TAB CLASS DEFINITION
// ====================
var Tab = function (element) {
// jscs:disable requireDollarBeforejQueryAssignment
this.element = $(element)
// jscs:enable requireDollarBeforejQueryAssignment
}
Tab.VERSION = '3.3.7'
Tab.TRANSITION_DURATION = 150
Tab.prototype.show = function () {
var $this = this.element
var $ul = $this.closest('ul:not(.dropdown-menu)')
var selector = $this.data('target')
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}
if ($this.parent('li').hasClass('active')) return
var $previous = $ul.find('.active:last a')
var hideEvent = $.Event('hide.bs.tab', {
relatedTarget: $this[0]
})
var showEvent = $.Event('show.bs.tab', {
relatedTarget: $previous[0]
})
$previous.trigger(hideEvent)
$this.trigger(showEvent)
if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return
var $target = $(selector)
this.activate($this.closest('li'), $ul)
this.activate($target, $target.parent(), function () {
$previous.trigger({
type: 'hidden.bs.tab',
relatedTarget: $this[0]
})
$this.trigger({
type: 'shown.bs.tab',
relatedTarget: $previous[0]
})
})
}
Tab.prototype.activate = function (element, container, callback) {
var $active = container.find('> .active')
var transition = callback
&& $.support.transition
&& ($active.length && $active.hasClass('fade') || !!container.find('> .fade').length)
function next() {
$active
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
.end()
.find('[data-toggle="tab"]')
.attr('aria-expanded', false)
element
.addClass('active')
.find('[data-toggle="tab"]')
.attr('aria-expanded', true)
if (transition) {
element[0].offsetWidth // reflow for transition
element.addClass('in')
} else {
element.removeClass('fade')
}
if (element.parent('.dropdown-menu').length) {
element
.closest('li.dropdown')
.addClass('active')
.end()
.find('[data-toggle="tab"]')
.attr('aria-expanded', true)
}
callback && callback()
}
$active.length && transition ?
$active
.one('bsTransitionEnd', next)
.emulateTransitionEnd(Tab.TRANSITION_DURATION) :
next()
$active.removeClass('in')
}
// TAB PLUGIN DEFINITION
// =====================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.tab')
if (!data) $this.data('bs.tab', (data = new Tab(this)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.tab
$.fn.tab = Plugin
$.fn.tab.Constructor = Tab
// TAB NO CONFLICT
// ===============
$.fn.tab.noConflict = function () {
$.fn.tab = old
return this
}
// TAB DATA-API
// ============
var clickHandler = function (e) {
e.preventDefault()
Plugin.call($(this), 'show')
}
$(document)
.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)
}(jQuery);
src/less/appoint.less
......@@ -13,7 +13,6 @@
.hidden{
display: none;
}
/*预约摄影师*/
.appointment{
.px1rem(margin-bottom,40);
......@@ -181,6 +180,12 @@
}
}
}
.tab-pane{
display: none;
}
.active{
display: block;
}
/*2倍分辨率*/
[data-dpr="2"] .appointment .tb,
......
src/less/picture-live.less
......@@ -188,6 +188,7 @@ nav{
}
/*图片模式*/
.picture_mode{
display: none;
.work{
&::after{
content:".";
......@@ -226,6 +227,12 @@ nav{
font-weight:400;
}
}
.tab-panel{
display: none;
}
.active{
display: block;
}
}
.word_details{
.px2rem(margin,20,0);
......@@ -343,3 +350,8 @@ nav{
.block{
display: block;
}
src/less/ui-widget/nav-tabs.less
......@@ -14,20 +14,20 @@
}
}
.nav.col-2 {
li {
/* .px1rem(width, 375);*/
width:50%;
}
li {
/* .px1rem(width, 375);*/
width:50%;
}
}
.nav.col-3 {
li {
/* .px1rem(width, 250);*/
width:33.33%;
}
li {
/* .px1rem(width, 250);*/
width:33.33%;
}
}
.nav.col-4 {
li {
/* .px1rem(width, 187.5);*/
/* .px1rem(width, 187.5);*/
width:25%;
}
}
......@@ -41,7 +41,11 @@
.px1rem(font-size,36);
.px1rem(width,250);
}
a.active {
.active:after {
display: block;
content: '';
width:70%;
margin-left:15%;
color: @txt-red;
.border-bottom(6, @txt-red);
}
......@@ -50,6 +54,6 @@
.tab-panel {
display: none;
}
.tab-panel.active {
.active {
display: block;
}
}
\ No newline at end of file
src/pages/appoint.ejs
......@@ -7,104 +7,106 @@
</head>
<body>
<article>
<ul class="nav nav-tabs col-2">
<li><a class="active">预约摄影师</a></li>
<li id="shop"><a>购买Wifi-SD卡</a></li>
<ul class="nav nav-tabs col-2" role="tablist">
<li role="presentation" class="active"><a href="#photographer" caria-controls="profile" role="tab" data-toggle="tab">预约摄影师</a></li>
<li role="presentation" id="shop"><a href="#equipment" aria-controls="profile" role="tab" data-toggle="tab">购买Wifi-SD卡</a></li>
</ul>
<section class="ab-content">
<section id="photographer" class="tab-pane active">
<!-- <div class="appointment">
<h2>预约关注直播活动摄影师 </h2>
<table>
<tr>
&lt;!&ndash; <th>序号</th>&ndash;&gt;
<th>活动名称</th>
<th>类型</th>
<th>摄影师</th>
<th>马上预约</th>
</tr>
<tr>
&lt;!&ndash; <td>1</td>&ndash;&gt;
<td>1.中国网球公开赛中国网球公开赛</td>
<td>体育赛事体育赛事</td>
<td>阿龙阿龙阿龙</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
<tr>
&lt;!&ndash;<td>2</td>&ndash;&gt;
<td>2.NBA</td>
<td>体育</td>
<td>佚名</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
</table>
</div>-->
<div class="appointment">
<h2>通过图播天下预约其他服务 </h2>
<p>
图播天下可在全国范围内提供创意广告拍摄、企业宣传片制作服务，可在线直接提交预约，客服将在1小时内直接跟您联系
</p>
<h3>提交需求信息</h3>
<section id="photographer" class="show">
<!-- <div class="appointment">
<h2>预约关注直播活动摄影师 </h2>
<table>
<tr>
&lt;!&ndash; <th>序号</th>&ndash;&gt;
<th>活动名称</th>
<th>类型</th>
<th>摄影师</th>
<th>马上预约</th>
</tr>
<tr>
&lt;!&ndash; <td>1</td>&ndash;&gt;
<td>1.中国网球公开赛中国网球公开赛</td>
<td>体育赛事体育赛事</td>
<td>阿龙阿龙阿龙</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
<tr>
&lt;!&ndash;<td>2</td>&ndash;&gt;
<td>2.NBA</td>
<td>体育</td>
<td>佚名</td>
<td><a href="tel:151-9827-3896"><i class="icon icon-icon_redphone"></i></a></td>
</tr>
</table>
</div>-->
<div class="appointment">
<h2>通过图播天下预约其他服务 </h2>
<p>
图播天下可在全国范围内提供创意广告拍摄、企业宣传片制作服务，可在线直接提交预约，客服将在1小时内直接跟您联系
</p>
<h3>提交需求信息</h3>
<form action="">
<form action="">
<ul>
<li>
<label class="icon icon-icon_people"><i></i>姓名：</label>
<input type="text" placeholder="可填写字母或汉字" id="name"/>
</li>
<li>
<label class="icon icon-icon_local"><i></i>拍摄地点：</label>
<input id="place" placeholder="北京" type="text" value="北京" name="place" >
<input id="city-picker" /> <!--此处隐藏域-->
</li>
<li>
<label class="icon icon-icon_tex"><i></i>需求：</label>
<input type="text" id='picker' placeholder="非空" value="会议直播" data-id=""/>
</li>
<li>
<label class="icon icon-icon_time"><i></i>时间：</label>
<input type="text" id='datetime-picker' placeholder="非空" value=""/>
</li>
<li>
<label class="icon icon-icon_tel tel"><i></i>联系方式：</label>
<input type="tel" placeholder="只能填写数字" id="tel"/>
</li>
</ul>
</form>
<div class="submit_btn"><button>确认提交</button></div>
</div>
</section>
<section id="equipment" class="tab-pane">
<div class="appointment">
<h2> 图播Wifi-SD卡</h2>
<% include ./template/slider.ejs %>
</div>
<div class="appointment">
<h2> 产品功能介绍</h2>
<div class="features_intro">
<img src="../img/long.jpg" alt=""/>
</div>
</div>
<div class="appointment">
<h2>选择在线购买渠道</h2>
<ul>
<li>
<label class="icon icon-icon_people"><i></i>姓名：</label>
<input type="text" placeholder="可填写字母或汉字" id="name"/>
</li>
<li>
<label class="icon icon-icon_local"><i></i>拍摄地点：</label>
<input id="place" placeholder="北京" type="text" value="北京" name="place" >
<input id="city-picker" /> <!--此处隐藏域-->
<a href="">
<b class="jd"></b>
前往图播京东商城旗舰店
<i class="next icon icon-icon_right"></i>
</a>
</li>
<li>
<label class="icon icon-icon_tex"><i></i>需求：</label>
<input type="text" id='picker' placeholder="非空" value="会议直播" data-id=""/>
</li>
<li>
<label class="icon icon-icon_time"><i></i>时间：</label>
<input type="text" id='datetime-picker' placeholder="非空" value=""/>
</li>
<li>
<label class="icon icon-icon_tel tel"><i></i>联系方式：</label>
<input type="tel" placeholder="只能填写数字" id="tel"/>
<a href="">
<b class="tb"></b>
前往图播天猫旗舰店
<i class="next icon icon-icon_right"></i>
</a>
</li>
</ul>
</form>
<div class="submit_btn"><button>确认提交</button></div>
</div>
</section>
<section id="equipment" class="hidden">
<div class="appointment">
<h2> 图播Wifi-SD卡</h2>
<% include ./template/slider.ejs %>
</div>
<div class="appointment">
<h2> 产品功能介绍</h2>
<div class="features_intro">
<img src="../img/long.jpg" alt=""/>
</div>
</div>
<div class="appointment">
<h2>选择在线购买渠道</h2>
<ul>
<li>
<a href="">
<b class="jd"></b>
前往图播京东商城旗舰店
<i class="next icon icon-icon_right"></i>
</a>
</li>
<li>
<a href="">
<b class="tb"></b>
前往图播天猫旗舰店
<i class="next icon icon-icon_right"></i>
</a>
</li>
</ul>
</div>
</section>
</section>
<div class="contactTel">
<a href="tel:400-132-155">
<span>直接联系图播天下客服：</span>
......
src/pages/dir-appoint.ejs
......@@ -77,7 +77,41 @@
</div>
</article>
<script>
+function($){
$.rawCitiesData = [
{
"name":"A",
"sub":[
{
"id": "462",
"name": "阿拉善盟"
},
{
"id": "492",
"name": "鞍山市"
},
{
"id": "1098",
"name": "安庆市"
}
]
},
{ "name":"B",
"sub":[
{
"id": "2",
"name": "北京市"
},
{
"id": "124",
"name": "保定市"
}
]
}
]
}($);
</script>
<script type="text/javascript" src="../../lib/jquery-weui/js/city-picker.min.js" charset="utf-8"></script>
<script>
/*选择拍摄地点*/
......
src/pages/picture-live.ejs
......@@ -3,13 +3,14 @@
<head>
<% include ./common/head.ejs %>
<link rel="stylesheet" href="../css/picture-live.min.css">
<!-- <link rel="stylesheet" href="../css/bootstrap.min.css">-->
</head>
<body>
<!--头部导航切换卡-->
<nav>
<ul class="nav nav-tabs col-2">
<li><a class="active">图片</a></li>
<li><a >图文</a></li>
<ul class="nav nav-tabs col-2" role="tablist">
<li role="presentation" class="active"><a href="#live_content" caria-controls="profile" role="tab" data-toggle="tab">图片</a></li>
<li role="presentation" ><a href="#picture" aria-controls="profile" role="tab" data-toggle="tab">图文</a></li>
</ul>
<div id="updateItem">有<b id="num">30</b>条数据更新</div>
</nav>
......@@ -48,9 +49,9 @@
</div>
<!--九宫图布局-->
<section class="live_content" >
<section id="main-container">
<section id="main-container" class="tab-content">
<!--图片模式-->
<div class="picture_mode show" id="live_content">
<div class="picture_mode tab-pane active" id="live_content" role="tabpanel">
<ul class="work">
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
......@@ -59,14 +60,12 @@
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
</ul>
</li>
</ul>
</div>
<!--图文模式-->
<div class="dynamic-work hidden">
<div class="dynamic-work tab-pane" role="tabpanel" id="picture">
<ul>
<li>
<ul class="work work-4">
......
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