Створення віджета для читання RSS каналів

Ви будете дуже здивовані, дізнавшись скільки інформації є в Інтернеті через RSS і ATOM канали - пошук в твіттері, нагадування гугл, власні та інші блоги і багато іншого. Вам просто необхідно знайти помаранчеву іконку і Ви точно знайдете масу корисної інформації, яка так і чекає, щоб бути задіяною.

Сьогодні ми займемося створенням красивого віджета для читання подібних стрічок. Він буде отримувати будь-яку стрічку і відображати її в будь-якому місці сайту. Ви можете налаштувати його таким чином, щоб він відображав останні повідомлення з різних категорій блогу, або згадки про Вас в твіттері, або все що завгодно :).

Вирішення проблем

Перш ніж почати розробку, нам необхідно прояснити що саме ми хочемо і які проблеми реалізації у нас можуть виникнути. І знайти їх рішення, звичайно ж.

Проблема 1 - читання стрічок

Віджет не містить серверної частини, тому нам необхідно знайти спосіб зчитувати стрічки за допомогою JavaScript. Ajax чудова технологія, але вона має обмеження безпеки і дозволяє працювати тільки в межах одного домену. Це означає, що зовнішні стрічки нам будуть недоступні.

І тут нам допоможе YQL. Цей сервіс читає стрічку і робить її доступною нашому скрипту як JSON об'єкта, який ми можемо вивести на сторінці.

YQL - безкоштовний API сервіс від Yahoo, за допомогою якого Ви можете робити набагато більше, ніж просто читати стрічки. Він служить шлюзом між Вашим і будь-яким іншим АПИ і дозволяє маніпулювати ними за допомогою легкого синтаксису за типом SQL. Більше інформації можна знайти тут .

Налаштування YQL вимагає невеликих зусиль, однак (нам необхідно динамічно включити тег <script> в шапку сайту). На щастя, jQuery здатний на це - є метод під назвою getJSON.

П роблема 2 - Різні формати стрічок

Існують різні формати стрічок - RSS1, RSS2 і ATOM. Вони відрізняються один від одного. Наш код повинен вміти зчитувати результати, які видає YQL і виводити їх на сторінку.

Цю проблему ми вирішимо за допомогою окремої функції з декількома логічними або \ або (||) в нашому коді.

Проблема 3 - Недостатньо місця

Тут вже проблема розмітки, але вона не менш важлива. Оскільки бічні панелі у сайтів зазвичай маленькі нам необхідно вмістити кілька стрічок в досить маленьке місце. Виберіть тут навряд чи допоможуть, а от що випадає список буде в самий раз.

Приступимо до створення ...

Крок 1 - XHTML

Перша частина уроку містить базову розмітку.

demo.html

<Div id = "feedWidget"> <div id = "activeTab"> <! - Назва -> </ div> <div class = "line"> </ div> <div id = "tabContent"> <! - Вміст -> </ div> </ div>

Оскільки все в нашому віджеті залежить від JavaScript його немає сенсу показувати, при відключеному в браузері JS. І тому feedWidget захований за допомогою display: none в стилях. А показується він за допомогою методу jQuery show ().

Крок 2 - CSS

styles.css - частина 1

#feedWidget {background: url (img / bg.png) repeat-x # 47525c; border: 2px solid # 48535e; margin: 0 auto; width: 200px; padding: 5px; position: relative; / * При вимкненому JS нічого не відображається: * / display: none; z-index: 20; } # ActiveTab.hover, .dropDownList {background: url (img / drop_arrow.png) no-repeat 95% 50% # 47525c; border: 1px solid # 38434d; margin: -1px; cursor: pointer; / * CSS3 закруглені кути: * / -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } # ActiveTab, .dropDownList div {color: white; cursor: pointer; font-size: 20px; margin: 0 2px 0 0; padding: 5px; text-shadow: 0 1px 1px black; } .Line {height: 1px; overflow: hidden; background-color: # 2b353d; border-bottom: 1px solid # 687581; margin: 10px 0; }

Зверніть увагу на те, що ми визначаємо спеціальний клас при наведенні на шар #activeTab, замість звичайного: hover псевдокласу. Це зроблено тому, що стиль при наведенні повинен бути застосований тільки в разі наявності декількох джерел стрічок, що неможливо визначити використовуючи CSS. Це буде зроблено за допомогою JS.

styles.css - частина 2

.dropDownList {background-image: none; position: absolute; border-top: none; padding: 5px; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 0; -webkit-border-top-left-radius: 0; -webkit-border-top-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .DropDownList div: hover {background-color: # 505e6b; } #TabContent div {/ * тут будуть повідомлення зі стрічки * / background-color: #EEEEEE; color: # 555555; font-size: 10px; margin-bottom: 10px; padding: 5px; position: relative; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; / * CSS3 тінь осередки: * / -moz-box-shadow: 0 1px 1px black; -webkit-box-shadow: 0 1px 1px black; box-shadow: 0 1px 1px black; }

Тут ми оформляємо зовнішній вигляд зони, в якій будуть виводитися повідомлення.

Крок 3 jQuery

Після підключення фреймворка в шапці документа ми можемо використовувати методи для побудови складних взаємодій.

script.js - частина 1

/ * Налаштування: * / var tabs = { "@tutorialzine": { "feed": "http://twitter.com/statuses/user_timeline/67315866.rss", "function": twitter}, "Latest Tutorials": { "feed": "http://feeds.feedburner.com/Tutorialzine", "function": rss}, "Smashing Mag": { "feed": "http://rss1.smashingmagazine.com/feed/" , "function": rss}, "Script & Style": { "feed": "http://feeds2.feedburner.com/ScriptAndStyle", "function": rss}} $ (document) .ready (function () {/ * Вважаємо кількість джерел: * / var totalTabs = 0; $ .each (tabs, function () {totalTabs ++;}) $ ( '# feedWidget'). show (). mouseleave (function () {/ * Якщо курсор покинув віджет, заховати, що випадає: * / $ ( '. dropDownList'). remove (); $ ( '# activeTab'). removeClass ( 'hover');}). mouseenter (function () {if (totalTabs> 1 ) $ ( '# activeTab'). addClass ( 'hover');}); $ ( '# activeTab'). click (showDropDown); / * використовуємо метод lIVe * / $ ( '. dropDownList div'). live ( 'cl ick ', function () {/ * Calling the showDropDown function, when the drop down is already shown, will hide it: * / showDropDown (); showTab ($ (this) .text ()); }); / * Показуємо один з джерел після завантаження сторінки: * / showTab ( '@ tutorialzine'); });

Об'єкт tabs містить записи про різні джерела, які ми будемо використовувати разом з функцією, яка буде виводити стрічки на сторінку. В кінці ми виводимо одне джерело (в дужках функції showTab) для відображення відразу після завантаження сторінки.

script.js - частина 2

function showTab (key) {var obj = tabs [key]; if (! obj) return false; var stage = $ ( '# tabContent'); / * Формуємо query: * / var query = "select * from feed where url = '" + obj.feed + "' LIMIT 5"; / * Формуємо URL lkz YQL: * / var url = "http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?"; $ .GetJSON (url, function (data) {stage.empty (); / * елемент існує в RSS і ATOM стрічках: * / $ .each (data.query.results.item || data.query.results.entry, function () {try {/ * Пробуємо викликати функцію користувача, "this" залишок інформації стрічки: * / stage.append (obj [ 'function'] (this));} catch (e) {/ * Інформуємо про можливі помилки: * / var f_name = obj [ 'function']. toString (). match (/ function \ s + (\ w +) \ (/ i); if (f_name) f_name = f_name [1]; stage.append ( '<div > There is a problem with your '+ f_name +' function </ div> '); return false;}})}); $ (' # activeTab '). text (key);} function showDropDown () {if (totalTabs <2) return false; if ($ ( '# feedWidget .dropDownList'). length) {/ * Якщо випадає вже показаний, заховати його: * / $ ( '. dropDownList'). slideUp ( 'fast', function ( ) {$ (this) .remove ();}) return false;} var activeTab = $ ( '# activeTab'); var offsetTop = (activeTa b.offset (). top - $ ( '# feedWidget'). offset (). top) + activeTab.outerHeight () - 5; / * Створення випадає шару на льоту: * / var dropDown = $ ( '<div> ') .addClass (' dropDownList '). css ({' top ': offsetTop,' width ': activeTab.width ()}). hide (). appendTo (' # feedWidget ') $ .each (tabs, function ( j) {if (j == activeTab.text ()) return true; $ ( '<Div>'). Text (j) .appendTo (dropDown); }) DropDown.slideDown ( 'fast'); }

Функція showTab бере назву вкладки в якості параметра і показує її в віджеті, після формування YQL URL, і читання його за допомогою методу getJSON. Після цього, відповідь проходить цикл за допомогою $ .each і викликається функція.

script.js - частина 3

function twitter (item) {/ * Форматуємо твіти, перетворюючи хештеги, згадки в посиланнях URLS в правильні гіперлінкі: * / return $ ( '<div>'). html (formatString (item.description || item.title) + '< a href = " '+ (item.link || item.origLink) +'" target = "_ blank"> [tweet] </a> '); } Function rss (item) {return $ ( '<div>'). Html (formatString (item.title.content || item.title) + '<a href = "' + (item.origLink || item.link [0] .href || item.link) + ' "target =" _ blank "> [read] </a>'); } Function formatString (str) {str = str.replace (/ <[^>] +> / ig, ''); str = '' + str; str = str.replace (/ ((ftp | https?): \ / \ / ([- \ w \.] +) + (: \ d +)? (\ / ([\ w / _ \.] * ( \? \ S +)?)?)?) / gm, '<a href="$1" target="_blank"> $ 1 </a>'); str = str.replace (/ ([^ \ w]) \ @ ([\ w \ -] +) / gm, '$ 1 @ <a href = "http://twitter.com/$2" target = "_ blank "> $ 2 </a> '); str = str.replace (/ ([^ \ w]) \ # ([\ w \ -] +) / gm, '$ 1 <a href = "http://twitter.com/search?q=%23$2 "target =" _ blank "> # $ 2 </a> '); return str; }

В останній частині у нас 2 функції - twitter і rss. Вони беруть об'єкт (переданий з $ .each d showTab ()) і знаходять шлях до заслання і назвою елемента стрічки.

Ось і все готово! Користуйтеся! :)