AjaxBlog » jQuery

Гаджет из фотошопа

admin — Wed, 21 Oct 2009 11:28:40 +0000

Для одного рабочего проекта нужно было создать «по быстрому» прототип системы. Основная логика интерфейса была, все что видеть пользователь – это гаджет. К сожалению интерфейс не был одобрен руководством, а прототип остался, по этому, если кто-то использует его в своем проекте, я не буду против. Обращаю ваше внимания, так как это прототип делали «по быстрому» – то дизайн и логика поведения была взята с одной очень уважаемой мною программы.

И так что он умеет:

Двигаться по странице (move)
Изменять размеры (resize)
Имеет возможность настроить максимальную ширину панели (max width)
Имеет два состояния: нормальное (normal) и компактное (compact)
Имеет возможность сортировать гаджеты внутри панельки (sort)
Просмотр в компактном режиме

Нормальный режим

Компактный режим

Смотрим: рабочий пример гаджета

Технология: jQuery + UI, CSS, HTML – все просто. Если кому-то нужно будет доработать гаджет или адаптировать к своим требованием, пишите – договоримся.

Select Box Factory – очумелый плагин для jQuery.

admin — Mon, 20 Oct 2008 09:47:59 +0000

Я являюсь тайным фанатом библиотеки для javascript – jQuery. Это библиотека предоставляет для разработчика фантастические возможности для реализации задуманного им функционала.

jQuery, по своей концепции напоминает Firefox. Сама по себе, как и «голый» Firefox (без плагинов) вряд ли завоевал такую популярность и любовь. Все дело в дружественной среде заложенной в библиотеке. Которая позволяет легко писать расширения в виде плагинов. Начиная от официальных плагинов jQuery UI, и заканчивая сторонними.

Вот об одном из них я и расскажу. Select Box Factory –поистине очумелый плагин для создание списков с выбором.

Что он умеет:

строить списки на основе уже существующей DOM – структуры

var dropdown = new sFac({
	id : "fromMemory",
	container : "dropdownContainer"
});	


	 Lynx 
	Cheetah
	Bobcat

Получать самому списочный массив с сервера с помощью JSON или прописать его в коде

var dropdown = new sFac({
	id : "fromTheServerSide",
	container : "dropdownContainer",
	choices :
		[
			['leopard','leopard','Leopard',false,0,["spots"," ears"]],
			['tiger','tiger','Tiger',false,0,[" tail","nose"]],
			['serval','serval','Serval',true,0,["tail","nose"]],
		]
});

Списки поддерживают следующие свойства: dropdown, показать один только список без шапки, мультивыбор значений списка, изменений размеров списков (resize)
Плагин поддерживает фильтрование значений списка и создание списков из картинок
Создание списков с подкрашенными значениями, с последующей возможностью применить к ним фильтр
Поддержка скинов для списков

Как избавиться от висячей строки в заголовке

admin — Thu, 04 Sep 2008 07:36:55 +0000

Наверное, часто встречали, что название статьи не помещается полностью в одну строчку. В результате последнее слово заголовка переносится на новую строку. Такую строку называют «висячей строкой».

Видно что одно слово plugin одиноко занявшая целую строку «режет» глаз. Считается что такие строки ухудшают удобочитаемость текста. Было бы неплохо, что бы выглядело вот так.

Как с нею бороться? Один из вариантов вставить между последним словом и предпоследним неразрывный пробел – . Но согласитесь каждый раз руками это делать не хочется, да не всегда есть такая возможность (например, если контекст набирается через визуальные редакторы CMS). С точки зрения чистоты кода, такое решение тоже не обосновано.

Выход. Написать небольшой скрипт используя библиотеку jQuery, который возьмет на себе эту рутинную операцию.

Для начало каждый наш заголовок обернем тэгами

$(document).ready(function() {
    var h2Text = '';
    $('h2').each(function() {
        h2Text  = $(this).text().replace(/ (\w+)$/,' $1')
        $(this).html(h2Text);
    });
});

Рассмотрим алгоритм работы скрипта

строка 3 – осуществляет поиск текста заголовка в нутри тэга
строка 4 – осуществляет поиск и замену с помощью регулярного выражения
строка 5 – измененную строчку записываем на старом месте

240 удивительных плагинов для jQuery

admin — Fri, 25 Jul 2008 06:58:51 +0000

jQuery одна из моих любимых JavaScript библиотек. Одно из сильных сторон этот библиотеки – поддержка сторонних расширений (плагинов). А нашему брату только дай по расширять

В этом посту приведен список более чем 200 отобранных плагинов для jQury на каждый случай. Правда не мной, а Jürgen Koller.

File upload

Form Validation

Form – Select Box stuff

Form Basics, Input Fields, Checkboxes etc.

Time, Date and Color Picker

Rating Plugins

Search Plugins

Inline Edit & Editors

Audio, Video, Flash, SVG, etc

Photos/Images/Galleries

Google Map

Games

Tables, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text and Links

Tooltips

Menus, Navigations

Accordions, Slide and Toggle stuff

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows

CSS

DOM, Ajax and other jQuery plugins