Authored by xuqi

footer style & js improve

... ... @@ -13,37 +13,26 @@
<div id="foot-services">
<ul class="two-dim clearfix">
<li class="left">
<div>
<a href="javascript:void(0);">
<img class="dim-img lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/03/20/16/01863b297051f11c2be833785566cf11d1.png"></a>
<p>YOHO!有货</p>
</div>
<img class="dim-img lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/03/20/16/01863b297051f11c2be833785566cf11d1.png">
<p>YOHO!有货</p>
</li>
<li class="left">
<div>
<a href="javascript:void(0);">
<img class="dim-img lazy" data-original="http://img12.static.yhbimg.com/adpic/2014/04/11/14/022ddc2b6d6b2fcabee8cdc03735e5687e.jpg"></a>
<p>微信</p>
</div>
<img class="dim-img lazy" data-original="http://img12.static.yhbimg.com/adpic/2014/04/11/14/022ddc2b6d6b2fcabee8cdc03735e5687e.jpg">
<p>微信</p>
</li>
<li class="left">
<div>
<a href="javascript:void(0);">
<img class="dim-img lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/03/20/16/02e69d0afa222cf173d17411fd04be380e.png"></a>
<p>微博</p>
</div>
<img class="dim-img lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/03/20/16/02e69d0afa222cf173d17411fd04be380e.png">
<p>微博</p>
</li>
</ul>
</div>
</div>
<p class="item-nav center" id="button-services">
<a href="javascript:void(0);" key="0">
<span class="iconfont cur">O</span>
</a>
<p class="item-nav center">
<span class="iconfont cur" key="0">&#xe619;</span>
</p>
</dd>
<dd>
<div id="feedbackBoxList" class="foot-panel">
<div id="feed-back-box-list" class="foot-panel">
<div class="title">
<div class="title-line"></div>
<div class="text">
... ... @@ -51,73 +40,77 @@
</div>
</div>
<ul class="vote clearfix">
<li style="display:block" key="0">
<form action="#" id="feedbackForm">
<input type="hidden" name="question_id" id="question_id" value="38">
<input type="hidden" name="feedback_id" id="feedback_id" value="5">
<li key="0">
<form class="feed-back-form" action="#">
<div>您喜欢有货的新版吗?</div>
<div class="vote-item clearfix">
<p>
<input type="radio" name="solution" value="33">非常喜欢</p>
<input type="radio" name="solution" value="33">非常喜欢
</p>
<p>
<input type="radio" name="solution" value="34">喜欢</p>
<input type="radio" name="solution" value="34">喜欢
</p>
<p>
<input type="radio" name="solution" value="35">一般般</p>
<input type="radio" name="solution" value="35">一般般
</p>
<p>
<input type="radio" name="solution" value="36">不喜欢</p>
<input type="radio" name="solution" value="36">不喜欢
</p>
<p>
<input type="radio" name="solution" value="37">非常不喜欢</p>
<input type="radio" name="solution" value="37">非常不喜欢
</p>
</div>
<div>
<a href="javascript:void(0);" id="feedbackBtn" class="button">提交</a>
<span class="feed-back-btn button">提交</span>
</div>
<input class="question-id" type="hidden" name="question_id" value="38">
<input class="feedback-id" type="hidden" name="feedback_id" value="5">
</form>
</li>
<li style="display:none" key="1">
<form action="#" id="feedbackForm">
<input type="hidden" name="question_id" id="question_id" value="39">
<input type="hidden" name="feedback_id" id="feedback_id" value="5">
<li class="hide" key="1">
<form class="feed-back-form" action="#">
<div>您可以方便的找到想查看的内容吗?</div>
<div class="vote-item clearfix">
<p>
<input type="radio" name="solution" value="38">非常方便</p>
<input type="radio" name="solution" value="38">非常方便
</p>
<p>
<input type="radio" name="solution" value="39">方便</p>
<input type="radio" name="solution" value="39">方便
</p>
<p>
<input type="radio" name="solution" value="40">一般般</p>
<input type="radio" name="solution" value="40">一般般
</p>
<p>
<input type="radio" name="solution" value="41">不方便</p>
<input type="radio" name="solution" value="41">不方便
</p>
<p>
<input type="radio" name="solution" value="42">非常不方便</p>
<input type="radio" name="solution" value="42">非常不方便
</p>
</div>
<div>
<a href="javascript:void(0);" id="feedbackBtn" class="button">提交</a>
<span class="feed-back-btn button">提交</span>
</div>
<input class="question-id" type="hidden" value="39">
<input class="feedback-id" type="hidden" value="5">
</form>
</li>
<li style="display:none" key="2">
<form action="#" id="feedbackForm">
<input type="hidden" name="question_id" id="question_id" value="37">
<input type="hidden" name="feedback_id" id="feedback_id" value="5">
<li class="hide" key="2">
<form class="feed-back-form" action="#">
<div>您对新版还有哪些意见或建议?</div>
<textarea name="answer" id="feedback_answer"></textarea>
<textarea name="answer" id="feedback-answer"></textarea>
<div>
<a href="javascript:void(0);" id="feedbackBtn" class="button">提交</a>
<span class="feed-back-btn button">提交</span>
</div>
<input class="question-id" type="hidden" value="37">
<input class="feedback-id" type="hidden" value="5">
</form>
</li>
</ul>
</div>
<p id="feedbackPage" class="item-nav center">
<a href="javascript:void(0);">
<span class="iconfont cur">O</span>
</a>
<a href="javascript:void(0);">
<span class="iconfont ">o</span>
</a>
<a href="javascript:void(0);">
<span class="iconfont ">o</span>
</a>
<p id="feed-back-page" class="item-nav center">
<span class="iconfont cur">&#xe619;</span>
<span class="iconfont ">&#xe619;</span>
<span class="iconfont ">&#xe619;</span>
</p>
</dd>
<dd class="last">
... ... @@ -148,10 +141,8 @@
</ul>
</div>
</div>
<p class="item-nav center" id="button-mobile">
<a href="javascript:void(0);">
<span class="iconfont cur">O</span>
</a>
<p class="item-nav center">
<span class="iconfont cur">&#xe619;</span>
</p>
</dd>
</dl>
... ... @@ -182,8 +173,8 @@
</span>
</div>
<div class="right subscribe footer-right">
<input class="rgb6 top" name="subscriberBox" id="subscriberBox" value="订阅我们的邮件">
<a href="javascript:void(0);" id="subscriberBtn" class="ifont rgbf">m</a>
<input id="subscriber-box" class="rgb6 top" name="subscriberBox"value="订阅我们的邮件">
<a id="subscriber-btn" href="javascript:void(0);" class="ifont rgbf">m</a>
</div>
</div>
</div>
... ...
... ... @@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Wed Dec 2 17:34:20 2015
Created by FontForge 20120731 at Fri Dec 4 15:54:33 2015
By Ads
</metadata>
<defs>
... ... @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Wed Dec 2 17:34:20 2015
bbox="0 -214 1172.1 864"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E616"
unicode-range="U+0078-E619"
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
... ... @@ -84,5 +84,13 @@ d="M704 569l-41 39l-343 -320l343 -320l41 39l-301 281z" />
<glyph glyph-name="uniE616" unicode="&#xe616;" horiz-adv-x="1173"
d="M586 588q-64 150 -188 203q-114 47 -222 -7q-112 -56 -155 -192q-20 -67 -21 -144q0 -41 9 -78.5t24 -66.5t39 -57.5t47 -48.5t55.5 -43t56.5 -38t58.5 -35.5t53.5 -33.5q63 -42 118 -94.5t86.5 -95t39.5 -69.5q4 19 25.5 50t53.5 66t75 74t88 71q21 15 53.5 35.5t58 36
t57 38t55 43t47 48t39 56.5t25 66.5t8.5 78.5q0 75 -19.5 138t-52.5 105.5t-76.5 70.5t-91 37.5t-98 1t-96 -34.5t-85.5 -72.5t-67 -108.5z" />
<glyph glyph-name="uniE617" unicode="&#xe617;"
d="M500 775l-348 -298q-16 -14 -16 -35v-386q0 -16 8 -30t22 -22t30 -8h197v257h238v-257h197q25 0 42.5 17.5t17.5 42.5v386q0 10 -4.5 19t-11.5 16l-348 298q-3 2 -6 3.5t-6 1.5t-6 -1.5t-6 -3.5z" />
<glyph glyph-name="uniE618" unicode="&#xe618;" horiz-adv-x="1000"
d="M751 670q21 -20 34 -33t20 -23q3 -4 5 -8t3 -7t1.5 -6t0.5 -5v-13h-119q-4 0 -7.5 1.5t-6.5 4.5q-6 6 -10 14t-6 16.5t-2 12.5v100h3q3 0 6.5 -0.5t6.5 -1.5q7 -2 16 -8q4 -3 9.5 -7t12.5 -9q13 -10 33 -28zM614 624q0 -16 5 -33.5t15 -32t26 -24t38 -9.5h117v-451
q0 -24 -9.5 -42t-24.5 -31t-33.5 -20t-35.5 -7h-394q-15 0 -33 8.5t-33.5 23t-26.5 32.5q-2 5 -4 9.5t-3.5 9.5t-2 10t-0.5 10v543q0 9 2 17.5t6 17.5q7 18 20.5 33.5t30 25.5t35.5 10h305v-100zM664 125q21 0 35.5 14.5t14.5 35.5t-14.5 35.5t-35.5 14.5h-299
q-21 0 -35.5 -14.5t-14.5 -35.5t14.5 -35.5t35.5 -14.5h299zM714 374q0 21 -14.5 36t-35.5 15h-299q-21 0 -35.5 -15t-14.5 -36t14.5 -35t35.5 -14h299q21 0 35.5 14t14.5 35zM714 374z" />
<glyph glyph-name="uniE619" unicode="&#xe619;"
d="M512 515q47 0 88 -18t72 -49t49 -72t18 -89q0 -23 -4.5 -45t-13.5 -42q-18 -41 -49 -72t-72 -49q-20 -9 -42 -13.5t-46 -4.5q-47 0 -88 18t-72 49t-49 72t-18 87q0 48 18 89t49 72t72 49t88 18v0zM512 515z" />
</font>
</defs></svg>
... ...
... ... @@ -5,6 +5,8 @@
*/
var $ = require('yoho.jquery');
require('./footer');
function cookie(name) {
var cookies = document.cookie,
cookieVal,
... ...
... ... @@ -5,27 +5,38 @@
*/
var $ = require('yoho.jquery');
var apiDomain;
/**
* 订阅
* @return {[type]} [description]
*/
function actionSubscription() {
var $subscriberBox = $('#subscriberBox'),
$subscriberBtn = $('#subscriberBtn'),
var $subscriberBox = $('#subscriber-box'),
$subscriberBtn = $('#subscriber-btn'),
emailReg = /^[.\-_a-zA-Z0-9]+@[\-_a-zA-Z0-9]+\.[a-zA-Z0-9]/;
var subscribeParam = {
method: 'open.subscriber.subscriber',
v: 1,
return_type: 'jsonp',
open_key: '12345'
};
var iconCode = {
mail: '&#xe61b;',
tick: '&#xe61a'
};
var email = $.trim($subscriberBox.val());
var params = {};
$subscriberBox.focus(function() {
$(this).val('').css('color', '');
$subscriberBtn.removeClass('done').text('m');
$subscriberBtn.removeClass('done').html(iconCode.mail);
});
//订阅Start
$subscriberBtn.click(function() {
if (email !== '' && emailReg.test(email)) {
... ... @@ -38,7 +49,7 @@ function actionSubscription() {
$.getJSON('http://test.open.yohobuy.com' + '/?callback=?', params, function(data) {
if (data.data.result === 1) {
$subscriberBox.val('已订阅到:' + email);
$subscriberBtn.addClass('done').text('=');
$subscriberBtn.addClass('done').html(iconCode.tick);
} else {
$subscriberBox.css('color', 'red');
}
... ... @@ -52,84 +63,69 @@ function actionSubscription() {
});
}
function change(now, icon, box) {
var obj = now;
var index = icon.index(this);
var offset = index * 3;
box.each(function() {
$(this).hide();
});
for (var i = offset; i < offset + 3; i++) {
box.eq(i).show();
}
now.each(function() {
$(this).children().removeClass('cur').html('o');
});
obj.children().addClass('cur').html('O');
}
function actionhomeFootChange() {
var $vote = $('.vote'),
$feedBackPage = $('#feed-back-page'),
count = $vote.children('li').length;
//意见反馈
$feedBackPage.on('click', 'span', function() {
var $this = $(this);
//有货services
$('#button-services a').click(function() {
change($(this), $('#button-services a'), $('#foot-services ul li'));
});
if ($this.hasClass('cur')) {
return;
}
//更多有货产品
$('#button-mobile a').click(function() {
change($(this), $('#button-mobile a'), $('#foot-mobile ul li'));
});
$this.siblings('.cur').removeClass('cur');
$this.addClass('cur');
//在线调查
$('#feedbackPage a').click(function() {
$('#feedbackPage').find('a').children('span').removeClass('cur').html('o');
$(this).children('span').addClass('cur').html('O');
var indexNum = $('#feedbackPage a').index(this);
$('.vote li').hide();
$('.vote li').eq(indexNum).show();
$vote.children().not('.hide').addClass('hide')
.end()
.eq($this.index()).removeClass('hide');
});
$('.vote li').each(function() {
var obj = this;
var index = $(this).index();
$(this).find('#feedbackBtn').click(function() {
var params = {};
var _solution = [];
$(obj).find('input').each(function() {
if ($(this).attr('checked') == true || $(this).attr('checked') == 'checked') {
_solution.push($(this).val());
}
});
var _answer = $(obj).find('#feedback_answer').val();
var _feedback = $(obj).find('#feedback_id').val();
var _question = $(obj).find('#question_id').val();
params['method'] = 'open.feedback.submit';
params['feedback_id'] = _feedback || 0;
params['question_id'] = _question || 0;
params['answer'] = _answer || '';
params['solution'] = _solution.join(',');
$.getData(apiDomain, params, function(reData) {
if (reData.result == 1) {
var voteCount = $('.vote li').length - 1;
if (index == voteCount) {
alert('感谢您的参与!');
return false;
}
var Next = index + 1;
$('.vote li').eq(index).hide();
$('.vote li').eq(Next).show();
$('#feedbackPage').children('a').eq(index).children('span').removeClass('cur').html('o');
$('#feedbackPage').children('a').eq(Next).children('span').addClass('cur').html('O');
$vote.on('click', '.feed-back-btn', function() {
var $this = $(this),
$li = $this.closest('li'),
index = $li.index(),
params = {},
_solution = [];
var _answer = $li.find('.feedback-answer').val(),
_feedback = $li.find('.feedback-id').val(),
_question = $li.find('.question-id').val();
$li.find(':checked').each(function() {
_solution.push($(this).val());
});
params = {
method: 'open.feedback.submit',
feedback: _feedback || 0,
question: _question || 0,
answer: _answer || '',
solution: _solution.join(',')
};
$.getData(apiDomain, params, function(data) {
var next = index + 1;
if (data.result === 1) {
if (index === count - 1) {
alert('感谢您的参与!');
return;
}
return false;
});
$li.addClass('hide');
$vote.eq(index + 1).removeClass('hide');
$feedBackPage.children('.cur').removeClass('cur');
$feedBackPage.eq(next).addClass('cur');
}
});
});
}
exports.init = function() {
actionSubscription();//执行订阅
actionhomeFootChange();//底部事件
}
\ No newline at end of file
//初始化
actionSubscription();
actionhomeFootChange();
\ No newline at end of file
... ...
... ... @@ -134,10 +134,15 @@
.item-nav{
padding-top: 20px;
a {
color: #999;
span {
color: #fff;
padding: 0 3px;
cursor:pointer;
font-size: 20px;
}
.cur {
color: #999;
}
}
}
... ... @@ -160,6 +165,7 @@
color: #fff;
display: inline-block;
text-align: center;
cursor: pointer;
}
p {
... ... @@ -169,7 +175,7 @@
textarea{
width: 98%;
height: 60px;
height: 68px;
vertical-align: middle;
margin: 5px 0px 0px 0px;
resize:none;
... ... @@ -188,10 +194,10 @@
li {
margin-right: 10px;
float: left;
margin-bottom: 12px;
}
img {
display: block;
width: 103px;
height: 131px;
}
... ...