2013-10-13 80 views
1

我有以下代碼,我想知道每次單擊Dynamic Post時顯示微調圖像的代碼放置位置或導航回主列表頁面時的位置:在Google Ajax中顯示頁面加載微調器

function initialize() { 
    var feed = new google.feeds.Feed("http://howtodeployit.com/category/daily-devotion/feed/"); 
    feed.setNumEntries(8); 
    feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT); 
    feed.load(function(result) { 
     if (!result.error) { 
      var container = document.getElementById("feed"); 
      var posts = '<ul data-role="listview" data-filter="true">'; 
       for (var i = 0; i < result.feed.entries.length; i++) { 
       var entry = result.feed.entries[i]; 

        posts += '<li>'; 
        posts += '<a href="#articlepost" onclick="showPost(' + id + ')">'; 
        posts += '<div class="ui-li-heading">' + entry.title + '</div>' ; 
        posts += '<div class="ui-li-desc">' + n_date + '</div>'; 
        posts += '</a>'; 
        posts += '</li>'; 
       } 
      posts += '</ul>'; 
     // Append each list of posts to #devotionlist in html page 
     $("#devotionlist").append(posts); 
     //$("#devotionlist").listview('refresh'); 
     } 
    }); 
} 
google.setOnLoadCallback(initialize); 

我試圖看到了一些代碼,但沒有對我的作品......

+0

人產生具有透明背景的新裝載機的想法或者我應該在此示例中使用$就重寫我的代碼: $ .ajax {{beforeSend:function(){$ .mobile.showPageLoadingMsg(); },//顯示微調器 complete:function(){$ .mobile.hidePageLoadingMsg()},//隱藏微調器 – Chelseawillrecover

回答

0

OK我也沒搞清楚這一點,最簡單的方法。我添加了調用和顯示的每個點擊帖子的功能如下代碼:

function showPost(id) { 
    $('#articlecontent').html('<div id="ui_loader"><img src="css/images/ajax-loader.gif" class="ajax_loader"/></div>'); 
    $.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) { 
     var output=''; 
     output += '<h3>' + data.post.title + '</h3>'; 
     output += data.post.content; 
     $('#articlecontent').html(output); 

與下面的CSS:

#ui_loader { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:1000; 
} 

.ajax_loader { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -32px; /* -1 * image width/2 */ 
    margin-top: -32px; /* -1 * image height/2 */ 
    display: block;  
} 

注:我拿出從CSS透明度,因爲裝載機一直在尋找太黑暗,太白當我增加或減少的不透明度設置,所以我所做的就是從AJAX Loader Site

相關問題