用ajax和jquery將內容加載到可擴展的DIV中

Question

我想使用可摺疊的DIV來顯示和隱藏用戶的內容。

我發現這個jQuery代碼做的展開和摺疊：但是內容已經加載的div http://webcloud.se/code/jQuery-Collapse/

（它只是從視圖中隱藏）。

所以我隨後發現這一點： http://www.raymondcamden.com/index.cfm/2011/4/5/Collapsible-content-and-Ajax-loading-with-jQuery-Mobile

它加載內容到開放的div，但它關閉時也卸載它！

但是它的所有jQuery Mobile的混合，所以它的風格。 我希望能夠自己設計divs。第一個例子還使用了很好的反彈或淡入淡出效果來將內容顯示出來。

之所以這樣做，這是我想向用戶展示不同的內容，如圖像或Flash文件，但我不想要的一切加載到頁面加載的頁面，這將是太多的東西。

那麼，如何可以使用第一jQuery的摺疊的例子，但在加載外部網頁？

Answer 1

這裏是我做了一個例子：

  $(document).ready(function() { 
       $('.accordian_body').hide(); 
       }); 


     $('.accordian_head').click(function() { 
      $(this).next().animate(
     { 'height': 'toggle' }, 'fast' 
     ); 

在HTML

<div class="accordian_head"></div> 
    <div class="accordian_body"></div> 

在CSS，你可以風格你喜歡的頭部和身體然而，在代碼後面加

然後 -

<asp:Literal ID="lit1" runat="server" /> 


    foreach(DataRow dr in DataTable.Rows) 
    { 
     lit1.Text = lit1.Text + "<div class=\"accordian_head\">" Whatever you want... "</div><div class=\"accordian_body\">" Whatever in body "</div> 
     } 

Answer 2

檢查這個link這是在php中，並顯示如何加載外部鏈接到DIV Ajax可以加載只有內部網頁，並且不能跨域使用。

Answer 3

我很喜歡這個問題，所以我花了一點時間做一些接近一個插件：

//only run the event handler for collapsible widgets with the "data-url" attribute 
$(document).delegate('.ui-collapsible[data-url] > .ui-collapsible-heading', 'click', function() { 

    //cache the collapsible content area for later use 
    var $this = $(this).siblings('.ui-collapsible-content'); 

    //check if this widget has been initialized yet 
    if (typeof $this.data('state') === 'undefined') { 

     //initialize this widget 

     //update icon to gear to show loading (best icon in the set...) 
     $this.siblings('.ui-collapsible-heading').find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-gear') 

     //create AJAX request for data, in this case I'm using JSONP for cross-domain abilities 
     $.ajax({ 

      //use the URL specified as a data-attribute on the widget 
      url   : $this.closest('.ui-collapsible').data('url'), 
      type   : 'get', 
      dataType  : 'jsonp', 
      success  : function (response) { 

       //get the height of the new content so we can animate it into view later 
       var $testEle = $('<div style="position:absolute;left:-9999px;">' + response.copy + '</div>'); 
       $('body').append($testEle); 
       var calcHeight = $testEle.height(); 

       //remove the test element 
       $testEle.remove(); 

       //get data to store for this widget, also set state 
       $this.data({ 
        state   : 'expanded', 
        height  : calcHeight, 
        paddingTop : 10, 
        paddingBottom : 10 

       //add the new content to the widget and update it's css to get ready for being animated into view 
       }).html('<p>' + response.copy + '</p>').css({ 
        height  : 0, 
        opacity  : 0, 
        paddingTop : 0, 
        paddingBottom : 0, 
        overflow  : 'hidden', 
        display  : 'block' 

       //now animate the new content into view 
       }).animate({ 
        height  : calcHeight, 
        opacity  : 1, 
        paddingTop : $this.data('paddingTop'), 
        paddingBottom : $this.data('paddingBottom') 
       }, 500); 

       //re-update icon to minus 
       $this.siblings('.ui-collapsible-heading').find('.ui-icon').addClass('ui-icon-minus').removeClass('ui-icon-gear') 
      }, 

      //don't forget to handle errors, in this case I'm just outputting the textual message that jQuery outputs for AJAX errors 
      error   : function (a, b, c) { console.log(b); } 
     }); 
    } else { 

     //the widget has already been initialized, so now decide whether to open or close it 
     if ($this.data('state') === 'expanded') { 

      //update state and animate out of view 
      $this.data('state', 'collapsed').animate({ 
       height  : 0, 
       opacity  : 0, 
       paddingTop : 0, 
       paddingBottom : 0 
      }, 500); 
     } else { 

      //update state and animate into view 
      $this.data('state', 'expanded').animate({ 
       height  : $this.data('height'), 
       opacity  : 1, 
       paddingTop : $this.data('paddingTop'), 
       paddingBottom : $this.data('paddingBottom') 
      }, 500); 
     } 
    } 

    //always return false to handle opening/closing the widget by ourselves 
    return false; 
});​ 

可摺疊的HTML看起來像這樣：

<div data-role="collapsible" data-url="http://www.my-domain.com/jsonp.php"> 
    <h3>Click Me</h3> 
    <p></p> 
</div> 

這裏是一個演示：http://jsfiddle.net/YQ43B/6/

注意，對於演示中，我發現，使初始動畫的最佳方式順利是添加這個CSS：

.ui-mobile .ui-page .ui-collapsible .ui-collapsible-content { 
    padding-top : 0; 
    padding-bottom : 0; 
}​ 

對於頂部和底部填充，jQuery Mobile添加的默認填充爲10px，我將這些值作爲數據屬性添加到每個部件以保持默認值。

注意，這個代碼可以稍微調整，以顯示其他類型的內容，我用JSONP只是因爲你可以的jsfiddle使用它。