markup-javascript.com » JS Plugins

Запрет выделения текста с помощью jQuery

Алексей — Fri, 14 May 2010 14:59:47 +0000

На практике мне часто приходится применять данный функционал. Но чаще не из-за того что бы запретить выделение для копипастеров, тем более что данная фича легко обходится просто выключив на время javascript. А чаще в проектах где приходится крутить слайдеры, кастомные скролы, drag&drop. Т.к. здесь активно участвуют события нажатия и перетаскивание которые также выделяют текст на сайте… хотя это не требовалось. Поэтому я часто пользуюсь данными функциями…

jQuery.fn.extend({
disableSelection : function() {
this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
jQuery(this).css('-moz-user-select', 'none');
});
},
enableSelection : function() {
this.each(function() {
this.onselectstart = function() {};
this.unselectable = "off";
jQuery(this).css('-moz-user-select', 'auto');
});
}
});

// кроссбраузерный вызов
$(document).ready(function(){
$('body *').disableSelection();
});

$(‘body *’) – именно такой селектор будет для этих метов кроссбраузерным, просто $(‘body’) или $(document) – не работает в Opera.

disableSelection – запрет выделения
enableSelection – возврат выделения

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

Masonry – динамический layout

Алексей — Sun, 21 Mar 2010 13:10:51 +0000

В нескольких последних проектах столкнулся с плагином под названием masonry, который замечательно помогает экономить место на сайте в котором блоки с контентом идут по порядку, а с моими правками вообще превращается в клевый эффект, который произведет впечатление на любого пользователя.

На скрине наглядно видно эффект плагина. До применения все блоки обтекают друг друга из-за чего получается некрасивые строки и много свободного места, а после блоки расставлены наиболее оптимальным образом.

Я упоминал выше о моей модификации, теперь подробнее :), я изменил всего-лишь одну строчку, и на мой взгляд плагин от этого только выиграл. Для наглядности эффекта поресайзете окно браузера.

Моя модификация, а вот еще страничка с живым примером.

Параметры плагина для инициализации:

$('#wrapper').masonry({
singleMode: false,
// Этот параметр ставится в true, если все ваши блоки имеют одинаковую ширину
columnWidth: 240,
// Ширина колонки в вашей сетке, параметр по умолчанию - ширина первого блока
itemSelector: '.box:visible',
// Селектор блоков
resizeable: true,
// Перестройка сетки блоков при ресайзе окна
appendedContent: $('.new_content'),
// Объект элемента который вставляется в сетку динамически
saveOptions: true,
// Этот параметр сохраняет параметры инициализации первого вызова
}, function() {}
// callback.
);

Моя версия скрипта

Текстовые редакторы на javaScript

Алексей — Mon, 01 Mar 2010 13:30:20 +0000

Если вы хотите повысить функциональность Вашего сайта – этот материал для вас. Одна фича которая есть практически в каждой CMS – текстовый редактор, поэтому хочу вас познакомить с 5 лучшими, на мой взгляд, скриптами.

1) TinyMCE

Пожалуй самый мощный плагин для этих целей, это можно сказать уже только потому, что его используют в своих проектах такие известные бренды как WordPress, Microsoft, Oracle, Apple и Joomla. Также можно отметить:

Подключение в несколько строк кода
Возможность кастомить под различные темы
Кроссбраузерный – Mozilla, MSIE, FireFox, Opera, Safari и Chrome
AJAX совместимый – сохранение и загрузка результатов
Поддержка различных языковых пакетов
Открытый код – LGPL лицензия

2) HTMLBox

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

Простое подключение
Кроссбраузерный – FF, MSIE, Opera, Safari и Chrome
Маленький размер
AJAX поддержка
Удобное руководство пользователя
Кастомизация тем

3) markitup

Очень дружелюбный плагин. Очень понравилось оформление сайта плагина и примеры. Это конечно
не полноценный текстовый редактор, но если таков и не нужен, это лучший выбор.

Простое подключение
Поддержка keyboard shortcuts
Кастомизация тем
AJAX превью

4) CKeditor

Еще один очень мощный плагин, который подтверждает свои достоинства тем, что его используют множество авторитетных сайтов. В плагине очень много плюсов, поэтому перечислять все не буду, выберу лишь самые весомые.

Хорошая документаци
Кроссбраузерность
Поддержка keyboard shortcuts
AJAX
Кастомизация
Техническая поддержка, комьюнити

5) jWYSIWYG

на последок – плагин попроще.

AJAX превью
Кроссбраузерность

Скролящийся блок

Алексей — Sun, 10 Jan 2010 10:03:51 +0000

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

Данный эффект стал встречаться в моих проектах довольно часто, поэтому я решил написать небольшой плагин – jquery.movingBlock.js.

Требования для работы плагина:

HTML/CSS

Как всегда свои плагины я стараюсь сделать наиболее универсальными, чем меньше они зависят от HTML/CSS кода – тем лучше, поэтому для данного плагина определенных требований при верстке нет!

javaScript:

В роли главного объекта $(‘#sidebar’) выступает непосредственно скролящийся элемент, а теперь детальнее о параметрах:

holder – селектор обертки (родителя) скроляшегося элемента, главный параметр, т.к. указывает в каком элементе будет скролиться блок;
topDif – отступ элемента от верхней части экрана;
bottomDif – отступ элемента от нижней части экрана;
toEl – если вы хотите что бы блок скролился в обертке до определенного элемента, то в данном праметре вам нужно указать селектор этого элемента;
cssTop – изменяющееся свойство при скроле (marginTop или top);
duration – время анимации.

Для наглядности хочу продемонстрировать еще пару примеров: пример 2, пример 3.

Скачать плагин

@font-face вместо Cufon

Алексей — Fri, 27 Nov 2009 13:39:46 +0000

спользование красивых шрифтов на сайте перестало быть редкостью, на помощь верстальщикам пришли такие JS библиотеки как sIFR , typeface и Cufon. В них есть как множество плюсов так и минусов… также можно задаться вопросом, что из этого списка лучше использовать для своего проекта, и я вам скажу, что лучше использовать @font-face и отображать шрифт как обычный текст.

Но как всегда есть браузеры ;) которые это свойство не поддерживают и нечего не остаётся как использовать вышеперечисленные библиотеки. Сегодня я хочу познакомить вас с методикой как, используя нестандартный шрифт, разграничить методы отображения шрифтов между этими браузерами.

Для этой цели я воспользуюсь jquery-fontavailable. Данный плагин позволяет определить поддержку нестандартного фонта браузером, даже если он подключен с помощью @font-face. так сразу покажу пример, в старых браузерах у вас отобразится шрифт сгенерированный cufon_ом, а в тех где поддерживается @font-face – будет текст.

Пример работы скрипта:

Стандартный плагин jquery-fontavailable работает иногда не корректно, поэтому я его немного усовершенствовал. Моя версия этого плагина выглядит так (копирайты я оставил, т.к. изменил всего две строчки):

/* fontAvailable jQuery Plugin, v1.1
*
* Copyright (c) 2009, Howard Rauscher
* Licensed under the MIT License
*/

(function($) {
var element;

$.fontAvailable = function(fontName) {
var width, height;

// prepare element, and append to DOM
if(!element) {
element = $( document.createElement( 'span' ))
.css( 'visibility', 'hidden' )
.css( 'position', 'absolute' )
.css( 'top', '-10000px' )
.css( 'left', '-10000px' )
.html( 'abcdefghijklmnopqrstuvwxyz' )
.appendTo( document.body );
}

// get the width/height of element after applying a fake font
var __FAKEFONT__ = element.parent().css('font-family');
width = element
.css('font-family', __FAKEFONT__)
.width();
height = element.height();
// set test font
element.css('font-family', fontName);
return (width !== element.width() || height !== element.height()) && navigator.appVersion.indexOf('Chrome') == -1;
}
})(jQuery);

Удивительно, но Google Chrome не поддерживает свойство @font-face из-за соображений безопасности. Но это можно обойти выключив в командной строке –enable-remote-fonts. Но все же, я сделал что бы в модифицированной версии шрифт в Chrome куфонился.

Что нужно для работы данного метода.

CSS код:

@font-face {
font-family: "KB Zero";
src:url("../fonts/zero.ttf");
}
html, body{
font-family:Arial, Helvetica, sans-serif;
}
p {
font:bold 16px "KB Zero";
}

В css коде мы с помощью @font-face объявляем font-family и указываем путь к файлу шрифта. Для body указывается стандарный web шрифт, это нужно для работы скрипта. Ну и применяем шрифт к тегу P. HTML код я показывать не буду т.к. там у меня находится только одно предложение завернутое в тег P.

JavaScript код:

$(document).ready(function(){
if(!$.fontAvailable('KB Zero')) {
Cufon.replace('p', {fontFamily: 'KB Zero'});
}
});

сходя из того, что пример был построен на базе Cufon, я не буду рассказывать как его подключить, это можно посмотреть сдесь.

Логика подключения fontAvailable выглядит элементарно…
$.fontAvailable(‘KB Zero’)- возвращает булеву переменную после проверки на поддержку браузером данного шрифта, а значит нам нужно инициализировать плагин в условии, и если шрифт не поддерживается – будет отрабатывать Cufon

Вместе с этим плагином можно использовать и sIFR с typeface, достаточно лишь инициализировать их в данном условии.

Скачать пример

Обновился плагин для слайдшоу

Алексей — Fri, 30 Oct 2009 13:32:28 +0000

Одним из наиболее популярных скриптов в моем блоге является плагин для галерей и слайдшоу. Поэтому я постарался как можно быстрее сделать апдейты и фиксы для этого скрипта.

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

Обновления в плагине:

Самый главный апдейт в коде – это оптимизация, 70% кода было переписано заново. Сказывается опыт работы в этой отрасли… смотря на многие свои старые плагины – хочется большинство переделать.
Новый код уменшился в размере с 5.5 КБ до 3.5 КБ, и за счет новых параметров увеличился до 5 КБ, за счет нового алгоритма – уменьшена нагрузка на браузер.

Еще несколько мелких апдейтов и фиксов:

Пофикшен баг связанный с паузой и переключением на следующий/предыдущий слайд
Пофикшены баги связанные с несуществующими ссылками
зменено название параметра с numElementLink на numElement
Добавлен параметр noCicle – для не циклического переключения
Добавлен параметр disableClass – клас на prev/next, работает в связке с noCicle

Детальнее по плагину вы можете почитать в обновленном посте

Аккордеон на prototype

Алексей — Sat, 01 Aug 2009 18:15:57 +0000

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

Что я заметил из своего опыта – в prototype хорошо реализованы функции анимации, всегда эффекты в этом фреймверке выглядят более плавно чем в том же jQuery. prototype не самый легкий для изучения, МХО много чего в нем и не хватает… но темнемение он используется в некоторых популярных CMS и поэтому часто востребован клиентами!

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

Я всегда в своих проектах на prototype использую популярный плагин Accordion v2.0 разработанный командой stickmanlabs (а плагин LightWindow v2.0 вообще шедевр). Скрипт позволяет делать мультивложенные аккордеоны, поддерживает два вида “горизонтальный” и “вертикальный”, хороший плагин… поэтому не буду вам показывать свои версии аккордеона на prototype :P

Но для чего же тогда я все это затеил спросите вы… не для рекламы конечно, просто есть в данном плагине три ^{маленьких} неудобства, которые мне приходилось исправлять в некоторых моих проектах.
Неудобства:

плагину необходимо свойство overflow для слайд-элемента, что не позволит вам сделать всякие выпадающее из аккордеона штучки, типа попапов и т.п.
неудобная активация открытого элемента аккордеона
активация плагина только для элементов с ID

Поэтому мне пришлось слегка модифицировать этот плагин. Теперь свойство overflow ставить необязательно, оно ставится само при анимации а в открытом состоянии убирается, что вам может пригодится. Для активации нужного элемента – достаточно поставить класс. самое удобное – теперь не нужно создавать кучу ID и применять скрипт для каждого если на странице нужно сделать несколько аккордеонов, теперь можно вставлять нужный вам объект выбранный селектором.

Пример модифицированного скрипта:

Вы можете открыть пример в новом окне.

JavaScript код примера:

Если вы сравните код примера с кодом оригинала на официальном сайте – вы заметите, добавился параметр selectToggle в котором указывается название класса для активации нужного пункта в аккордеоне. Также отличается строчка var _accordion = new accordion($$(‘.accordion’)[0], {… в ней указан объект через селектор $$(‘.accordion’)[0]. Если у вас на сайте есть несколько аккордеонов с одним классом можно воспользоваться таким кодом:

Надеюсь мои исправление кому-то пригодятся !!! Удачи.