Архив рубрики "jQuery"

Июл 8

Об использовании tinymce

Рубрики: jQuery

В свое время я думал какой визуальный редактор выбрать для блогов пользователей на rybalka.tv

Остановился тогда на jWysiwyg. Меня тогда он купил быстротой загрузки и малым размером. Но прошло время, и я понял что jWysiwyg лучше не использовать, потому что он представляет собой кусок говна, к тому же глючного и медленно развивающегося.

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

Что мне в нем нравится:

  1. Есть плагин под jQuery
  2. Простая настройка
  3. Много настроек
  4. Работает во всех браузерах (проверял IE, FF, Opera, Safari, Chrome)
  5. Код генерирует в виде html тегов а не стилей CSS, типа <span style=»font-weight: bold;»>жирный</span>
  6. Удобно создавать пользовательские кнопки
  7. Можно русифицировать

Читать далее »

Комментариев (16)
Июн 26

JQuery Tools: еще один способ делать табы

Рубрики: jQuery Метки: , ,

Недавно узнал об jQuery библиотеке, которая является очень простым и легковесным аналагом jQuery UI (функционал правда слабее). Библиотека называется JQuery Tools, а подробно я хотел бы остановиться на создании с помощью нее табов. JS-движок табов занимает всего 3.3 Kb.

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

  1. Активный таб
  2. При наведении
  3. Таб в пассивном состоянии

Процесс создания табов

1. Создание спрайта. Спрайт создал в фотошопе. GIMP что-то для меня остается пока загадкой (Да и разбираться нет желания).

tabs

2. Создается CSS файл. Здесь тоже сложного ничего нет, единственные хлопоты – вычислить координаты каждого шаблона. Пример CSS файла возьмите в тестовых примерах – http://flowplayer.org/css/tabs.css

3. html код. Выглядит он так:

<!-- the tabs -->
<ul class="tabs" id="my_tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a class="w4" href="#">Длинный заголовок в табе</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes" id="my_panes">
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>

Обратите внимание. Если текст в заголовке большой, то применяйте соответствующий класс (w1,w2,w3,w4 и т.д.) Читать далее »

Комментариев (11)
Фев 25

jQuery ColorPicker: Диалог выбора цвета

Рубрики: jQuery Метки: , ,

Рано или поздно в веб-программировании сталкиваешься с необходимостью вывести диалог выбора цвета (по забугорному colorpicker). Вещь в принципе распространенная, потому не удивительно что под наш любимый jQuery уже созданы готовые плагины. В этой статье я сделаю небольшой обзор существующих jquery-плагинов для выбора цвета и остановлюсь на некоторых из них.

Колорпикеры я бы разделил на два типа

  1. Палитра
  2. Каталог цветов

Читать далее »

Комментариев (11)
Янв 18

Решение проблемы больших шапок

Рубрики: Javascript, jQuery, Новости Метки: ,

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

Но насколько удобны сайты с большими шапками? Мне кажется что не очень удобно листать их страницы , потому что постоянно нужно крутить колесо мыши вниз, чтобы добраться до контентной части сайта.

Предлагаю свое решение данной проблемы

Автоскроллинг на JavaScript. Суть моего решения такова, что я просто прокручиваю шапку. Но только для внутренних страниц. Учитывая, что большинство новых посетителей приходят на сайт ч-з главную, то шапка на ней должна быть видна, дадим пользователю насладится ею.

Делается автоскроллинг с помощью очень простого jQuery скрипта. Просто вставьте его в любое место html кода (желательно в <head> или сразу после <body>), и задайте насколько пикселов прокрутить вниз. Читать далее »

Комментариев (18)
Дек 17

Анимированные gif`ы для ajax

Рубрики: jQuery Метки:

Открыл для себя сервис, генерирующий гифчики, имитирующие индикаторы загрузки в стиле ajax.

Рецепт приготовления очень простой:

  1. В поле Indicator type выбираем внешний вид индикатора. Довольно большой выбор. Я бы даже сказал на любой вкус.
  2. Либо ставим фоновый цвет (Background color), либо выбираем прозрачность (Transparent background).
  3. Устанавливаем цвет (Foreground color).

Все, сервис генерирует анимированный gif файл для вашего ajax приложения. Читать далее »

Комментариев (18)
Дек 16

Немного о диалоговых окнах, WYSIWYG и других плагинах

Рубрики: jQuery Метки:

WYSIWYG

Работаю сейчас над личными блогами пользователей rybalka.tv. Встроил визуальный редактор (другими словами WYSIWYG). До этого никогда не работал с WYSIWYG, и попросил помощи на форуме MaxSite CMS, там мне Юрий Белотицкий посоветовал использовать встроенный в админку MaxSite CMS jWYSIWYG который является плагином для jQuery.

Посмотрел так же что из себя представляют конкуренты jWYSIWYG (блин ну и название). Флагманы в этой нише TinyMCE и FCKeditor. Если первый просто громоздкий и долго грузится, то второй просто монстр, по функционалу напоминающий Microsoft Word.

Я думаю пользователям моей соц. сети не нужны какие-то излишества в виде вставки таблицы или печать напрямую из редактора, и они вполне обойдутся минимальным набором функций форматирования (жирный, курсив, подчеркивание, лево, право, центр, сцыль и вставить картинку). К тому же размер плагина jquery.wysiwyg.js всего 21 КБ (и это не запакованная версия). Выбор был очевиден. Сам редактор поставился и настроился очень легко.

Дальше необходимо было создать свою кнопку загрузки картинки и прикрутить обработчик события к ней. Я решил расширить функционал редактора, чтобы из него можно было загрузить фото с компа, подогнать его размеры под контентную часть  поставить копирайты и вставить картинку в редактор (в общем как в вордпрессе). Читать далее »

Комментариев (14)
Дек 10

Качественный datepicker это jQuery UI Datepicker

Рубрики: jQuery Метки: , ,

Чем глубже изучаю фреймворк jQuery, тем больше возможностей он мне открывает. Если раньше чтобы реализовать работоспособный диалог выбора даты на javascript, я искал среди доисторических громоздких монстров, сам русифицировал, сам дописывал нужный мне функционал, сам обеспечивал кроссбраузерность.

Но все это в прошлом. Оказывается jQuery UI (дополнительные библиотеки пользовательского интерфеса) содержат в себе виджет Datepicker, а jQuery UI это кроссбраузерность, локализация, надежность jQuery и возможность темизации (пользовательской стилизации) виджетов. Читать далее »

Комментариев (48)
Ноя 17

Скрипт «Определение Яндекс.тематики сайта»

Рубрики: jQuery, Php Метки: , , ,

Написал очередной свой скрипт на сео-тему.

В этот раз определяется тулбарная тематика для списка сайтов в ПС Яндекс. Как бонус определяется ТИЦ домена. Напоминаю что скрипт бесплатный, и для его корректной работы у вас должен быть установлен PHP5.

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

Где можно применить?

  1. Часто всплывают на форумах топики типа «Домены с ТИЦ бесплатно». Проверяете список, во первых узнаете реальный ТИЦ, во вторых узнаете тематику, и если она определена, такой сайт легче в дальнейшем прокачать.
  2. Анализ списка своих сайтов.
  3. Анализ конкурентов.

Замечание

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

Комментариев (19)
Ноя 10

Скрипт определения PR и ТИЦ сайтов

Рубрики: jQuery, Php, Новости Метки: , , ,
Системные требования

  1. PHP версии 5 и выше
  2. Включенный Javascript в браузере

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

В этот раз я научился работать с функцией загрузки страницы $.ajax и плавно разворачивать блоки.

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

  • Для Яндекса из тулбара, реализация полностью моя.
  • Для Google тоже из тулбара, но реализацию на php взял из паблика.

PR и ТИЦ в одном флаконе

Посмотреть как скрипт выглядит и работает вживую можно тут – http://www.samborsky.com/sources/prcy/

Но я поставил у себя лимит на проверку в 10 урл за раз. В исходниках лимитов нет. Качайте и пользуйтесь. Читать далее »

Комментариев (57)
Ноя 9

«Позиции в Яндеске» теперь многопоточны

Рубрики: jQuery, Php, Новости Метки: , , ,

Под впечатлением от статьи Алексея Качаева «jQuery + Ajax – парсим PR в несколько потоков«, я решил доработать свой скриптик до многопоточности.

Многопоточность реализована на основе связки фреймворка jQuery и PHP. В цикле, функция $.post, работает асинхронно, тоесть возвращает управление основному потоку сразу, но выполнение продолжается. Читать далее »

Комментариев (4)
« Раньше