JavaScript / Imperavi: удобный и действительно красивый JS WYSIWYG редактор
2011-07-25 23:07:19
... >
написан на jQuery
+ развернуть текст сохранённая копия
В продолжение темы о красивой и удобной JS визуализации (http://habrahabr.ru/blogs/javascript/124899/) хочу рассказать вам о WYSIWYG редакторе, на который сегодня случайно наткнулся.
Вы наверное часто используете различные WYSIWYG редакторы в ваших проектах. Я их тоже часто использую, так уж получается, что они очень нравятся
секретаршам и т.д. нашим пользователям.
Таких редакторов существуют десятки, но все они мне почему-то не нравилисись: то выглядит уж очень топорно, то работает совершенно криво. В конце концов я остановился на TinyMCE. Он хоть и ужасен на вид, но рабоет стабильно.
И вот сегодня я совершенно случано наткнулся на редактор, который мне полностью подходит:
- работает стабильно
- выглядит очень стильно
- написан на jQuery
Имя этому чуду – Imperavi.
Попробуйте сами и думаю, что вам понравится.
Скриншот:
UPD
Более новая версия редактора: http://imperavi.ru/redactor/.
Тэги:
jquery,
wysiwyg
JavaScript / Chosen: сделай выпадающие списки более дружественными
2011-07-25 19:36:06
... списков с помощью
jQuery и Prototype. Для ... > (версия для
jQuery)
По ...
+ развернуть текст сохранённая копия
Плагин Chosen создан для оформления красивых и удобных выпадающих списков с помощью jQuery и Prototype. Для установки плагина достаточно просто скачать файлы и прописать одну строчку:
$(".chzn-select").chosen()
(версия для jQuery)
По умолчанию в Chosen вместо длинного текстового списка предлагается поле, по нажатию на которое появляется список. Поддерживается автодополнение ввода, выбор нескольких пунктов меню, элемент
optgroup и др. Выглядит вполне нативно. В общем, лучше один раз увидеть.
Поскольку Chosen заменяет стандартный элемент HTML, то не нужно беспокоиться, как он работает с браузерами без поддержки JavaScript. Также не нужно ничего менять в бэкенде: формы сабмиттятся как обычно, изменения только в пользовательском интерфейсе.
Некоторые форки:
Chosen для MooTools
Модуль Chosen для Drupal 7
Тэги:
chosen,
jquery,
prototype,
выпадающий,
меню
Пятерка фото галерей и слайдеров на jQuery
2011-07-21 21:37:32
Всем снова здравствуйте. Иногда несколько изображений говорят о большем чем тысячи слов и это стало ...
+ развернуть текст сохранённая копия
Всем снова здравствуйте. Иногда несколько изображений говорят о большем чем тысячи слов и это стало реальностью в сфере сайтостроения. Зачем писать множество «букав», когда можно показать соответствующее теме изображение и посетителю станет все ясно и понятно, особенно если фотография или же просто картинка сама говорит о многом. Сейчас существует огромное количество сайтов на которых большая [...]
Тэги:
jquery,
галерея,
плагины,
сайт,
слайдеры
jQuery / [Из песочницы] Интересный прогресс-бар
2011-07-18 23:36:48
... >Progressbar плагина
jQuery UI. Для начала ...
+ развернуть текст сохранённая копия
В данном обзоре я хочу показать как можно расширить возможности компонента
Progressbar плагина jQuery UI. Для начала поставим перед собой задачи, которые мы и будем решать:
- прогресс-бар должен быть динамическим, т.е. «бежать вперед» (заполняться) с течением времени
- возможность задавать параметры «бега» бара
- удобство визуального использования. К примеру отображение текущего процента заполнения прогресс-бара
Остановимся подробнее на параметрах «бега». Бар можно параметризовать различными образами: задавая время запуска, шаг и период; время финиша, шаг и период; время старта, время финиша и шаг. Я остановился на последнем, т.е. для инициализации нашего прогресс-бара
достаточно указать время старта, время финиша и шаг.
Читать дальше →
Тэги:
jquery
Скрипт изменения вывода в таблице
2011-07-15 17:29:11
... написал небольшой скрипт
jQuery, который в зависимости ...
+ развернуть текст сохранённая копия
Уже не в первый раз меня заказчики просили увеличить вывод товаров в магазине PHPShop. В PHPShop в зависимости от версии скрипта максимальный вывод товаров в строку варьируется от 2 до 4.
Это можно сделать и в самом коде в той части где выводятся таблицы товаров. Но такой вариант не всегда хорош, к примеру в этот раз было необходимо сделать вывод разного количества товаров в строку в зависимости от разрешения экрана пользователя.
Я написал небольшой скрипт jQuery, который в зависимости от разрешения экрана пользователя заменяет старую таблицу вывода товара на новую с нужным количеством товаров в строку.
Скрипт работает в IE 6-8, Safari, Chrome, Opera, FF. Это в тез которых мы проверяли. Максимальное количество товаров при котором не лагает пока не узнавал, но будет проверено чуть позже.
И так, сам скрипт:
var k = 0;
var tds = new Array();
$(".panel_t").each(function(){ //создаем массив всех ячеек таблицы
tds[k] = $(this).html();
k++;
});
var width = screen.width; //узнаем разрешение монитора
if(width<1280) { //при разных разрешениях у нас разное количество столбцов
// по умолчанию, ничего не меняем.
} else {
if(width<1600) {
var d = 4; //Можно поменять на свое, в зависимости от ширины вывода блока каждого товара
} else {
var d = 5;
}
var leng = tds.length; //скока в массиве элементов
var strokse = leng/d; //расчитываем количество необходимых строк в зависимости от того сколько будет стобцов. округляем до большего
strokse = Math.ceil(strokse);
var all = strokse*d; //Сколько всего будет ячеек в таблице(строк*столбцов)
if(all>leng) { // Товаров меньше чем ячеек в таблице?
for(h=all;h>=leng;h--) {
tds[h]=" ";//заполняем пустые ячейки
}
}
var sumEl = leng-1; //массив считается с нуля, поэтому -1
var tableM = ""; //пустая переменная для таблицы
var l = d+(d-1); //цифра для colspan
k=0; //обнуляем к
for(i = 0; i < strokse; i++) { //первый цикл, формирует строки
tableM += "<tr><td colspan=\""+l+"\"></td></tr><tr>"; //строка для сетки, и начало второй строки с товаром
for(c=0;c<d;c++){//цикл второй формируем каждую строку
if(c!==(d-1)) {//если не последняя ячейка в таблице то
tableM += "<td>"+tds[k]+"</td><td class=\"setka\"></td>";
}else{//если ячейка последняя
tableM += "<td>"+tds[k]+"</td>";
}
k++;//прибавляем ячейку
}
tableM += "</tr>";//закрываем строку
}
$("#ThisMainTable").empty().append(tableM);
}
На идеал этот скрипт не тянет, всегда есть что и куда улучшать. Есть идеи как улучшить скрипт? Отписываемся =)
Тэги:
jquery,
phpshop