Я работаю над гибким макетом сайта, где область содержимого для определенных страниц может иметь панель информации правой руки, а другие - нет. Я создаю этот сайт в рамках собственной CMS, которую использует моя работа. Теперь мы используем Шаблоны, где создается вся структура HTML, и используем макросы, чтобы вытащить содержимое, которое клиент вводит через CMS.
Обычно я бы создал отдельный шаблон для страниц, которые будут использовать правую панель и отдельный шаблон для тех, которые не являются, но поскольку клиент может захотеть добавить правые панели на страницы, которые их не имеют в будущем, Мне было интересно, есть ли какой-нибудь стиль перезаписи, который я могу добавить к моему шаблону, чтобы весь сайт мог работать на одном шаблоне, а не добавлять шаблон с правой панелью для одной страницы и шаблон, который не подходит для другого,
Мой код будет примерно таким:
CSS:
section#maincontent {width:720px; float:left;}
aside {width:240px; float:right;}
HTML:
<section id="maincontent">[conetent]</section>
<aside>[right_panel]</aside>
Есть ли часть javascript/CSS/веб-магии, которая может перезаписать правый div панели, если клиент решает добавить/удалить правую панель со страницы/шаблона, чтобы maincontent заполнил ширину страницы, не создавая новую шаблон с добавленным/удаленным стилем?
Вы можете просто изменить его, чтобы отобразить его.
HTML...
<div id="theOneToBeRemoved" onclick="remove()">
</div>
Javascript
function remove(){
document.getElementById("theOneToBeRemoved").style.display = "none";
}
Замечу, что вы можете не захотеть добавить событие onclick в div... Может быть, добавьте кнопку X или закройте... что-то вдоль этих строк... Итак, если они нажимают на div, это случайно не закрывается... Кроме того, вы можете захотеть добавить некоторые css-переходы в свой div... Так что, когда он закрывает свою гладкую, а не крутую.. Выглядит намного лучше
Добавьте обертку div, выведите класс "withoutRightPanel", если вы хотите "удалить" правую панель и добавить правила css ниже:
HTML
<div class="withoutRightPanel">
<section id="maincontent">[conetent]</section>
<aside class="rightPanel">[right_panel]</aside>
</div>
CSS
.withoutRightPannel .rightPanel
{
display:none;
}
.withoutRightPannel #maincontent
{
//Fill the gap after you hide right panel, or you can set a value by pixel
width:100%;
}