[jQuery]淡出fade-Out,淡入fade-In及Ajax json資料範例

yku javascript, jquery, 教學, 程式

程式碼如下：(jQuery1.4版，應該1.3版也可以使用)

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>這是一個jQuery 淡出後Ajax再淡入功能</title>
<meta name="Description"
    content="聰明的生活部落格-jQuery Example範例,fadein淡入,fadeout淡出效果,Ajax使用Json格式範例" />
<meta name="keywords"
    content="jquery,example,source,open source,fadein,fadeout,ajax,json,範例,教學" />

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
  </script>
<style type="text/css">
.ajaxagent {
    width: 616px;
    height: 550px;
    position: relative;
}

.ajaxagent ul.playerControl {
    position: absolute;
    bottom: 5px;
    height: 20px;
    right: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ajaxagent ul.playerControl li {
    display: inline;
    width: 20px;
    height: 20px;
    float: left;
    color: #ff99cc;
    text-align: center;
    line-height: 20px;
    font-family: Arial;
    font-size: 12px;
    cursor: pointer;
    margin: 0px 2px;
    background: url(images/control_ico.gif) no-repeat -21px 0;
}

.ajaxagent ul.playerControl li.current {
    color: #fff;
    font-weight: bold;
    background-position: 0 0;
}

#ajax {
    clear: both;
    left: 0px;
}

#ajax div.ajaxRoll {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 2px;
    margin-right: 2px;
    float: left;
    width: 148px;
    height: 98px;
    border: 1px dashed #66CCFF
}

#ajax div.ajaxRoll img {
    float: left;
    width: 50px;
    height: 50px;
}

#ajax div.ajaxRoll div.title {
    float: left;
    width: 98px;
    height: 50px;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    word-break: all;
}

#ajax div.ajaxRoll div.desc {
    width: 148px;
    height: 48px;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    word-break: all;
}
</style>
<script type="text/javascript">
    jQuery(function(){
    //把每一個page按鈕加上動作click
    jQuery( "#playerControl li" ).each(function(idx){
    
    jQuery(this).bind("click",function(){
        var $this = jQuery(this);
        //被點擊時，加上current的class
        $this.addClass('current').siblings('.current').removeClass('current');
    //把目前內容先暫存,已防止Ajax Error時可以顯示
    var data = jQuery("#ajax").html();
    //淡出效果後callback執行ajax取得遠端資料
    
    jQuery("#ajax").fadeOut("slow",function(){   
jQuery.ajax({
    //因為範例不使用動態網頁,所以只好從網址動手腳,其中$this.index()是第幾個li元素
  url: "data-"+($this.index()+1)+".htm",
  type: "GET",
  data:"page="+($this.index()+1),//如果需要參數時,可以由此加入
  dataType: "json",//使用json為回傳資料格式
  beforeSend:function()//執行Ajax前,把Loading圖片載入
  {
    var $_height = jQuery(".ajaxagent").height()/2-6;
    var $_width = jQuery(".ajaxagent").width()/2-104;
    
    jQuery("#ajax").html("<img style='position:absolute;left:"+
            $_height+"px;top:"+$_width+"px' src='images/loadingAnimation.gif' />");
    jQuery("#ajax").show();
    return;
  },
  success: function(Jdata) {
  
  jQuery("#ajax").html("");
    //可以透過.length得知其中的物件數
var NumOfJData = Jdata.length; 

//把Loading隱藏起來
jQuery("#ajax").hide();

//可以透過.length得知其中的物件數
var NumOfJData = Jdata.length; 
//把取得的json加上html tag顯示於容器裡
for (var i = 0; i < NumOfJData; i++) {
  jQuery("#ajax").append("<div class=\"ajaxRoll\"><img src=\"images/icon/"+
          Jdata[i]["id"]+".jpg\" /><div class=\"title\">"+Jdata[i]["title"]+
          "</div><div class=\"desc\">"+Jdata[i]["title"]+"</div></div>");
}
//淡入資料
jQuery("#ajax").fadeIn("slow");

  },
  error: function() {
    jQuery("#ajax").html(data);
    alert("可能有某些問題產生，您可以再試一次看看!");
  },
  complete:function()
  {
    
  }
});
}); });});});
    </script>

</head>
<body style="padding-left: 20px;">


<div><a href="http://blog.yslifes.com">我的blog</a></div>
<div class="ajaxagent">
<div id="ajax">
<div class="ajaxRoll"><img src="images/icon/01.jpg" />
<div class="title">這是第一個元素</div>
<div class="desc">這裡是第一個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/02.jpg" />
<div class="title">This is a English Title</div>
<div class="desc">This is a description of first element</div>
</div>
<div class="ajaxRoll"><img src="images/icon/03.jpg" />
<div class="title">這是第三個元素這是第三個元素這是第三個元素</div>
<div class="desc">這裡是第三個元素的描素這裡是第三個元素的描素這裡是第三個元素的描素這裡是第三個元素的描素這裡是第三個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/04.jpg" />
<div class="title">這是第四個元素</div>
<div class="desc">這裡是第四個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/05.jpg" />
<div class="title">這是第五個元素</div>
<div class="desc">這裡是第五個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/06.jpg" />
<div class="title">這是第六個元素</div>
<div class="desc">這裡是第六個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/07.jpg" />
<div class="title">這是第七個元素</div>
<div class="desc">這裡是第七個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/08.jpg" />
<div class="title">這是第八個元素</div>
<div class="desc">這裡是第八個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/09.jpg" />
<div class="title">這是第九個元素</div>
<div class="desc">這裡是第九個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/10.jpg" />
<div class="title">這是第十個元素</div>
<div class="desc">這裡是第十個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/11.jpg" />
<div class="title">這是第十一個元素</div>
<div class="desc">這裡是第十一個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/12.jpg" />
<div class="title">這是第十二個元素</div>
<div class="desc">這裡是第十二個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/13.jpg" />
<div class="title">這是第十三個元素</div>
<div class="desc">這裡是第十三個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/14.jpg" />
<div class="title">這是第十四個元素</div>
<div class="desc">這裡是第十四個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/15.jpg" />
<div class="title">這是第十五個元素</div>
<div class="desc">這裡是第十五個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/16.jpg" />
<div class="title">這是第十六個元素</div>
<div class="desc">這裡是第十六個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/17.jpg" />
<div class="title">這是第十七個元素</div>
<div class="desc">這裡是第十七個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/18.jpg" />
<div class="title">這是第十八個元素</div>
<div class="desc">這裡是第十八個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/19.jpg" />
<div class="title">這是第十九個元素</div>
<div class="desc">這裡是第十九個元素的描素</div>
</div>
<div class="ajaxRoll"><img src="images/icon/20.jpg" />
<div class="title">這是第二十個元素</div>
<div class="desc">這裡是第二十個元素的描素</div>
</div>

</div>
<ul class="playerControl" id="playerControl">
    <li id="page1" class="current">1</li>
    <li id="page2">2</li>
</ul>
</div>

</body>
</html>

回傳的json資料格式，單純純網頁，如果需要動態網頁可以依此格式修改。

data-1.htm

[{"id":"01","title":"這是第一個元素","desc":"這裡是第一個元素的描素"},
{"id":"02","title":"This is a English Title","desc":"This is a description of first element"},
{"id":"03","title":"這是第三個元素這是第三個元素這是第三個元素","desc":"這裡是第三個元素的描素這裡是第三個元素的描素這裡是第三個元素的描素這裡是第三個元素的描素這裡是第三個元素的描素"},
{"id":"04","title":"這是第四個元素","desc":"這裡是第四個元素的描素"},
{"id":"05","title":"這是第五個元素","desc":"這裡是第五個元素的描素"},
{"id":"06","title":"這是第六個元素","desc":"這裡是第六個元素的描素"},
{"id":"07","title":"這是第七個元素","desc":"這裡是第七個元素的描素"},
{"id":"08","title":"這是第八個元素","desc":"這裡是第八個元素的描素"},
{"id":"09","title":"這是第九個元素","desc":"這裡是第九個元素的描素"},
{"id":"10","title":"這是第十個元素","desc":"這裡是第十個元素的描素"},
{"id":"11","title":"這是第十一個元素","desc":"這裡是第十一個元素的描素"},
{"id":"12","title":"這是第十二個元素","desc":"這裡是第十二個元素的描素"},
{"id":"13","title":"這是第十三個元素","desc":"這裡是第十三個元素的描素"},
{"id":"14","title":"這是第十四個元素","desc":"這裡是第十四個元素的描素"},
{"id":"15","title":"這是第十五個元素","desc":"這裡是第十五個元素的描素"},
{"id":"16","title":"這是第十六個元素","desc":"這裡是第十六個元素的描素"},
{"id":"17","title":"這是第十七個元素","desc":"這裡是第十七個元素的描素"},
{"id":"18","title":"這是第十八個元素","desc":"這裡是第十八個元素的描素"},
{"id":"19","title":"這是第十九個元素","desc":"這裡是第十九個元素的描素"},
{"id":"20","title":"這是第二十個元素","desc":"這裡是第二十個元素的描素"}]

data-2.htm

[{"id":"21","title":"這是第二一個元素","desc":"這裡是第二一個元素的描素"},
{"id":"22","title":"This is a English Title","desc":"This is a description of first element"},
{"id":"23","title":"這是第二三個元素這是第二三個元素這是第三個元素","desc":"這裡是第二三個元素的描素這裡是第二三個元素的描素這裡是第二三個元素的描素這裡是第二三個元素的描素這裡是第二三個元素的描素"},
{"id":"24","title":"這是第二四個元素","desc":"這裡是第二四個元素的描素"},
{"id":"25","title":"這是第二五個元素","desc":"這裡是第二五個元素的描素"},
{"id":"26","title":"這是第二六個元素","desc":"這裡是第二六個元素的描素"},
{"id":"27","title":"這是第二七個元素","desc":"這裡是第二七個元素的描素"}]

範例展示網址：http://blog.yslifes.com/demo/fade-Out-Ajax-In/

Pages: 1 2 3

發表迴響