如何使用`content_for？`方法實現動態佈局列？

我正在使用Ruby on Rails 3.我想通過使用content_for?方法來呈現佈局，以「有條件地」生成具有適當CSS屬性的HTML代碼。也就是說，我想實現具有以下特徵的佈局：如何使用`content_for？`方法實現動態佈局列？

如果content_for左列存在，則佈局具有2列（一個左欄具有固定寬度和內容列與剩餘寬度）;
如果content_for左列是不存在，則佈局具有1柱（一個內容列與全寬）。

如何在/app/views/layouts/application.html.erb文件中實現它？你有一些建議嗎？

注意：希望我在尋找佈局的示例實現（包括Ruby on Rails方法，HTML和CSS代碼）。

加成：內部的內容列塊我想「有條件」顯示右欄如果content_for右列存在。

來源

2012-09-17 user12882

可以使用相鄰（+）或後續（~）同胞選擇到基於左列是否是可見的有條件申請保證金到您的內容列。

爲了您的獎金問題，你應該把內容列的內容的內包裝DIV中，然後用:nth-last-child檢查右側立柱是否是可見的，有條件申請保證金有作爲：

CSS：

.page { 
    position: relative; 
} 

.page .left-column { 
    background: lavender; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 180px; 
} 

.page .content-column { background: orange; } 

.page .content-column > .inner-wrap { background: rgba(255,255,255,0.3); } 

.page .left-column + .content-column { 
    margin-left: 200px; 
} 

.page .content-column .right-column { 
    background: lime; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 90px; 
} 

.page .content-column > .inner-wrap:nth-last-child(2) { 
    margin-right: 100px; 
}

HTML：

<div class="page"> 

    <% if content_for?(:left_column) %> 
    <div class="left-column"> 
     <%= yield(:left_column) %> 
    </div> 
    <% end %> 

    <div class="content-column"> 
    <div class="inner-wrap"> 
     <%= yield(:content_column) %> 
    </div> 

    <% if content_for?(:right_column) %> 
     <div class="right-column"> 
     <%= yield(:right_column) %> 
     </div> 
    <% end %>   
    </div> 

</div>

渲染布局預覽：http://jsbin.com/icurey/8/edit

來源

2012-09-17 21:55:24 tuff

謝謝，但是HTML代碼會被「黑客攻擊」嗎？也就是說，有一個更「正確」的方法來實現這一點？ – user12882

實際上，在上一個CSS規則集中使用'+'（或'〜'）組合符，不需要在if-else內部的內容列中具有開始標記 - 您可以將一個開始標記放在if-else並依賴CSS來應用邊界，如果有左列。我只使用if-else來顯示如果您想爲全/部分寬度提供不同的類，您可以執行哪些操作。嘗試在jsbin中取出那些'full-width'和'partial-width'類，看看它是如何工作的！ – tuff

我已經刪除了我的答案中的if-else內容，因爲它對於你想要的東西來說似乎是多餘的。所以你可以跳過「hacky」標記並完全使用CSS。 – tuff

您可能想要檢查content_for?，如果內容是針對給定參數產生的，則返回true。見content_for?

來源

2012-09-17 21:07:59 ksol

我知道'content_for？'方法。我正在尋找一個與HTML和CSS相關的「工作」*代碼*。 – user12882

經過一個半小時的嘗試（沒有成功），我得出結論，最好是要求一些幫助（否則，Stackoverflow存在的原因是什麼？！）。我認爲Web上的一些專家很容易實現這種佈局（對我來說，這對於某人來說是一件很簡單的事情）...... * PS *：「基本上」說，我總是希望*許多慷慨的靈魂*。 – user12882

如何使用`content_for？`方法實現動態佈局列？

回答

相關問題