Posted by: fxix on: Октябрь 23, 2008
<script type=”text/javascript”>
$(document).ready(function() {
// Здесь идет наш JavaScript
});
</script>
Выделение жирным шрифтом текущей страницы
* ЯЗЫК: JavaScript
$(”a[@href$=" + document.location.pathname + "]“).css({fontWeight: “bold”})
При изменении формата ссылок (я использовал относительные пути) необходимо будет поменять и скрипт. Что касается одной строчки, которая делает всю работу, то в ней задействуется уже знакомая нам функция $(…), которая в данном случае выбирает все ссылки со значением атрибута href, заканчивающегося на document.location.pathname. В этой переменной, в свою очередь, хранится путь до текущей страницы. Также мы используем метод css для установки параметра каскадных таблиц стилей font-weight. Если ты обратил внимание, то название параметра font-weight написано немного по-другому: «fontWeight», то есть стилем «верблюд», который используется в JavaScript. В качестве завершающего штриха я предлагаю сделать так, чтобы клик по элементу меню текущего раздела отменялся. Это очень разумное решение, ведь нельзя перейти на страницу, на которой уже находишься. А еще мне удастся продемонстрировать цепочку вызовов, которые постоянно используются в скриптах с jQuery.
Цепочка вызовов
* ЯЗЫК: JavaScript
$(document).ready(function() {
$(”a[@href$=" + document.location.pathname + "]“)
.css({fontWeight: “bold”})
.click(function() { return false; } );
});
У нас получилось обойтись без дополнительных переменных, что в простых случаях сокращает код без ущерба для ясности. В этом исходнике ты можешь также увидеть стиль оформления, который удачно подойдет в следующем случае: вместо одной строчки я бью цепочку вызовов на несколько, чтобы показать, где вызовы происходят. Я думаю, что теперь тебе не составит труда изменить скрипт для прикрепления стрелочки только к внешним ссылкам. Очень рекомендую посмотреть для простоты, какие операторы эквивалентности есть, кроме «$=», и что именно они делают.
Круглые уголки: идеальный вариант
* ЯЗЫК: HTML
<div class=”round”>
<– Здесь идет контент –>
</div>
Конечно, мы живем не в идеальном мире… Хотя почему? Давай заставим этот код работать! Для этого нам понадобится плагин jQuery corner, который отвечает за создание различных видов углов. Для этого надо скачать файл jquery.corner.js Файл весит 6 Кб в несжатом виде с комментариями и тестами. Теперь переборем себя и напишем целую строчку кода в конструкции $(document).ready.
Скругляем углы
* ЯЗЫК: JavaScript
$(’.round’).corner();
Для красоты (а точнее, чтобы результат работы был виден) зададим цвет и внутренние отступы для слоя.
Стиль round
* ЯЗЫК: CSS
.round {
padding: 20px;
background-color: green;
}
Сразу скажу, что полезность плагина только круглыми уголками не ограничивается. Ты можешь создавать не только круглые, но и треугольные, «покусанные» уголки, а также уголки многих других форм. Кроме того, можно определять, какие именно углы подвергнутся декоративному украшению, задавать другие параметры для метода corner.
2. Подключение квери:
Когда подключаем квери то сначала квери потом свой скрипт в котором команды квери:
<!–главный файл стилей–>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" charset="utf-8" />
<!–при наличии других фреймворков–>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<!–при необходимости своих скриптов–>
<script src="js/JavaScript.js" language="javascript" type="text/javascript"></script>
Posted by: fxix on: Октябрь 23, 2008
Во-первых, свойство применяется только для абсолютно спозиционированных блоков. Жаль конечно, но такие правила.
Во-вторых, оно позволяет отображать определенную часть блока. На данный момент только прямоугольную. Как-то так:
Проще всего запомнить что: 1е и последнее число — это координаты левого верхнего угла, а средние два числа — правого нижнего угла вырезаемого прямоугольника. Я сделал специальный интересный пример, чтобы это проиллюстрировать. Если считать что (x1, y1) и (x2, y2) координаты левого верхнего и правого нижнего углов, то вот так все выглядит:
clip: rect(y1 x2, y2 x1)
Очевидно, подразумевается, что в будущем появится возможность вырезать эллипсы:
clip: ellipse(42px,14px,188px, 200px);
И где-то в CSS3D, я надеюсь, наконец появятся додекаэдры:
clip: dodecahedron(42px,16px, 188px, 100px); /*для построения додекадра достаточно знать координаты центра его симметрии, и радиус*/
clip: ИЕ и все остальные
Разумеется и тут не обошлось без нестыковок. Согласно спецификации расстояния должны писаться через запятую, вот так:
clip: rect(5px, 40px, 45px, 5px);
Однако, при использовании запятых ИЕ не воспринимает значения. Таким образом, приходится писать без них:
clip: rect(5px 40px 45px 5px);
Это не совсем валидно, но, тем не менее, воспринимается всеми броузерами.
png-24 в ИЕ
Пожалуй все уже знают что полупрозрачные PNG-24 файлы в ИЕ6 и ниже не работают. И для их нормальной работы нужно задавать фон как-то так:
1. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=’MYTERRIFIC.png’)
В этом методе прекрасно только одно: он вообще работает. Но он не позволяет нам использовать background-position. То есть вся крутость от прелоадов и спрайтов со всякими сдвиганиями фона теряется.
Мы можем заменить «crop» на «scale», тогда картинка просто растянется (не повторится), но контролировать background-posiiton не можем.
Можем. png-24 background-position в ИЕ!
Будем использовать, к примеру, такой вот рисунок, 200 на 200 пикселей. Для пущей простоты вычислений.
Так как все кроме ИЕ уже отображают PNG нормально, то для них сработает обычное:
1. a {
2. height:100px; width:200px;
3. background:url(nav.png) no-repeat 0 0;
4. }
5. a:hover{
6. background-position:0 -100px; /*фоновый рисунок сместится на 100 пикселей вверх, и визуально цвет пункта меню изменится*/
7. }
Для начала заставим ИЕ нормально отображать полупрозрачный PNG (эти стили должен увидеть только ИЕ):
1. a {
2. background:none;
3. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”nav.png”, sizingMethod=”crop”);
Вот что нужно теперь сделать для ИЕ:
1. a {
2. height:200px;/*чтобы вся картинка поместилась в фон, и было из чего вырезать*/
3. clip:rect(0px 200px 100px 0px); /*Вырезаем верхнюю часть картинки*/
4. }
5. a:hover {
6. clip:rect(100px 200px 200px 0px); /*Вырезаем нижнюю часть картинки*/
7. top:-100px;/*Так как clip вырезал нижнюю часть, и оставил пространство вверху, нужно приподнять видимую часть картинки вверх*/
8. }
Если словами: при наведении мышки, clip вырезает нижнюю часть ссылки (верхняя некликабельна становится). Таким образом, чтобы визуально она осталась на месте, приходится её поднять на высоту 100px вверх. А кликабельная область остается того же размера.
