0

ひょっとして、その親から DIV を浮かせることができるかどうか疑問に思っていますか? テンプレートを使用するこの PHP CMS があります。layout.cpl は、すべてのページの一般的なテンプレートです。その中に、ページの本体を表示するためのこのコードがあります...

<div class="boxmain">Content here</div>

特定のページにのみ表示されるはずのjQueryスライダーを追加しました。したがって、それは親であるため、boxmain div内にあります。スライダーを使用すると、水平方向の全ページ幅のバナーになるはずなので、浮かせる必要があります。そうしないと、代わりに「boxmain」divの100％幅が使用されます。

少し混乱するかもしれませんが、私の基本的な目的は、親 div から子 div を取得して、スライド バナーのページ全体の幅を満たすことができるようにすることです。

これは、基本的にサブページの 1 つを表示する別のテンプレートのスライダーのコードです。

<div class="slicebox-wrapper">
    <ul id="sb-slider" class="sb-slider" style="margin-top: -12px; min-width: 100%; max-width: 100%;">
        <li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab1.jpg" alt="image1"/></li>
        <li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab2.jpg" alt="image2"/></li>
    </ul>   
</div>
4

2 に答える 2

0

スライダーが100％未満のものに含まれている場合、スライダーを画面サイズの100％にしたいようです。もしそうなら、私はそれに反対することを強く勧めます。スライダーとコンテンツdivを100％幅のラッパーでラップする方が実用的です。

    <div class='mainWrapper'>
        //100% Width Wrapper
        <div class="slicebox-wrapper">
           <ul id="sb-slider" class="sb-slider" style="margin-top: -12px; min-width: 100%; max-width: 100%;">
              <li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab1.jpg" alt="image1"/></li>
              <li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab2.jpg" alt="image2"/></li>
              </ul> 
        </div>
        //Fixed Width Wrapper
        <div class='content'>

        </div>
  </div>
于 2013-01-08T19:45:26.057 に答える
0

私はあなたの質問について少し不明確なので、間違っているかもしれませんが、現在の div から要素を削除して、本体の別の場所に配置することに興味があるように思えます。remove() と append()、prepend()、after() などを使用して、その div がドキュメント内のどこにあるかを変更できます。

スライダーがロードされたときに移動を実行するには、関数をトリガーする必要があります。ページが静的な場合は、$(document).ready で実行できます。ただし、AJAX を使用してその div をロードしている場合は、関数を呼び出す応答で渡されるスクリプト タグを HTML に埋め込みます。

ページ：

<body>
    <div class="boxmain">
        <div class="parent">
            <div class="slicebox-wrapper">...</div>
        </div>
    </div>
</body>

jQuery:

jQuery(document).ready(function() {
    jQuery('.slicebox-wrapper').remove().appendTo('.boxmain');
});

次のようにページを再編成します。

<body>
    <div class="boxmain">
        <div class="parent"></div>
        <div class="slicebox-wrapper">...</div>
    </div>
</body>
于 2013-01-08T18:33:16.337 に答える