В сегоднящнем уроке мы создадим разметку сайта с возможностью изменения ширины блоков.
Предоставление возможности пользователю самостоятельно менять ширину сайта очень хорошая идея. Для выполнения этой задачи нам понадобится jQuery и CSS.
Для начала мы создаем три блока с помощью HTML:
<div class="wrapper">
<div class="leftcolm"> text content.... </div>
<div class="rightcolm"> text content.... </div>
<div class="midcont"> text content.... </div>
</div>
Далее с помощью стилей превратим эти блоки в 3 колонки:
body { margin:0px; padding:0px; }
.wrapper { width:980px; margin:0 auto; }
.leftcolm { float:left; width:200px; background-color:#99FF99; padding:10px; }
.rightcolm { float:right; width:200px; background-color:#99FF99; padding:10px; }
.midcont { padding:10px; margin-left:230px; margin-right:230px; background-color:#CCCCCC; }
Наша структура из 3-х колонок готова. Теперь нам необходимо добавить кнопки управления шириной.
Ниже представлен HTML код для кнопок. Для этого будет использоваться неупорядоченный список с 3 элементами.
<div class="controls">
<ul>
<li><a href="#" class="switch_fluid">100%</a></li>
<li><a href="#" class="switch_980">980</a></li>
<li><a href="#" class="switch_780">780</a></li>
</ul>
</div>
Ниже представлены стили оформления для кнопок управления. Как Вы видите мы используем три иконки.
.controls ul, .controls li { margin:0px; padding:0px; list-style:none; display:inline }
.controls li a:link, .controls li a:visited { float:right; display:block; height:15px; width:15px; text-indent:-9999px; overflow:hidden; margin-left:10px; }
.controls li a.switch_780 { background-image:url(images/icon_780.jpg); }
.controls li a.switch_980 { background-image:url(images/icon_980.jpg); }
.controls li a.switch_fluid { background-image:url(images/icon_fluid.jpg); }
.controls li a.select{border:solid 1px #cc0000; width:14px; height:14px;}
JavaScript
Теперь нам необходимо создать JavaScript. Подключаем фреймворк jQuery и прописываем все необходимые функции.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.switch_780").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div.wrapper").animate({width: 780}, 'slow', function() {;
});
});
$("a.switch_980").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div.wrapper").animate({width: 980}, 'slow', function() {;
});
});
$("a.switch_fluid").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div.wrapper").animate({width: '100%'}, 'slow', function() {;
});
});
});
</script>
Все готово! Пользуйтесь, уважаемые читатели!