Posts Tagged jquery
Скрыть значение при клике на поле
Очень простой скрипт на Jquery. Позволяет скрыть value когда input поймал фокус и показать когда фокус потерян.
Инсталляция: вешаем класс “change-val” на нужные инпуты в форме.
-
function hideValue() {
-
-
var elem = jQuery(“.change-val”);
-
if (elem.size() > 0) {
-
elem.each(function () {
-
var defaultVal = jQuery(this).val();
-
jQuery(this).focus(function () {
-
if (jQuery(this).val() == defaultVal) {
-
jQuery(this).val(”);
-
}
-
}).blur(function () {
-
if (jQuery(this).val() == ”) {
-
jQuery(this).val(defaultVal);
-
}
-
});
-
});
-
}
-
-
}
-
-
-
jQuery(document).ready(function () {
-
hideValue();
-
});
Удачи!
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>
Более подробные примеры работы этого плагина тут