將滑塊移出其父部分

我想知道是否有可能通過任何機會將DIV從其父項中移出？我有這個使用模板的PHP CMS。 layout.cpl是所有頁面的通用模板。在這裏面，我有這樣的代碼來顯示頁面的主體......將滑塊移出其父部分

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

我加了jQuery的滑塊，這種情況應該只是出現在某些網頁上，因此它的boxmain DIV中，因爲這是父母。與滑塊的東西，它應該是一個水平的整頁寬度橫幅，因此我需要它浮出來。如果我不這樣做，它會改用「boxmain」div的100％寬度。

我希望我明確這一點，這可能有點令人困惑，但我的基本目標是從其父div中獲得一個子div，以便能夠滿足滑動橫幅的整頁寬度。

這是在另一個模板的滑塊，基本上顯示子頁面的一個代碼：

<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>

來源

2013-01-08 zzwyb89

我有點失去了，以你正試圖在這裏實現什麼... – TNCodeMonkey

我會包括一張圖片，講述了千言萬語。我的基本目標是從其父母div中獲得一個小孩div。 'boxmain'中的'slicebox-wrapper'，但保留在'boxmain'內。 – zzwyb89

我對你的問題有點不清楚，所以我可能是錯的，但它的聲音，我就像你可能有興趣從當前div中移除元素並將其放置在身體的其他位置。你可以在（）之後使用remove（）和append（），prepend（）等來改變div在文檔中的位置。

您必須觸發該功能才能在加載滑塊時執行移動。如果頁面是靜態的，您可以在$（document）.ready中執行。但是，如果您使用AJAX加載該div，請在調用該函數的Response中傳遞的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-08 18:33:16

這聽起來像你是想在滑塊上的100％屏幕尺寸，當它包含在小於100％的東西時。如果是這樣，我會敦促這一點。這將是更實際的一個100％的寬度包裝中的包裝你的滑塊和內容DIV（S）：

<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-08 19:45:26 TNCodeMonkey

將滑塊移出其父部分

回答

相關問題