0

折りたたみ可能な DIV を使用して、ユーザーに対してコンテンツを表示および非表示にしたいと考えています。

展開と折りたたみを行うこの 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 Collapse の例を外部ページをロードして使用するにはどうすればよいでしょうか?

4

3 に答える 3

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 Mobile によって追加されるデフォルトのパディングは10px、上部と下部の両方のパディングです。デフォルトを維持するために、これらの値をデータ属性として各ウィジェットに追加しました。

このコードは、他のタイプのコンテンツを表示するように微調整できることに注意してください。JSFiddle で使用できるという理由だけで JSONP を使用しました。

于 2012-06-16T18:20:05.647 に答える
0

これが私が作った例です：

         $(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>
      }
于 2012-06-16T03:25:35.287 に答える
0

このリンクをチェックしてください。これはphpにあり、DIVへの外部リンクをロードする方法を示しています。Ajaxは内部ページのみをロードでき、ドメイン間では機能しません。

于 2012-06-16T03:37:33.593 に答える