|
|
@@ -2,9 +2,6 @@ let userAgent;
|
|
|
let isSafari = false;
|
|
|
let browserName;
|
|
|
window.onload = function(){
|
|
|
- if(screen.width < 900){
|
|
|
- window.location.href = "https://m3.hhh.com.tw/";
|
|
|
- }
|
|
|
userAgent = navigator.userAgent;
|
|
|
detectBrowser(userAgent);
|
|
|
detectDirection ();
|
|
|
@@ -16,17 +13,6 @@ window.onload = function(){
|
|
|
dataType: "json",
|
|
|
}).done(function (msg) {
|
|
|
result = [...msg];
|
|
|
- renderSec00(result);
|
|
|
- renderSec02(result);
|
|
|
- renderSec05(result);
|
|
|
- renderSec06(result);
|
|
|
- renderSec07(result);
|
|
|
- renderSec08(result);
|
|
|
- renderSec09(result);
|
|
|
- renderSec10(result);
|
|
|
- //renderSec11(result);
|
|
|
- renderVideo(result);
|
|
|
- renderTrending(result);
|
|
|
});
|
|
|
$.ajax({
|
|
|
method: "GET",
|
|
|
@@ -35,6 +21,7 @@ window.onload = function(){
|
|
|
}).done(function (msg) {
|
|
|
matchData = [...msg];
|
|
|
renderMatch(matchData);
|
|
|
+ renderMatchMb(matchData);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -62,10 +49,14 @@ function renderMatch(matchData){
|
|
|
<p>接案地區 ${matchData[i].Area}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="col">
|
|
|
- <p>${matchData[i].Consulting} 人正在諮詢</p>
|
|
|
+ <div class="col sec-match__consult d-none d-md-block">
|
|
|
+ <p>${matchData[i].Consulting} 人正在諮詢</p>
|
|
|
</div>
|
|
|
- <div class="col">
|
|
|
+ <div class="col sec-match__like d-none d-md-block">
|
|
|
+ <button class="btn-match">我有興趣</button>
|
|
|
+ </div>
|
|
|
+ <div class="col sec-match__like d-block d-md-none">
|
|
|
+ <p class="mb-3">${matchData[i].Consulting} 人正在諮詢</p>
|
|
|
<button class="btn-match">我有興趣</button>
|
|
|
</div>
|
|
|
</div>`
|
|
|
@@ -74,6 +65,41 @@ function renderMatch(matchData){
|
|
|
$('.container__match').html(str);
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+function renderMatchMb(matchData) {
|
|
|
+ let str = '';
|
|
|
+ for(let i = 0; i < matchData.length; i++){
|
|
|
+ str += `<div class="row align-items-center py-4 justify-content-center text-center container__row" style="border-bottom: 1px solid #B2B2B2;">
|
|
|
+ <div class="col-12 mb-4">
|
|
|
+ <div class="sec-result__imgfr mx-auto" style="background-image: url('${matchData[i].WorkImg}');"
|
|
|
+ onclick="window.open('${matchData[i].DesignerLink}');"></div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-5">
|
|
|
+ <div class="sec-result__designer mx-auto mb-4" style="background-image: url('${matchData[i].DesignerImg}');">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-7">
|
|
|
+ <div class="text-start mx-auto">
|
|
|
+ <p>${matchData[i].Name} 設計師</p>
|
|
|
+ <p class="mb-2">${matchData[i].CompanyName}</p>
|
|
|
+ <p>擅長風格 ${matchData[i].Style}</p>
|
|
|
+ <p>接案坪數 ${matchData[i].Square}</p>
|
|
|
+ <p class="mb-2">接案地區 ${matchData[i].Area}</p>
|
|
|
+ <span class="sec-result__consulting"><strong class="sec-result__num">${matchData[i].Consulting}</strong> 人正在諮詢</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-12 mt-4">
|
|
|
+ <button class="btn-match">我有興趣</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ }
|
|
|
+
|
|
|
+ $('.container__mb').html(str);
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
$(document).on("click", ".btn-match", function (event) {
|
|
|
Swal.fire({
|
|
|
@@ -113,342 +139,6 @@ function detectBrowser(agent){
|
|
|
|
|
|
|
|
|
|
|
|
- function renderSec00(data) {
|
|
|
- let temp = data[0]['data'];
|
|
|
- renderBannerStr('sec-00__slider', temp);
|
|
|
- $(".sec-00__slider").slick({
|
|
|
- dots: false,
|
|
|
- speed: 800,
|
|
|
- autoplay: true,
|
|
|
- autoplaySpeed: 5000,
|
|
|
- arrows: true,
|
|
|
- prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
|
|
|
- nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function renderSec02(data) {
|
|
|
- let temp = data[1]['data'];
|
|
|
- renderBannerStr('sec-02__slider', temp);
|
|
|
- $(".sec-02__slider").slick({
|
|
|
- dots: false,
|
|
|
- autoplay: true,
|
|
|
- arrows: true,
|
|
|
- fade: true,
|
|
|
- autoplaySpeed: 4000,
|
|
|
- prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 33px;color: white;transform: translateY(-10px);"></i></button>',
|
|
|
- nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 33px;color: white;transform: translateY(-10px);"></i></button>'
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function renderBannerStr(sec, data) {
|
|
|
- let str = '';
|
|
|
- for(let i = 0; i < data.length; i++){
|
|
|
- if(data[i]['Dwebp'] && !isSafari) {
|
|
|
- str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></div>`
|
|
|
- } else {
|
|
|
- str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></div>`
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- $(`.${sec}`).html(str);
|
|
|
- }
|
|
|
-
|
|
|
- function renderSec05(data) {
|
|
|
- let randomIdx = Math.floor(Math.random()*3);
|
|
|
- const ran = $('.sec-05__tabdiv .nav-pills li').eq(randomIdx);
|
|
|
- const ranDiv = $('.sec-05tab-content>div').eq(randomIdx);
|
|
|
- $('.sec-05tab-content>div').hide();
|
|
|
- ranDiv.show();
|
|
|
- ran.addClass('active');
|
|
|
- ran.children().addClass('active');
|
|
|
- $('.sec-05 .morelink').attr('href', $('.sec-05__tabdiv .nav-item-link.active').data('link'));
|
|
|
- let temp = data[2]['data'];
|
|
|
- for(let i = 0; i < temp.length; i++){
|
|
|
- if(temp[i]["tab"] == '最夯設計'){
|
|
|
- let str = '';
|
|
|
- let sub = temp[i]["data"];
|
|
|
- for(let j = 0; j < sub.length; j++){
|
|
|
- str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
|
|
|
- <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
|
|
|
- <h5 class="mb-2 me-2">${sub[j]['title']}</h5>
|
|
|
- <p class="mt-2">${sub[j]['description']}</p>
|
|
|
- </div>`;
|
|
|
- }
|
|
|
- $('#pills-hot-tab .tabpar').html(str);
|
|
|
- }
|
|
|
- if(temp[i]["tab"] == '影音實錄'){
|
|
|
- let str = '';
|
|
|
- let sub = temp[i]["data"];
|
|
|
- for(let j = 0; j < sub.length; j++){
|
|
|
- str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
|
|
|
- <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"><img data-src="images/Play-Button.webp" alt="" class="tabpar__card__play lazyload"></div>
|
|
|
- <h5 class="mb-2 me-2">${sub[j]['title']}</h5>
|
|
|
- <p class="mt-2">${sub[j]['description']}</p>
|
|
|
- </div>`;
|
|
|
- }
|
|
|
- $('#pills-video-tab .tabpar').html(str);
|
|
|
- }
|
|
|
- if(temp[i]["tab"] == '專欄文章'){
|
|
|
- let str = '';
|
|
|
- let sub = temp[i]["data"];
|
|
|
- for(let j = 0; j < sub.length; j++){
|
|
|
- str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
|
|
|
- <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
|
|
|
- <h5 class="mb-2 me-2">${sub[j]['title']}</h5>
|
|
|
- <p class="mt-2">${sub[j]['description']}</p>
|
|
|
- </div>`;
|
|
|
- }
|
|
|
- $('#pills-blog-tab .tabpar').html(str);
|
|
|
- }
|
|
|
- }
|
|
|
- const cardText = document.querySelectorAll('.tabpar__card p');
|
|
|
- cardText.forEach((item, i) => {
|
|
|
- let len = item.textContent.length;
|
|
|
- if(len > 18) {
|
|
|
- let str = item.textContent.substring(0, 18) + '...';
|
|
|
- item.textContent = str;
|
|
|
- }
|
|
|
- })
|
|
|
- $('.sec-05__tabdiv .nav-pills button').on('click', function(event){
|
|
|
- event.preventDefault();
|
|
|
- $('.sec-05__tabdiv .nav-pills li').removeClass('active');
|
|
|
- $('.sec-05__tabdiv .nav-pills li button').removeClass('active');
|
|
|
- $(this).addClass('active');
|
|
|
- $(this).parent().addClass('active');
|
|
|
- $('.sec-05tab-content>div').hide();
|
|
|
- var target = $(this).attr('id');
|
|
|
- $(`#pills-tab #${target}`).show();
|
|
|
- $('.sec-05tab-content .tabpar').slick('setPosition');
|
|
|
- });
|
|
|
-
|
|
|
- $(`.sec-05tab-content .tabpar`).slick({
|
|
|
- arrows: true,
|
|
|
- slidesToShow: 3,
|
|
|
- infinite: false,
|
|
|
- dots: false,
|
|
|
- slidesToScroll: 1,
|
|
|
- prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
|
|
|
- nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
|
|
|
- });
|
|
|
-
|
|
|
- $('.sec-05__tabdiv .nav-item-link').click(function() {
|
|
|
- $('.sec-05 .morelink').attr('href',$('.sec-05__tabdiv .nav-item-link.active').data('link'));
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function renderSec06(data) {
|
|
|
- let temp = data[3]['data'];
|
|
|
- let str = '';
|
|
|
- for(let i = 0; i < temp.length; i++){
|
|
|
- if(temp[i].video == 'true'){
|
|
|
- str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
|
|
|
- <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-06__card__play lazyload" data-src="images/Play-Button.webp"></div></div>
|
|
|
- <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
|
|
|
- <p class="mt-2">${temp[i]['description']}</p>
|
|
|
- </div>`;
|
|
|
- } else {
|
|
|
- str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
|
|
|
- <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div></div>
|
|
|
- <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
|
|
|
- <p class="mt-2">${temp[i]['description']}</p>
|
|
|
- </div>`;
|
|
|
- }
|
|
|
- }
|
|
|
- $('.sec-06 .sec-06__slider').html(str);
|
|
|
- $('.sec-06__slider').slick({
|
|
|
- arrows: true,
|
|
|
- dots: false,
|
|
|
- speed: 800,
|
|
|
- prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 30px;color: white;"></i></button>',
|
|
|
- nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 30px;color: white;"></i></button>'
|
|
|
- });
|
|
|
- const cardText = document.querySelectorAll('.sec-06__card p');
|
|
|
- cardText.forEach((item, i) => {
|
|
|
- let len = item.textContent.length;
|
|
|
- if(len > 20) {
|
|
|
- let str = item.textContent.substring(0, 40) + '...';
|
|
|
- item.textContent = str;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function renderSec07(data) {
|
|
|
- let temp = data[5]['data'];
|
|
|
- let str = '';
|
|
|
- for(let i = 0; i < temp.length; i++){
|
|
|
- str+= `<div class="sec-07__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>`
|
|
|
- }
|
|
|
- $(`.sec-07__slider`).html(str);
|
|
|
- $(".sec-07__slider").slick({
|
|
|
- dots: false,
|
|
|
- autoplay: true,
|
|
|
- arrows: false,
|
|
|
- slidesToShow: 4,
|
|
|
- slidesToScroll: 1,
|
|
|
- autoplaySpeed: 7000,
|
|
|
- initialSlide: 0,
|
|
|
- infinite: true,
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function renderSec08(data) {
|
|
|
- let temp = data[4]['data'];
|
|
|
- let str = '';
|
|
|
- for(let i = 0; i < temp.length; i++){
|
|
|
- if(temp[i].video == 'true'){
|
|
|
- str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
|
|
|
- <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-08__card__play lazyload" data-src="images/Play-Button.webp"></div>
|
|
|
- <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
|
|
|
- <p class="mb-2 me-2">${temp[i]['description']}</p>
|
|
|
- </div>`;
|
|
|
- } else {
|
|
|
- str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
|
|
|
- <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
|
|
|
- <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
|
|
|
- <p class="mb-2 me-2">${temp[i]['description']}</p>
|
|
|
- </div>`;
|
|
|
- }
|
|
|
- }
|
|
|
- $('.sec-08__slider').html(str);
|
|
|
- $(".sec-08__slider").slick({
|
|
|
- arrows: true,
|
|
|
- slidesToShow: 1,
|
|
|
- infinite: false,
|
|
|
- dots: false,
|
|
|
- slidesToShow: 3,
|
|
|
- centerPadding: '12px',
|
|
|
- prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
|
|
|
- nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
|
|
|
- });
|
|
|
- const cardText = document.querySelectorAll('.sec-08__card p');
|
|
|
- cardText.forEach((item, i) => {
|
|
|
- let len = item.textContent.length;
|
|
|
- if(len > 20) {
|
|
|
- let str = item.textContent.substring(0, 20) + '...';
|
|
|
- item.textContent = str;
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- function renderSec09(data) {
|
|
|
- let temp = data[6]['data'];
|
|
|
- let str = '';
|
|
|
- for(let i = 0; i < temp.length; i++){
|
|
|
- if(temp[i].video !== 'false') {
|
|
|
- str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
|
|
|
- <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-09__card__play lazyload" data-src="images/Play-Button.webp"></div>
|
|
|
- <p class="sec-09__cardtxt">${temp[i]['title']}</p>
|
|
|
- </div>`
|
|
|
- } else {
|
|
|
- str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
|
|
|
- <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
|
|
|
- <p class="sec-09__cardtxt">${temp[i]['title']}</p>
|
|
|
- </div>`
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- $('.sec-09__slider').html(str);
|
|
|
- $(".sec-09__slider").slick({
|
|
|
- autoplay: true,
|
|
|
- autoplaySpeed: 7000,
|
|
|
- arrows: true,
|
|
|
- slidesToShow: 4,
|
|
|
- infinite: true,
|
|
|
- dots: false,
|
|
|
- slidesToScroll: 1,
|
|
|
- prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
|
|
|
- nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
|
|
|
- });
|
|
|
- }
|
|
|
- function renderSec10(data) {
|
|
|
- renderRecStr("sec-10", data[7]['data'].slice(0, 6));
|
|
|
- renderRecStr("sec-11", data[8]['data'].slice(0, 6));
|
|
|
- }
|
|
|
-
|
|
|
- function renderRecStr(sec, data) {
|
|
|
- let str = '';
|
|
|
- for(let i = 0; i < data.length; i++){
|
|
|
- //console.log(data[i]['description'].length);
|
|
|
- if(data[i]['description'].length > 0) {
|
|
|
- data[i]['description'].split('，');
|
|
|
- data[i]['description'] = data[i]['description'].split('，').slice(1).join("");
|
|
|
- }
|
|
|
- if(data[i].video !== 'false') {
|
|
|
- str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
|
|
|
- <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"><img class="${sec}__card__play lazyload" data-src="images/Play-Button.webp"></div>
|
|
|
- <h5 class="me-2">${data[i]['title']}</h5>
|
|
|
- <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
|
|
|
- </div>`
|
|
|
- } else {
|
|
|
- str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
|
|
|
- <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>
|
|
|
- <h5 class="me-2">${data[i]['title']}</h5>
|
|
|
- <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
|
|
|
- </div>`
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- $(`.${sec} .row`).html(str);
|
|
|
- const cardText = document.querySelectorAll(`.${sec}__card p`);
|
|
|
- cardText.forEach((item, i) => {
|
|
|
- let len = item.textContent.length;
|
|
|
- if(len > 18) {
|
|
|
- let str = item.textContent.substring(0, 18) + '...';
|
|
|
- item.textContent = str;
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- function renderVideo(data) {
|
|
|
- let temp = data[9];
|
|
|
- console.log(data[9]);
|
|
|
- $('.sec-06__videotxt').text(temp['title']);
|
|
|
- console.log('test');
|
|
|
- $('.sec-06__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
|
|
|
- $('#videoModal').on('shown.bs.modal', function () {
|
|
|
- $('#videoModal iframe').attr('src', `https://www.youtube.com/embed/${temp['yt']}?controls=0&autoplay=1&enablejsapi=1&origin=https%3A%2F%2Fm.hhh.com.tw&widgetid=1`);
|
|
|
- });
|
|
|
- $('#videoModal').on('hidden.bs.modal', function () {
|
|
|
- $('#videoModal iframe').removeAttr('src');
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function renderTrending(result){
|
|
|
- let temp = result[10]['data'];
|
|
|
- let str = '';
|
|
|
- for(let i = 0; i < temp.length; i++){
|
|
|
- str += `<a class="dropbox__hots__link" href="https://hhh.com.tw/search/lists/case/${temp[i]}-keyword/">${temp[i]}</a>`
|
|
|
- }
|
|
|
- $('.dropbox__hots').html(`<strong class="dropbox__hots__title">熱搜關鍵字：</strong>${str}`);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-function tab2 () {
|
|
|
- if(('.dropbox__tabdiv').length){
|
|
|
- // Show the first tab by default
|
|
|
- $('.dropbox-tab-content>div').hide();
|
|
|
- $('.dropbox-tab-content>div:first').show();
|
|
|
- $('.dropbox__tabdiv .nav-pills li:first').addClass('active');
|
|
|
- $('.dropbox__tabdiv .nav-pills li:first button').addClass('active');
|
|
|
-
|
|
|
- // Change tab class and display content
|
|
|
- $('.dropbox__tabdiv .nav-pills button').on('click', function(event){
|
|
|
- event.preventDefault();
|
|
|
- $('.dropbox__tabdiv .nav-pills li').removeClass('active');
|
|
|
- $('.dropbox__tabdiv .nav-pills li button').removeClass('active');
|
|
|
- $(this).addClass('active');
|
|
|
- $(this).parent().addClass('active');
|
|
|
- $('.dropbox-tab-content>div').hide();
|
|
|
- var target = $(this).attr('id');
|
|
|
- $(`#pills-tab-2 #${target}`).show();
|
|
|
- });
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-tab2();
|
|
|
-
|
|
|
-
|
|
|
window.addEventListener('scroll', fixedOnScroll);
|
|
|
|
|
|
const navbar = document.querySelector('.navbar-main');
|
|
|
@@ -586,71 +276,7 @@ $('.match__next').click(function() {
|
|
|
$('.container_match').fadeOut(0);
|
|
|
$('.container_match2').fadeIn(500);
|
|
|
})
|
|
|
-// city result
|
|
|
-
|
|
|
|
|
|
- //jQuery time
|
|
|
- var current_fs, next_fs, previous_fs; //fieldsets
|
|
|
- var left, opacity, scale; //fieldset properties which we will animate
|
|
|
- var animating; //flag to prevent quick multi-click glitches
|
|
|
-
|
|
|
- $(".next").click(function(){
|
|
|
- if(animating) return false;
|
|
|
- animating = true;
|
|
|
-
|
|
|
- current_fs = $(this).parent().parent();
|
|
|
- next_fs = $(this).parent().parent().next();
|
|
|
-
|
|
|
- //activate next step on progressbar using the index of next_fs
|
|
|
- $(".form-progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
|
|
|
-
|
|
|
- //show the next fieldset
|
|
|
- next_fs.animate({opacity: 1}, {
|
|
|
- step: function(now, mx) {
|
|
|
- //as the opacity of current_fs reduces to 0 - stored in "now"
|
|
|
- //1. scale current_fs down to 80%
|
|
|
- scale = 0 + (1 + now) * .5 ;
|
|
|
- //2. bring next_fs from the right(50%)
|
|
|
- left = (now * 50)+"%";
|
|
|
- //3. increase opacity of next_fs to 1 as it moves in
|
|
|
- opacity = 0 + now;
|
|
|
- next_fs.css({
|
|
|
- 'transform': 'scale('+scale+')',
|
|
|
- });
|
|
|
- next_fs.css({'opacity': opacity});
|
|
|
- },
|
|
|
- duration: 400,
|
|
|
- complete: function(){
|
|
|
- next_fs.show();
|
|
|
- animating = false;
|
|
|
- },
|
|
|
- //this comes from the custom easing plugin
|
|
|
- easing: 'easeInOutBack'
|
|
|
- });
|
|
|
- //hide the current fieldset with style
|
|
|
- current_fs.animate({opacity: 0}, {
|
|
|
- step: function(now, mx) {
|
|
|
- //as the opacity of current_fs reduces to 0 - stored in "now"
|
|
|
- //1. scale current_fs down to 80%
|
|
|
- scale = 1 - (1 - now) * 0.2;
|
|
|
- //2. bring next_fs from the right(50%)
|
|
|
- left = (now * 50)+"%";
|
|
|
- //3. increase opacity of next_fs to 1 as it moves in
|
|
|
- opacity = 1 - now;
|
|
|
- current_fs.css({
|
|
|
- 'transform': 'scale('+scale+')',
|
|
|
- });
|
|
|
- next_fs.css({'opacity': opacity});
|
|
|
- },
|
|
|
- duration: 400,
|
|
|
- complete: function(){
|
|
|
- current_fs.hide();
|
|
|
- animating = false;
|
|
|
- },
|
|
|
- //this comes from the custom easing plugin
|
|
|
- easing: 'easeInOutBack'
|
|
|
- });
|
|
|
- });
|
|
|
|
|
|
$('.close').click(function () {
|
|
|
window.close();
|
huaisian