Загружать скрипты, картинки и т.д. , безопасно использовать HTML5 и CSS3 в своих проектах. Использовать различные CSS в зависимости от разрешения экрана, пути, страны и браузера.
Перечислим основные возможности:
Загрузка JavaScript кода
Параллельная загрузка скриптов, но последовательное выполнение
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
// готово!
});
Head JS загружает JavaScript файлы, а также картинки и др. без блокировки страницы. Ваша страница будет загружаться быстрее, даже если будет состоять из одного файла: текста и нескольких картинок.
Управление загрузкой JavaScript кода
вы нашли пример кода, в котором SCRIPT SRC тэги размещены внизу страницы, но код используется вверху. С использованием Head JS, это будет выглядеть так:
// использовать jQuery в теле страницы, даже если код еще не включен
head.ready(function() {
$("#my").jquery_plugin();
});
// загружаем код jQuery, там где Вам потребуется в низу страницы
head.js("/path/to/jquery.js");
Расширение возможностей CSS
Head JS добавляет классы к корневым элементам HTML, можно сделать следующее:
/ CSS для браузеров без поддержки box-shadow /
.no-boxshadow .box {
border: 2px solid #ddd;
}
основной упор делается на CSS3, можно легко добавить другие тесты,
но минимально необходимые.
Использование HTML5
Head JS позволяет использовать, продвинутую семантику HTML5
Определение разрешения экрана
Разработка страниц как для широкоформатных экранов с разрешением 1980px, так и для 10'' экранов наладонников и мобильных телефонов. Размер окна просмотра крайне важен при разработке для мобильных устройств.
/ размер экрана меньше, чем 1024 точки /
.lt-1024 #hero { background-image:(medium.jpg); }
/ тонкая настройка для мобильного телефона (меньше 640 точек) /
.lt-640 #hero { background-image:(small.jpg); }
При изменении размеров окна вашего браузера, CSS правила будут динамически выполняться. Head JS будет выполнять эти правила в фоне.
Динамический CSS
Разные стили для различных состояний программы
Каждый раз, когда вызывается head.feature(), ваши CSS стили будут применяться.
CSS маршрутизатор
Применение CSS в зависимости от специфических путей и страниц
/ CSS применяется только для главной страницы (home page) /
#index-page.root-section {
}
/ делаем sidebar видимым только с url начинающемся с /plugins /
.plugins-section #sidebar { display: block; }
Определение браузера
Можно назначить разные стили в зависимости от браузера.
Например стили, только для IE будут выглядеть так:
/ более старые версии IE9 /
.lt-ie9 .box { padding: 10px; }
/ CSS корректировка стилей для IE6 /
.ie6 ul { list-style: none; }
Определение расширений JavaScript
Каждое расширение может быть найдено
в JavaScript переменной head (по умолчанию)
в JavaScript переменной head (по умолчанию)
if( head.logged ) {
// ваши действия
}
Комментариев нет:
Отправить комментарий