-
Статьи
- Веб-программирование
jTruncate - это плагин для jQuery, который позволяет легко прятать лишний текст на вашей веб-странице.
Этот плагин будет полезен для страниц перегруженных различной информацией.
$('#example1').jTruncate();
});
ddmenu - это простой скрипт, основанный на js-framework Mootools, который позволяет создавать собственные контекстные меню.
Возможности:
- Внешний вид меню легко настраивается с помощью CSS. Можно добавлять иконки, заголовки, настраивать в соответствии с дизайном.
- Для включения контекстного меню используемого в браузере по-умолчанию, необходимо нажать Ctrl + правая клавиша мыши.
- При нажатии Shift + правая клавиша мыши открываются оба меню, используемое по-умолчанию и ddmenu.
- Скрипт протестирован в Firefox 3, Safari 3, Internet Explorer 6/7, Opera 9. В Opera 9 контекстное меню работает при нажатии Ctrl + левая клавиша мыши
- Также есть возможность активировать и дезактивировать отдельные пункты меню.
Изменение внешнего вида сайта в зависимости от времени суток это довольно интересный способ придать некоторую изюминку вашему сайту.
Реализовать это можно довольно просто с помощью javascript.
Представленный ниже код позволяет менять оформление сайта каждые 3-4 часа, основываясь на времени пользователя.
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if (thehour > 20)
display = "tree_twilight.css";
else if (thehour > 17)
display = "tree_sunset.css";
else if (thehour > 14)
display = "tree_afternoon.css";
else if (thehour > 11)
display = "tree_noon.css";
else if (thehour > 7)
display = "tree_morning.css";
else if (thehour > 4)
display = "tree_sunrise.css";
else if (thehour > 1)
display = "tree_twilight.css";
else
display = "tree_sunset.css";
var css = '<'; css+='link rel="stylesheet" href=' + display + ' \/'; css+='>';
document.write(css);
// End -->
}
</script>
<script type="text/javascript">getCSS();</script>
Все что требуется от вас, так это написать соответствующие стили.
Для людей которые отключают javascript можно добавить стили используемые по-умолчанию:
<noscript>
<link rel="stylesheet" href="/tree_sunset.css" type="text/css">
</noscript>
Источник: http://www.katgal.com/2007/03/time-sensitive-css-switcher-change.html
Хочу предложить Вашему вниманию простенький плагин, сделанный на основе Javascript-библиотеки jQuery, для создания древовидного меню.
Итак, для начала необходимо создать структуру нашего меню.
<li><span class="folder">Папка 1</span>
<ul>
<li><span class="file">Файл 1.1</span></li>
</ul>
</li>
<li><span class="folder">Папка 2</span>
<ul>
<li><span class="folder">Подпапка 2.1</span>
<ul>
<li><span class="file">Файл 2.1.1</span></li>
<li><span class="file">Файл 2.1.2</span></li>
</ul>
</li>
<li><span class="file">Файл 2.2</span></li>
</ul>
</li>
<li class="closed"><span class="folder">Папка 3 (свернутая в начале)</span>
<ul>
<li><span class="file">Файл 3.1</span></li>
</ul>
</li>
<li><span class="file">Файл 4</span></li>
</ul>
Как видим все очень просто. Это обычный маркированный список с соответствующими классами. Пункт меню с классом "Folder" будет представлен у нас с иконкой в виде папки, а с классом "File" - с иконкой в виде документа.
Иконки Вы, конечно, можете заменить на свои.
Маска задается следующим образом:
- a - буквенные символы (A-Z,a-z)
- 9 - цифровый символы (0-9)
- * - алфавитно-цифровые символы (AZ, az ,0-9)
Для того что бы это заработало, надо, во-первых, подключить библиотеку jQuery, а затем файл jquery.maskedinput.js
<script src="jquery.maskedinput.js" type="text/javascript"></script>
После этого вызываем функцию создания маски для всех полей для которых это необходимо.
$("#id_field").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
Пример
Как видите все довольно просто. Подробнее о этом скрипте (Masked Input Plugin) можете почитать на сайте разработчика.
Для тех кто не знает что такое LightBox и для чего он нужен я поясню, Lightbox – простой JS скрипт, который позволяет создавать некое подобие галереи. На страницу можно поместить уменьшенное изображение, нажав на которое открывается красивое окошко, где это изображение будет показано в оригинальном размере, самое важное, что это окошко открывается без перезагрузки страницы и работает почти во всех современных браузерах.
Теперь попробуем разобраться как добавить LightBox на страницу.
1. Установка LightBox:
Lightbox использует JavaScript-библиотеки Prototype Framework и Scriptaculous, эти скрипты необходимо подключить к Вашей странице, для этого вставьте следующий код между тэгами <head> и </head>.
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
2. Затем нужно подключить CSS файл, который будет использовать LightBox, для этого вставьте на страницу следующий код (между тэгами <head>)
3. Также не забудьте проверить в файле CSS ссылки на prev.gif next.gif. и убедитесь в правильности ссылок на loading.gif и close.gif, в файле lightbox.js.
4. Использование LightBox:
а. Вставляем ссылку ссылку в тело документа, затем ссылке добавляем атрибут rel="lightbox".
Например:
Атрибут title необходим для добавления подписи к картинки.
б. Если Вы хотите сгруппировать несколько превьюшек, например, по определенной тематике, то нужно дополнительно включить в атрибут rel имя группы в квадратных скобках.
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
Теперь картинки можно просматривать используя клавиши "Влево" и "Вправо".
Пример можно посмотреть здесь - Lightbox 2
С оригиналом статьи на английском языке можно ознакомится здесь
