jTruncate - это плагин для jQuery, который позволяет легко прятать лишний текст на вашей веб-странице.
Этот плагин будет полезен для страниц перегруженных различной информацией.

jtruncate
jTruncate вызывается точно также как и большинство плагинов для jQuery.

$().ready(function() {
$('#example1').jTruncate();
});

ddmenu - контекстное меню

ddmenu - это простой скрипт, основанный на js-framework Mootools, который позволяет создавать собственные контекстные меню.

Возможности:

  • Внешний вид меню легко настраивается с помощью CSS. Можно добавлять иконки, заголовки, настраивать в соответствии с дизайном.
  • Для включения контекстного меню используемого в браузере по-умолчанию, необходимо нажать Ctrl + правая клавиша мыши.
  • При нажатии Shift + правая клавиша мыши открываются оба меню, используемое по-умолчанию и ddmenu.
  • Скрипт протестирован в Firefox 3, Safari 3, Internet Explorer 6/7, Opera 9. В Opera 9 контекстное меню работает при нажатии Ctrl + левая клавиша мыши
  • Также есть возможность активировать и дезактивировать отдельные пункты меню.

Изменение внешнего вида сайта в зависимости от времени суток это довольно интересный способ придать некоторую изюминку вашему сайту.
Реализовать это можно довольно просто с помощью javascript.

Представленный ниже код позволяет менять оформление сайта каждые 3-4 часа, основываясь на времени пользователя.

<script type="text/javascript"> 

 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, для создания древовидного меню.

Итак, для начала необходимо создать структуру нашего меню.

<ul id="example" class="filetree">
 <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" - с иконкой в виде документа.
Иконки Вы, конечно, можете заменить на свои.

Этот скрипт позволяет задать маску по которой будут вводиться данные в поля и таким образом позволит избежать ошибок и ввода некорректного типа данных. Его можно использовать там где формат данных заранее определен, например, номера телефонов, даты, почтовые индексы и т.д. Скрипт был протестирован на Internet Explorer 6 / 7, Firefox 1,5 / 2, Safari и Opera.

Маска задается следующим образом:
  • a - буквенные символы (A-Z,a-z)
  • 9 - цифровый символы (0-9)
  • * - алфавитно-цифровые символы (AZ, az ,0-9)

Для того что бы это заработало, надо, во-первых, подключить библиотеку jQuery, а затем файл jquery.maskedinput.js

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

После этого вызываем функцию создания маски для всех полей для которых это необходимо.
jQuery(function($){
   $("#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/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2. Затем нужно подключить CSS файл, который будет использовать LightBox, для этого вставьте на страницу следующий код (между тэгами <head>)
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. Также не забудьте проверить в файле CSS ссылки на prev.gif next.gif. и убедитесь в правильности ссылок на loading.gif и close.gif, в файле lightbox.js.

4. Использование LightBox:

а. Вставляем ссылку ссылку в тело документа, затем ссылке добавляем атрибут rel="lightbox".
Например:
<a href="images/image-1.jpg" rel="lightbox" title="Название"><img src=” images/image.jpg”></a>

Атрибут title необходим для добавления подписи к картинки.

б. Если Вы хотите сгруппировать несколько превьюшек, например, по определенной тематике, то нужно дополнительно включить в атрибут rel имя группы в квадратных скобках.
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<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

С оригиналом статьи на английском языке можно ознакомится здесь