Архив ‘JavaScript, AJAX’

Загрузка CSS из JavaScript

Суббота, 14 августа, 2010

Иногда бывает необходимо загрузить стилевой файл CSS из JavaScript. (Например, если head-часть HTML уже выведена, а нарушать стандарт и подключать CSS и в body нежелательно.)

Делается это следующим образом: создается элемент link и добавляется как дочерний элемент к тегу head с помощью функций работы с DOM-моделью. Код для такого действия имеет примерно такой вид:
var tag_css = document.createElement('link');
tag_css.rel = 'stylesheet';
tag_css.href = 'http://test.ru/styles.css'; // здесь указывается URL стилевого файла
tag_css.type = 'text/css';
var tag_head = document.getElementsByTagName('head');
tag_head[0].appendChild(tag_css);

Если используется библиотека jQuery, то можно добавить тег несколько иначе:

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel:  "stylesheet",
type: "text/css",
href: "http://test.ru/styles.css" //здесь указывается URL стилевого файла
});

Рубрика: CSS, JavaScript, AJAX | Комментариев: 2 »

ExtJS — красивые и удобные интерфейсы на JavaScript

Среда, 19 ноября, 2008

ExtJS — библиотека JavaScript, позволяющая легко создавать в броузере интерфейсы, не уступающие интерфейсам обычных EXE-программ. Распространяется по двум лицензиям: коммерческой и GPL 3. 

Несколько примеров.

Тем не менее, несмотря на все достоинства, библиотека имеет существенный недостаток: полное отсутствие graceful degradation. При выключенном JavaScript работа с сайтом, сделанным на этой библиотеке, становится невозможной.

Рубрика: JavaScript, AJAX, Полезные ссылки | Комментариев: 3 »

Циклическая прокрутка картинок

Среда, 10 сентября, 2008

Если требуется организовать циклическую прокрутку множества картинок по сайту, то можно поступить следующим образом. Все картинки располагаются в одном div без разделителей. Затем с помощью JavaScript у самой левой (или верхней, если прокрутка вертикальная) картинки задаем постепенно увеличивающийся до ширины всей картинки отрицательный margin-left (т.е. он изменяется от 0 до -ширина_картинки), затем удаляем первую картинку из div, обнуляем ей margin и снова добавляем обратно в div, но уже как последний элемент.

Такая задача очень просто реализуется с помощью jQuery: Далее…

Метки: ,
Рубрика: JavaScript, AJAX | Комментариев: 7 »

Информация по jQuery

Пятница, 5 сентября, 2008

http://www.linkexchanger.su/ — отличный блог с русскоязычной информацией по использованию jQuery.

Рубрика: JavaScript, AJAX, Полезные ссылки | Нет комментариев »

Блок, видимый только при включенном JavaScript

Среда, 6 августа, 2008

Иногда бывает нужно сделать блок, который будет виден только в том случае, если у пользователя включен JavaScript. Самый простой способ сделать это выглядит так:

<noscript><div style="display:none"></noscript>
Здесь размещается часть, которая должна быть видна только при включенным JavaScript.
<noscript></div></noscript>

Рубрика: HTML, JavaScript, AJAX | Комментариев: 8 »

Подсветка синтаксиса с помощью JavaScript

Вторник, 8 июля, 2008

Иногда требуется подсвечивать синтаксис кусков программного кода на Web-страницах. Стандартными средствами это удается делать только для PHP (при условии, что страница генерируется с помощью самого PHP), а для других языков такой возможности не имеется.

Однако существует решение GoogleCode Pretify, которое позволяет избавиться от этой проблемы. Скачать его можно здесь: http://google-code-prettify.googlecode.com/files/prettify-small-5-Jul-2008.zip, использовать следующим образом: подключить файлы prettify.css и pretty.js, написать нужный код в теге code c классом class=”prettyprint” и повесить вызов функции prettyPrint() в обработчик onLoad. В итоге получается примерно такой код:

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
<body onLoad="prettyPrint()"><code clas="prettyprint">//Sample code</code>

В настоящее время поддерживаются языки C/C++, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, а также с некоторыми ограничениями Perl, PHP, Ruby.

Скрипт определяет тип синтаксиса сам, но имеется возможность помочь ему, указав класс явно (т.е. вместо class=”prettyprint” написать class=”prettyprint класс_языка”).

Метки: ,
Рубрика: JavaScript, AJAX, Полезные ссылки | Комментариев: 4 »

Объединение JavaScript и CSS-файлов для ускорения загрузки

Четверг, 28 февраля, 2008

Когда страница использует большое количество внешних JavaScript-файлов или скриптов CSS (а такое часто бывает, если используются библиотеки типа Prototype или jQuery), время ее загрузки существенно растет, так как каждый такой файл — это новое обращение к серверу, т.е. трата нескольких сотен миллисекунд. Но тем не менее, есть способ избежать эту проблему: воспользоваться серверным скриптом, который объединит несколько указанных файлов в один и отдаст его броузеру. Таким образом, выполняется всего один запрос к серверу для JavaScript и один запрос для CSS.

Существует уже готовое решение. Для того, чтобы воспользоваться им, нужно скачать и поместить в корень сайта файл combine.phps, а затем прописать в .htaccess такие правила для mod_rewrite:

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1

Далее можно подключать JavaScript-файлы, просто перечисляя их через запятую с помощью таких конструкций:

<script src="/javascript/my1.js,my2.js,jquery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css,my1.css,my2.css">

Если файлы физически расположены в каком-то другом каталоге, то достаточно изменить переменные в самом файле combine.phps:

	$cachedir = dirname(__FILE__) . '/cache';
	$cssdir   = dirname(__FILE__) . '/css';
	$jsdir    = dirname(__FILE__) . '/javascript';

на нужные пути.

К недостаткам данного способа можно отнести обязательное наличие mod_rewrite на сервере. Впрочем, в большинстве броузеров будет работать и прямой вызов скрипта (потрбуется переименовать его из combine.phps в combine.php) вида “/combine.php?type=javascript&files=my1.js,my2.js,jquery.js".

Метки:
Рубрика: CSS, JavaScript, AJAX, PHP | Комментариев: 7 »

Виртуальная клавиатура

Среда, 23 января, 2008

Неплохая реализация виртуальной клавиатуры доступна по адресу: http://www.greywyvern.com/code/js/keyboard.html.

Среди ее достоинств можно отметить поддержку множества раскладок,  простую интеграцию в Web-страницу и полностью задаваемый внешний вид через CSS.

Метки: ,
Рубрика: JavaScript, AJAX, Полезные ссылки | Нет комментариев »

jQuery — JavaScript-библиотека для работы с DOM и AJAX

Суббота, 12 января, 2008

jQuery — это мощная библиотека для программирования на JavaScript. Ее основной особенностью является возможность обращаться к элементам HTML-документа и результатам AJAX-запроса с помощью выражений XPath или шаблонов CSS, а также удобное преобразование HTML-кода в элемент. Все это делается одним вызовом “магической” функции $ (она же jQuery):

$("<div>Тест</div>").appendTo("body"); // динамическое создание элемента из HTML-кода и добавление в документ
$("ul/li:visible") // выбор всех элементов списков, для которых включена видимость

Кроме того, в библиотеке есть функции, котрые значительно упрощают работу с AJAX (фактически, все сводится к вызову функций $.post, $.get с параметрами url, params, и callback и написаню, при необходимости, обработчика, которому сразу же передается XML-результат вызова), а также предоставляют возможность получать в качестве ответа HTML-код (AHAH, функция load) или блок JavaScript-кода (AJAJ, функция getJSON). Также в библиотеке есть функция getScript, которая подгружает и выполняет JavaScript с заданным URL.

Важно отметить достаточно малый объем библиотеки: в сжатом GZIP виде она занимает всего лишь 14 Kb, в упакованном — 26 Kb.
Официальный сайт jQuery: http://jquery.com/

Статья на русском языке об основах работы с jQuery: http://rsdn.ru/article/inet/jQuery.xml

Метки: ,
Рубрика: JavaScript, AJAX, Полезные ссылки | Нет комментариев »

Предварительная загрузка изображений при наведении курсора на картинку

Воскресенье, 6 января, 2008

Очень часто при создании сайтов используется эффект наложения изображения при наведении курсора мыши на него. Хотя на первый взгляд, он реализуется предельно просто — замена this.src при наступлении событий onmouserover и onmouseout, но это создает один весьма неприятный эффект: подгрузка изображения с сервера может занять достаточно существенное время (1-2 секунды), что раздражает некоторых пользователей.

Решается эта проблема следующим образом: подгрузка изображений производится в фоновом режиме заранее (лучше всего — по событию onLoad), и изображение хранится в кеше броузера. Для универсального решения такой задачи я написал следующий код:

<script type="text/javascript">
var imgs = document.images;
function preload() {
  if (imgs) { var count = imgs.length; }
  else { var count=0; }
  var i=0;
  for (i=0; i<count; i++) {
    if (imgs[i].name!='') {
      imgs[imgs[i].name+'_over'] = new Image(imgs[i].height,imgs[i].width);
      imgs[imgs[i].name+'_over'].src=imgs[imgs[i].name].src.replace(/\.(.*?)$/,"_over.$1");
    }
  }
}

function on(pic) {
  pic.src=imgs[pic.name+'_over'].src;
}

function off(pic) {
  pic.src=pic.src.replace(/_over\.(.*?)$/i,\".$1\");
}
</script>

Код точно работает в MSIE 6, FireFox 1.5, Opera 9. Изображение должно обязательно иметь аттрибут name (это сделано для того, чтобы отделить изображния, являющиеся ссылками/кнопками, от изображений — элементов дизайна), а картинка, появляющееся при наведении — иметь то же имя, но с добавлением _over перед расширением (например, b1.gif и b1_over.gif).

Для корректной работы скрипта нужно повесить вызов функции preload на событие onLoad:
<body onLoad=”preload()”>
и задать события для самого изображения: <img src=”buttons/b1.gif” alt=”" onmouseover=”on(this)” onmouseout=”off(this)”>

Рубрика: JavaScript, AJAX | 1 комментрий »

Rambler's Top100