08 Июл 10 JQuery: reader.jquery — читаемо з задоволенням
Як ми пам’ятаємо, зовсім недавно вийшов Safari 5. Однією з цікавих особливостей нової версії браузера виявилася так звана «читалка» – Safari Reader. Даний модуль дозволяє виділити на сторінці основний текст і відобразити його в зручному вигляді без зайвих елементів сайту і реклами. Погодьтеся, досить зручно читати, коли тобі нічого не заважає. До плюсів модуля також варто віднести і можливість мінімального, але потрібноого налаштування розміру шрифту (скролл сайту збільшить все і не завжди добре). З мінусів – працює тільки в Safari.
Багатьох людей і мене в тому чилі не влаштувало те, що всі плагіни і розширення потрібно встановлювати в браузер (крім Safari зрозуміло, ось наприклад для Googole Chome). А якщо запропонувати користувачу теж саме, але тільки засобами самого сайту?
Reader – це звичайний плагін для популярної бібліотеки jQuery. Особливістю плагіна, як і будь-яких інших, є легкість підключення до сайту і просте налаштування плагіна під свої потреби. До того ж він більш гнучкий, ніж Safari Reader або плагіни для інших браузерів, так як є можливість задавати параметри відображення. Це дозволяє оформити вікно «рідера» у стилі сайту. З опціями за замовчуванням він виглядає майже так само, як і Safari Reader.
Важливо
Для правильної роботи вміст сторінки, яку передбачається виводити за допомогою плагіна, слід помістити в блочний елемент. Важливою умовою є наявність всередині заголовка H1, саме до нього чіпляється кнопка активації режиму читання.
Для більш гнучкого налаштовування в самому плагіні у функції analysis можна вказати правила для фільтрації контента. Правила задаються у вигляді регулярних виразів.
Підтримує
Тестувалося на FF 3.6.6, Opera 10.60, Safari 5, IE 7,8. Не підтримується робота з IE 6. У всіх інших випадках можливі невеликі проблеми.
Як використовувати
Думаю, розповідати, як підключати скрипти до сторінок не має сенсу, але все-таки наведу приклад.
<script type=«text/javascript» src=«jquery-1.4.2.js»></script>
<script type=«text/javascript» src=«reader.jquery.js»></script>
Найпростіший приклад ініціалізації плагіна:
$(«#reader»).reader();
});
Ініціалізація з опціями:
$(«#post»).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» : «12px»,
«fontFamily» : «sans-serif»,
«fontWeight» : «normal»
}
});
});
Описи параметрів:
shadow
Набір опцій задає налаштування для тіні. Покищо доступна тільки одне можливе налаштування для тіні.
opacity
Визначає ступінь прозорості для фону.
window
Набір опцій, які задають параметри для вікна, в якому буде відображатися текст статті.
width
Задає ширину вікна.
color
Задає колір тексту всередині вікна.
fontFamily
Вказує шрифт для відображення тексту.
fontSize
Вказує розмір шрифта для вікна.
button
Набір опцій, який задає налаштування для кнопки, що формується поруч із заголовком статті.
background
Задає колір фону кнопки.
color
Задає колір тексту усередині кнопки.
text
Вказує який текст виводити на кнопці.
padding
Вказує внутрішні відступи.
margin
Вказує зовнішні відступи.
fontSize
Вказує розмір шрифта для кнопки.
fontFamily
Вказує сімейство шрифтів для кнопки.
fontWeight
Задає напівжирний шрифт тексту на кнопці.
Посилання:
Сторінка проекту
Демонстрація
Завантажити в zip
За бажанням автора – додаю лінка на першоджерело http://klimchuk.com/blog/reader-jquery-chitaem-s-udovolstviem, не звалаючи на лінки на проект 
Схожі пости на блозі
Теги: iReader, jQuery, jQuery plugin, Safari Reader
2 коментарі
Іван Клімчук каже:
Калі ласка, друкуйце крыніцу, адкуль быў узяты матэрыял.
Зыходны тэкс знаходіцца тут – http://habrahabr.ru/blogs/jquery/98387/ альбо тут – http://klimchuk.com/blog/reader-jquery-chitaem-s-udovolstviem
admin каже:
додав лінку на першо джерело, хоча було тяжко зрозуміти ваш пост (писали б вже російською, чи що…)