在 youtube 搜索引擎中加载微调器答案

【问题标题】：spinner loading in youtube search engine在 youtube 搜索引擎中加载微调器
【发布时间】：2016-06-24 15:46:38
【问题描述】：

我制作了 youtube 搜索引擎来搜索来自 youtube API 的视频，它工作正常我想在搜索过程中加载微调器。我找到了这个微调器：http://codepen.io/strick/pen/LVWWMp，但我不知道如何在搜索过程中开始实现它，因为我需要它出现在隐藏页面的其他背景上

我的html：

 <!DOCTYPE html>
<html>
<head>
    <title>Search</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div id="container">
        <header>
            <h1>Search</h1>
            <p>Search the YouTube Videos</p>
        </header>

        <section>
            <form id="search-form" name="search-form" onsubmit="return search()">
               <div class="fieldcontainer">
                 <input type="search" id="query" class="search-field" placeholder="search here...."></input>
                 <input type="submit" name="search-btn" id="search-btn" value=""></input>
               </div>
            </form>
            <ul id="results"></ul>
            <div id="buttons"></div>
        </section>
<div class="spinner">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>
    <footer>
        <p>copyright &copy; 2016, All right received</p>
    </footer>   
    </div>
</body>
</html>

CSS：

   *{
    padding: 0;
    margin: 0;
}

body{
    font-family: "segoue",sans-serif;
    line-height: 1.6em;
    color: #666;
    background: #eb5256 url(../img/creampapter.png);
    font-size: 14px;
}

a{
    color: #333;
    text-decoration: none;

}
#container{
    width: 740px;
    background: #fff;
    margin: auto;
}
.clearfix{
    clear: both;
}

header{
    padding: 30px 20px;
    background: #f4f4f4;

}

header h1{
    color:#000;
    margin-bottom: 5px;
}
section{
    padding: 30px 20px 20px 20px;

}
footer{
    padding: 20px;
    background: #f4f4f4;
    text-align: center;
}
#search-form{
    display: block;
    margin-bottom: 15px;
}
.fieldcontainer{
    display: block;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.search-field{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 45%;
    padding: 11px 7px;
    padding-right: 43px;
    background-color: #fff;
    color: #ccc;
    border: 1px solid #c8c8c8;
    border-bottom-color: #d2e2e7;
    font-size: 1.6em;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0;

}
#search-btn{
    position:absolute;
    right:360px;
    top:5px;
    height:32px;
    width:32px;
    border:0;
    cursor:pointer;
    zoom:1;
    filter:alpha(opacity=65);
    opacity:0.65;
    background:transparent url(../img/search.png) left no-repeat;
}
#search-btn:hover{
    filter:alpha(opacity=90);
    opacity: 0.9;
}
#results li{
    padding: 10px 0;
    border-bottom: 1px #ccc dotted;
    list-style: none;
    overflow: auto;
}
.list-left{
    float: left;
    width: 20%;
}
.list-left img{
    width:100%;
    padding: 5px;
    border: solid #ccc 1px;
}

.list-righ{
    float: right;
    width: 78%;
}
.cTitle{
    color:#dd2826;
}  
.button-container{
    margin-top: 25px;
}
.paging-button{
    background: #f4f4f4;
    padding: 8px 13px;
    border: #ccc 1px solid;
    border-radius: 5px;
    color: #333;
    margin: 10px;
    cursor: pointer;
}
.spinner {
  margin: 100px auto;
  width: 90px;
  height: 90px;
  position: relative;
  text-align: center;
  -webkit-animation: rotate 2.0s infinite linear;
  animation: rotate 2.0s infinite linear;
}

.dot1,
.dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #67CF22;
  border-radius: 100%;
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0px;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg)
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg)
  }
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0.0)
  }
  50% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

JS：

  //search bar hander hesham

$(function(){
    var searchField = $('#query');
    var icon = $('#search-btn');

    //focus handler

    $(searchField).on('focus',function(){
        $(this).animate({
            width:'100%'
        },400);

        $(icon).animate({right:'10px'},400)
    });

    //blur event 
    $(searchField).on('blur',function(){
        if(searchField.val()==''){
            $(searchField).animate({width:'45%'},400);
            $(icon).animate({right:'360px'},400);
        }
    });
$('#search-form').submit(function(e){
    e.preventDefault();
});
})

function search(){
    // clear results

    $('#results').html('');
    $('buttons').html('');

    //get form input
    q=$('#query').val();

    //run get reqeues on API

    $.get(
        "https://www.googleapis.com/youtube/v3/search",{
            part: 'snippet, id',
            q: q,
            type:'video',
            key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'},
            function(data){
                var nextPageToken = data.nextPageToken;
                var prevPageToken = data.prevPageToken;
                console.log(data);

                $.each(data.items, function(i, item){
                    var output = getOutput(item);

                    // display results 
                    $('#results').append(output);
                });

                var buttons = getButtons(prevPageToken,nextPageToken);

                //display buttons

                $('#buttons').append(buttons);

            }
        );
}

//next page function

function nextPage(){

    var token = $('#next-button').data('token');
    var q = $('#next-button').data('query');
    $('#results').html('');
    $('buttons').html('');

    //get form input
    q=$('#query').val();

    //run get reqeues on API

    $.get(
        "https://www.googleapis.com/youtube/v3/search",{
            part: 'snippet, id',
            q: q,
            pageToken: token,
            type:'video',
            key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'},
            function(data){
                var nextPageToken = data.nextPageToken;
                var prevPageToken = data.prevPageToken;
                console.log(data);

                $.each(data.items, function(i, item){
                    var output = getOutput(item);

                    // display results 
                    $('#results').append(output);
                });

                var buttons = getButtons(prevPageToken,nextPageToken);

                //display buttons

                $('#buttons').append(buttons);

            }
        );  

}

function prevPage(){

    var token = $('#prev-button').data('token');
    var q = $('#prev-button').data('query');
    $('#results').html('');
    $('buttons').html('');

    //get form input
    q=$('#query').val();

    //run get reqeues on API
showSpinner();
    $.get(
        "https://www.googleapis.com/youtube/v3/search",{
            part: 'snippet, id',
            q: q,
            pageToken: token,
            type:'video',
            key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'},
            function(data){
                var nextPageToken = data.nextPageToken;
                var prevPageToken = data.prevPageToken;
                console.log(data);

                $.each(data.items, function(i, item){
                    var output = getOutput(item);

                    // display results 
                    $('#results').append(output);
                    hideSpinner();
                });

                var buttons = getButtons(prevPageToken,nextPageToken);

                //display buttons

                $('#buttons').append(buttons);

            }
        );  

}
/// build output

function getOutput(item){

    var videoId = item.id.videoId;
    var title = item.snippet.title;
    var description = item.snippet.description;
    var thumb = item.snippet.thumbnails.high.url;
    var channelTitle = item.snippet.channelTitle;
    var videoDate = item.snippet.publishedAt;

    //build output string

    var output = '<li>'+
    '<div class="list-left">'+
    '<img src="'+thumb+'">'+
    '</div>'+
    '<div class="list-right">'+
    '<h3>'+title+'</h3>'+
    '<small>By <span class="cTitle">'+channelTitle+'</span> On '+videoDate+'</small>'+
    '<p>'+description+'</p>'+
    '</div>'+
    '</li>'+
    '<div class="clearfix"></div>'+
    '';
return output;
}

//build the buttons

function getButtons(prevPageToken,nextPageToken){
    if(!prevPageToken){
        var btnoutput = '<div class="button-container">'+
                         '<button id="next-button" class="paging-button" data-token="'+nextPageToken+'" data-query="'+q+'"'+
                         'onclick="nextPage();">Next Page</button></div >';


    }else{
         var btnoutput = '<div class="button-container">'+
                         '<button id="prev-button" class="paging-button" data-token="'+prevPageToken+'" data-query="'+q+'"'+
                         'onclick="prevPage();">Previous Page</button>'+
                         '<button id="next-button" class="paging-button" data-token="'+nextPageToken+'" data-query="'+q+'"'+
                         'onclick="nextPage();">Next Page</button></div >';
    }   

    return btnoutput;
}

function showSpinner() {
  if($(".spinner").length == 0) {
    $("#container").append("<div class=\"backdrop\"><div class=\"spinner\"><div class=\"dot1\"></div><div class=\"dot2\"></div></div></div>");
  }
  $(".backdrop").show();
}

function hideSpinner() {
  $(".backdrop").hide();
}

【问题讨论】：

标签： javascript jquery css html youtube

【解决方案1】：

您应该再创建 2 个方法 -> showSpinner 和 hideSpinner

function showSpinner() {
  if($(".spinner").length == 0) {
    $("#container").append("<div class=\"backdrop\"><div class=\"spinner\"><div class=\"dot1\"></div><div class=\"dot2\"></div></div></div>");
  }
  $(".backdrop").show();
}

function hideSpinner() {
  $(".backdrop").hide();
}

然后只在$.get() 之前调用showSpinner 并在$("#results").append 调用之后调用hideSpinner

不要忘记将 CSS 添加到背景（位置：固定；顶部：0；左侧：0；宽度：100%；高度：100%）并从微调器中复制样式

【讨论】：

我按照你说的做了，但我仍然看到没有搜索按钮的微调器。我用新的编辑编辑了问题

【解决方案2】：

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Search</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div id="container">
        <header>
            <h1>Search</h1>
            <p>Search the YouTube Videos</p>
        </header>

        <section>
            <form id="search-form" name="search-form" onsubmit="return search()">
               <div class="fieldcontainer">
                 <input type="search" id="query" class="search-field" placeholder="search here...."></input>
                 <input type="submit" name="search-btn" id="search-btn" value=""></input>
               </div>
            </form>
            <ul id="results"></ul>
            <div id="buttons"></div>
        </section>
    <footer>
        <p>copyright &copy; 2016, All right received</p>
    </footer>   
    </div>
</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
}

body{
    font-family: "segoue",sans-serif;
    line-height: 1.6em;
    color: #666;
    background: #eb5256 url(../img/creampapter.png);
    font-size: 14px;
}

a{
    color: #333;
    text-decoration: none;

}
#container{
    width: 740px;
    background: #fff;
    margin: auto;
}
.clearfix{
    clear: both;
}

header{
    padding: 30px 20px;
    background: #f4f4f4;

}

header h1{
    color:#000;
    margin-bottom: 5px;
}
section{
    padding: 30px 20px 20px 20px;

}
footer{
    padding: 20px;
    background: #f4f4f4;
    text-align: center;
}
#search-form{
    display: block;
    margin-bottom: 15px;
}
.fieldcontainer{
    display: block;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.search-field{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 45%;
    padding: 11px 7px;
    padding-right: 43px;
    background-color: #fff;
    color: #ccc;
    border: 1px solid #c8c8c8;
    border-bottom-color: #d2e2e7;
    font-size: 1.6em;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 0 0 6px #f0f0f0;

}
#search-btn{
    position:absolute;
    right:360px;
    top:5px;
    height:32px;
    width:32px;
    border:0;
    cursor:pointer;
    zoom:1;
    filter:alpha(opacity=65);
    opacity:0.65;
    background:transparent url(../img/search.png) left no-repeat;
}
#search-btn:hover{
    filter:alpha(opacity=90);
    opacity: 0.9;
}
#results li{
    padding: 10px 0;
    border-bottom: 1px #ccc dotted;
    list-style: none;
    overflow: auto;
}
.list-left{
    float: left;
    width: 20%;
}
.list-left img{
    width:100%;
    padding: 5px;
    border: solid #ccc 1px;
}

.list-righ{
    float: right;
    width: 78%;
}
.cTitle{
    color:#dd2826;
}  
.button-container{
    margin-top: 25px;
}
.paging-button{
    background: #f4f4f4;
    padding: 8px 13px;
    border: #ccc 1px solid;
    border-radius: 5px;
    color: #333;
    margin: 10px;
    cursor: pointer;
}
.backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-pointer-events:none;
    pointer-events:none;
}
.spinner {
  margin: 100px auto;
  width: 90px;
  height: 90px;
  position: relative;
  text-align: center;
  -webkit-animation: rotate 2.0s infinite linear;
  animation: rotate 2.0s infinite linear;
}

.dot1,
.dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #67CF22;
  border-radius: 100%;
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0px;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg)
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg)
  }
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0.0)
  }
  50% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

//search bar hander hesham

$(function(){
    var searchField = $('#query');
    var icon = $('#search-btn');

    //focus handler

    $(searchField).on('focus',function(){
        $(this).animate({
            width:'100%'
        },400);

        $(icon).animate({right:'10px'},400)
    });

    //blur event 
    $(searchField).on('blur',function(){
        if(searchField.val()==''){
            $(searchField).animate({width:'45%'},400);
            $(icon).animate({right:'360px'},400);
        }
    });
$('#search-form').submit(function(e){
    e.preventDefault();
});
})

function search(){
    // clear results

    $('#results').html('');
    $('buttons').html('');

    //get form input
    q=$('#query').val();

    //run get reqeues on API

    showSpinner();
    $.get(
        "https://www.googleapis.com/youtube/v3/search",{
            part: 'snippet, id',
            q: q,
            type:'video',
            key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'},
            function(data){
                var nextPageToken = data.nextPageToken;
                var prevPageToken = data.prevPageToken;
                console.log(data);

                $.each(data.items, function(i, item){
                    var output = getOutput(item);

                    // display results 
                    $('#results').append(output);
                });

                var buttons = getButtons(prevPageToken,nextPageToken);

                //display buttons

                $('#buttons').append(buttons);
                hideSpinner();

            }
        );
}

//next page function

function nextPage(){

    var token = $('#next-button').data('token');
    var q = $('#next-button').data('query');
    $('#results').html('');
    $('buttons').html('');

    //get form input
    q=$('#query').val();

    //run get reqeues on API

    showSpinner();
    $.get(
        "https://www.googleapis.com/youtube/v3/search",{
            part: 'snippet, id',
            q: q,
            pageToken: token,
            type:'video',
            key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'},
            function(data){
                var nextPageToken = data.nextPageToken;
                var prevPageToken = data.prevPageToken;
                console.log(data);

                $.each(data.items, function(i, item){
                    var output = getOutput(item);

                    // display results 
                    $('#results').append(output);
                });

                var buttons = getButtons(prevPageToken,nextPageToken);

                //display buttons

                $('#buttons').append(buttons);
                hideSpinner();

            }
        );  

}

function prevPage(){

    var token = $('#prev-button').data('token');
    var q = $('#prev-button').data('query');
    $('#results').html('');
    $('buttons').html('');

    //get form input
    q=$('#query').val();

    //run get reqeues on API
showSpinner();
    $.get(
        "https://www.googleapis.com/youtube/v3/search",{
            part: 'snippet, id',
            q: q,
            pageToken: token,
            type:'video',
            key:'AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y'},
            function(data){
                var nextPageToken = data.nextPageToken;
                var prevPageToken = data.prevPageToken;
                console.log(data);

                $.each(data.items, function(i, item){
                    var output = getOutput(item);

                    // display results 
                    $('#results').append(output);
                });

                var buttons = getButtons(prevPageToken,nextPageToken);

                //display buttons

                $('#buttons').append(buttons);
                hideSpinner();

            }
        );  

}
/// build output

function getOutput(item){

    var videoId = item.id.videoId;
    var title = item.snippet.title;
    var description = item.snippet.description;
    var thumb = item.snippet.thumbnails.high.url;
    var channelTitle = item.snippet.channelTitle;
    var videoDate = item.snippet.publishedAt;

    //build output string

    var output = '<li>'+
    '<div class="list-left">'+
    '<img src="'+thumb+'">'+
    '</div>'+
    '<div class="list-right">'+
    '<h3>'+title+'</h3>'+
    '<small>By <span class="cTitle">'+channelTitle+'</span> On '+videoDate+'</small>'+
    '<p>'+description+'</p>'+
    '</div>'+
    '</li>'+
    '<div class="clearfix"></div>'+
    '';
return output;
}

//build the buttons

function getButtons(prevPageToken,nextPageToken){
    if(!prevPageToken){
        var btnoutput = '<div class="button-container">'+
                         '<button id="next-button" class="paging-button" data-token="'+nextPageToken+'" data-query="'+q+'"'+
                         'onclick="nextPage();">Next Page</button></div >';


    }else{
         var btnoutput = '<div class="button-container">'+
                         '<button id="prev-button" class="paging-button" data-token="'+prevPageToken+'" data-query="'+q+'"'+
                         'onclick="prevPage();">Previous Page</button>'+
                         '<button id="next-button" class="paging-button" data-token="'+nextPageToken+'" data-query="'+q+'"'+
                         'onclick="nextPage();">Next Page</button></div >';
    }   

    return btnoutput;
}

function showSpinner() {
  if($(".spinner").length == 0) {
    $("body").append("<div class=\"backdrop\"><div class=\"spinner\"><div class=\"dot1\"></div><div class=\"dot2\"></div></div></div>");
  }
  $(".backdrop").show();
}

function hideSpinner() {
  $(".backdrop").hide();
}

【讨论】：

谢谢，它对我有用。我只是有一个小问题，点击下一页按钮后，每次点击下一页或上一页时都会重复按钮，就像这张图片中的这里一样：i.imgur.com/xw82lkP.png