reader.jQuery

Что это такое?

Плагин работает аналогично встроенной функции браузера Safari 5 - Safari Reader. Данный плагин позволяет не зависеть от конкретного браузера или плагина и установить на свой сайт или блог свой "читальщик", который к тому же можно настроить под нужды своего сайта.

Совместимость

Тестировалось на FF 3.6.6, Opera 10.60, Safari 5, IE 7,8. Не поддерживается работа с IE 6. Во всех остальных случаях возможны небольшие проблемы. О возникших ошибках можно написать мне на почту ivan@klimchuk.com - разберемся.

Как это выглядит?

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

Заголовок новости:

Статья готова к прочтению:

Посмотреть вживую на работу плагина можно в самом блоге, либо на отдельной demo-странице.

Хочу себе такой

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

Сами ссылки:
reader.jquery.js
jquery-1.4.2.js
reader.jquery.demo.zip

Как это все прикрутить?

Использовать плагин довольно просто. Для начала следует подключить файлы с jQuery и самим плагином к странице.

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

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

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

```
$("document").ready(function(){
```
```
   $("#reader").reader({
```
```
       "shadow" : {
```

           "opacity"              : ".8"

```
       },
```
```
       "window" : {
```

           "width"                : "800px",

           "color"                : "#000",

           "fontFamily"           : "Georgia",

           "fontSize"             : "16px"

```
       },
```
```
       "button" : {
```

           "background"           : "#54ACFE",

           "color"                : "#FFFFFF",

           "text"                 : "основное",

           "padding"              : "0 4px 1px 4px",

           "margin"               : "0 0 0 10px",

           "fontSize"             : "14px",

           "fontFamily"           : "sans-serif",

           "fontWeight"           : "normal"

```
       }
```
```
   });
```
```
});
```

Конфигурация настраивается довольно просто. Настройки задаются обычными css-свойствами, что упрощает работу с плагином. Пока количество настроек ограниченно и можно менять только самые необходимые свойства элементов. Это гарантирует более стабильную работу плагина.

Описание конфигурации плагина

shadow

Набор опций задает настройки для тени. Пока доступна только одна возможная настройка для тени.

opacity: Задает степень прозрачности для фона.

window

Набор опций задает настройки для окна, в котором отображается текст статьи.

width: Задает ширину окна.
color: Задает цвет текста внутри окна.
fontFamily: Указывает шрифт для отображения текста.
fontSize: Указывает размер шрифта по умолчанию для окна.

button

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

background: Задает цвет фона кнопки.
color: Задает цвет текста внутри кнопки.
text: Указывает какой текст выводить на кнопке.
padding: Указывает внутренние отступы.
margin: Указывает внешние отступы.
fontSize: Указывает размер шрифта для кнопки.
fontFamily: Указывает семейство шрифтов для кнопки.
fontWeight: Задает полужирный шрифт текста на кнопке.

Статья в блоге
Статья на хабре

Комментируем тут

Мобильная версия