Как это делается
Технология очень простая:
1. Загружается Javascript-библиотека niftycube.js размером всего 9 кб.
2 Загружается, или встраивается в страницу вызов функции Nifty с аргументами.
3. И всё!
Рассмотрим самый простой пример.
Имеем CSS:
div#box{
width: 18em;
padding: 20px;
margin: 0 auto;
background: #E6E6E6;
color: #000;
}
В head страницы записываем:
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){Nifty("div#box","big");}
</script>
Body страницы:
<body>
<div id="box">
<h1>Nifty Corners Cube™</h1>
<p>Один вызов, три параметра, три размера!</p>
</div>
</body>
Любуемся результатом:
Что мы имеем:
Вызов функции Nifty("div#box","big") что-то делает с контейнером, обозначенным id="box". Это что-то - скругление уголков.
Пример 2. CSS:
ul#split, ul#split li{
margin: 0;
padding: 0;
list-style: none;
}
ul#split li{
float: left;
width: 150px;
margin: 0 10px 10px 0;
}
ul#split h3{
font: normal 120%/1.3 Verdana, sans-serif;
text-transform: uppercase;
margin: 0px;
padding: 5px 0 0;
text-align: center;
color: #000;
}
ul#split p{
margin: 0;
padding: 5px 8px 15px;
}
li#one h3{
background: #C8C866;
}
ul#split div{
background: #FFC;
}
li#one div{
border: 2px solid #C8C866;
}
li#two h3{
background: #FFBD00;
}
li#two div{
border: 2px solid #FFBD00;
}
li#three h3{
background: #E3A1C4;
}
li#three div{
border: 2px solid #E3A1C4;
}
Вызов Nitty:
<script type="text/javascript">
window.onload=function(){
Nifty("ul#split h3","top");
Nifty("ul#split div","none same-height");
}
</script>
HTML:
<body>
<ul id="split">
<li id="one"><h3>Первый заголовок</h3>
<div>
<p>Это пример использования технологии <strong>NiftyCube</strong> для скругления углов.</p>
</div>
</li>
<li id="two"><h3>Второй заголовок сделаем подлиннее</h3>
<div>
<p>Это пример использования технологии <strong>NiftyCube</strong> для скругления углов.</p>
<p>Это пример использования технологии <strong>NiftyCube</strong> для скругления углов.</p>
<p>Это пример использования технологии <strong>NiftyCube</strong> для скругления углов.</p>
<p>Это пример использования технологии <strong>NiftyCube</strong> для скругления углов.</p>
</div>
</li>
<li id="three"><h3>333</h3>
<div>
<p>Это пример использования технологии <strong>NiftyCube</strong> для скругления углов.</p>
</div>
</li>
</ul>
</body>
Результат:
Итак, все секреты - в параметрах.
l.setAttribute("href","niftyCorners.css");
То есть подразумеватеся, что этот файл лежит рядом со страницей. Но в MODx физически страницы нигде не лежат, они как бы находятся в корне сайта, значит и niftyCorners.css также надо поместить в корень сайта.
Или откорректировать в niftycube.js строку 37, наподобие:
l.setAttribute("href","assets/templates/site/css/NiftyCube/niftyCorners.css");
Исходник этой CSS мы не приводим. Предполагается, что он должен оставаться неизменным и влезать в него с грязными лапами не нужно.
Параметры Nifty
Первый параметр - селектор CSS, элементы которого должны быть обработаны Nifty Corners. Допускаются селекторы:
а) Типа, например "div" - скруглять углы у всех div.
б) Идентификаторов, например "div#box" - скруглять углы у div с ID=box.
в) Классов, например "p.red" - скруглять углы у абзаца класса red.
г) Потомков, например "div#box h3" - скруглять углы у заголовка h3 в div с ID=box.
д) группировок, например "div, h3#main, p " - скруглять углы у всех div, заголовка h3 в div с ID=box и у абзацев.
Второй параметр - ключевые слова, указывающие какие углы скруглять. Если второй параметр опущен, принимаются значения по умолчанию "all normal".
Основные ключевые слова приведены в таблице:
| Ключевое слово |
Описание |
| tl | Скруглять левый верхний угол |
| tr | Скруглять правый верхний угол |
| bl | Скруглять левый нижний угол |
| br | Скруглять правый нижний угол |
| top | Скруглять верхние углы |
| bottom | Скруглять нижние углы |
| left | Скруглять левые углы |
| right | Скруглять правые углы |
| all | Скруглять все углы (по умолчанию) |
| none | Не скруглять углы |
| small | Малый радиус углов (2px) |
| normal | Нормальный радиус углов (5px) - по умолчанию |
| big | Большой радиус углов (10px) |
А теперь приведем несколько примеров использования Nifty.
Написать комментарий