Posts Tagged javascript
Jquery: Множественный фон, текст в колонки
Есть некоторые полезные свойства которые включены в спецификацию CSS3, но до сих пор не поддерживаются в полной мере современными браузерами(исключение пожалуй составляет только Safari).
И ничего другого не остается как эмулировать эти свойства через Javascript, а лучше с использованием замечательного фреймворка Jquery.
Первое свойство с которого хотелось бы начать это - множественный фон. Применений этому свойству можно найти массу, например уже приевшиеся закругленные уголки в блоке.
И так для реализации множественного фона нам понадобиться сам jquery 1.3.2 и плагин jquery.background_layers.js
Применяем все следующем образом:
-
<script src=“jquery-1.3.2.min.js” type=“text/javascript”></script>
-
<script src=“jquery.background_layers.js” type=“text/javascript”></script>
-
-
<script type=“text/javascript”>
-
$(function(){
-
$(’#general’).add_layer("url(’/images/header_back.jpg’) no-repeat center top");
-
$(’#general’).add_layer("url(’/images/footer_back.jpg’) no-repeat center bottom");
-
});
-
</script>
-
-
<div id=“general”> множественный фон у этого блока </div>
Второе свойство которое приходится эмулировать это - текст в колонки, по типу газетной верстки. Преимущество этого свойства в том что кусок текста при добавлении на страницу автоматически разбивается на колонки и это не приходится делать вручную.
Для этого понадобиться jquery 1.2.6 и плагин autocolumn.js
Применение этого свойства выглядит так:
-
<script src=“jquery1.2.6.js” type=“text/javascript”></script>
-
<script src=“autocolumn.js” type=“text/javascript”></script>
-
-
<script type=“text/javascript”>
-
$(function(){
-
$(’.column’).columnize({columns:2, width: 300});
-
});
-
</script>
-
-
<div class=“column”>
-
<h1>Текст в колонки</h1>
-
<p>Bonorum has. His u usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
-
</div>
Более подробные примеры работы этого плагина тут
Нестандартный скроллинг
Иногда по особой просьбе дизайнера необходимо сделать нестандартный скроллинг на сайте. Изменение внешнего вида скроллбаров поддерживают только IE и Opera, но только без указания DOCTYPE. Для полной кроссбраузерности с DOCTYPE нужно использовать яваскрипт, например jquery.
На этом сайте показан как работает один из таких скриптов - http://kelvinluck.com/assets/jquery/jScrollPane/examples.html