使用ajax和jquery将内容加载到可扩展的DIV中

Question

我想使用可折叠的DIVs来显示和隐藏用户的内容。

我找到了用于展开和折叠的jQuery代码：http://webcloud.se/code/jQuery-Collapse/

然而，内容已经加载到div中(它只是隐藏在视图中)。

于是我找到了这个：http://www.raymondcamden.com/index.cfm/2011/4/5/Collapsible-content-and-Ajax-loading-with-jQuery-Mobile

这会将内容加载到打开的div中，但也会在关闭时将其卸载！

然而，它与jQuery手机混合在一起，所以它的风格。我希望能够自己设计div的样式。此外，第一个示例使用漂亮的反弹或淡入淡出效果将内容带到视图中。

这样做的原因是我想要向用户显示不同的内容，如图像或闪存文件，但我不希望在页面加载时将所有内容加载到页面中，这将是太多的东西。

那么，在加载外部页面的情况下，如何使用第一个jQuery折叠示例呢？

Answer 1

我喜欢这个问题，所以我花了一点时间制作了一个类似插件的东西：

//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移动添加的默认填充都是10px，我将这些值作为数据属性添加到每个小部件以保持默认值。

注意，这段代码可以稍微调整一下以显示其他类型的内容，我之所以使用JSONP，只是因为您可以在JSFiddle上使用它。

Answer 2

下面是我做的一个例子：

         $(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 3

查看这个link，它在php中，展示了如何加载外部链接到DIV，Ajax只能加载内部页面，并且不能跨域工作。