Продовжуємо вивчати CMS Joomla разом зі мною, в цій статті ми зробимо перший плагін для Joomla, інтегрувавши в Joomla 1.5.22 (23) слайдер jQuery в текст статей. Слайдер jQuery можна буде використовувати в будь-якому місці вмісту статті, завдяки використанню тега {jqueryslider}.
Завантажити Joomla плагін "Мій перший палгін для Joomla!" архівом.
Палгіни - це розширення для Joomla, мають можливість інтегрування в окремі компоненти CMS Joomla. Модулі в цілому можна віднести до групи розширень Joomla, поряд з модулями і компонентами.
Однак, плагіни мають власні відмінні риси, перш за все, - це запуск по певної події, наприклад в нашому випадку плагін буде запускатися по події «onAfterDisplayContent».
Для того щоб встановити плагін, у відповідність з вимогами що висуваються спільнотою Joomla, необхідно використовувати наступну структуру папок, кото одночасно буде структурою архіву установки завантажується через «Менеджер установки Joomla».
./ jqueryslider.php jqueryslider.xml jquery-slider-img / bg.png tempphoto-5.jpg tempphoto-5thumb.jpg tempphoto-6thumb.jpg tempphoto-4thumb.jpg tempphoto-4.jpg tempphoto-3thumb.jpg scotch-egg .jpg tempphoto-1thumb.jpg tempphoto-1.jpg icon-uparrowsmallwhite.png tempphoto-2.jpg tempphoto-2thumb.jpg tempphoto-3.jpg tempphoto-6.jpg thumb-author.jpg thumb-video-1.jpg thumb -video-2.jpg thumb-video-3.jpg transpBlack.png .DS_Store jqueryslider / ycodaslider-2.0.pack.js jquery-easing-compatibility.1.2.pack.js jquery-easing-1.3.pack.js jquery-1.5 .min.js coda-slider.1.1.1.pack.js .DS_Store Основними файлами в цій структурі є:
jqueryslider.php (плагін) jqueryslider.xml (інсталяційний файл) Додатковими файли і папки необхідні для належного функціонування самого jQuery плагіна, який ми назвемо «jQuery Slider», тому навіть, якщо Ви їх видаліть, то плагін все одно встановиться, хоча і з помилками, що вказують на відсутність файлів і Ви зможете його налаштовувати і відключати в адмін. панелі.
Давайте розберемося з інсталяційний файл jqueryslider.xml.
Перш за все, при створенні інсталяційний файл (в зарубіжній літературі даний фал називається «manifest file with xml extension») необхідно дотримуватися певні вимоги:
- файл повинен мати кодування UTF-8;
- структура файлу повинні відповідати стандартам XML;
- необхідно вказати DOCTYPE;
Сутність інсталяційний файл полягає в його вмісті, укладеними в тег install. Даний тег так само зустрічається в модулях і компонентах, але для плагіна необхідно вказувати атрибут type = "plugin", тобто явно вказати на приналежність розширення до плагіну Joomla, це дуже важливо, тому що на підставі цього тега ваші файли уёдут в директорію з плагінами , якщо вкажіть модуль (module) то «підуть» в директорію з модулями (папка modules).
Атрибут group = "content". Так само важливий, оскільки ми, таким чином, диференціюючи плагіни. Наш плагін відноситься до групи плагінів для роботи з контентом, - де ж, як не в статтях виводити слайдер?
Подивимося весь код інсталяційний файл:
1. <? Xml version = "1.0" encoding = "utf-8"?> 2. <! DOCTYPE install PUBLIC "- // Joomla! 1.5 // DTD plugin 1.0 // EN" "http: //dev.joomla .org / xml / 1.5 / plugin-install.dtd "> 3. <install version =" 1.5 "type =" plugin "group =" content "> 4. <name> jQuery Слайдер </ name> 5. <creationDate> 07 червня 2011 р </ creationDate> 6. <author> Олександр Єрмаков </ author> 7. <authorEmail> [email protected] </ authorEmail> 8. <authorUrl> http: //slyweb.ru/ </ authorUrl > 9. <copyright> (c) Олександр Єрмаков http: //slyweb.ru/ </ copyright> 10. <license> GNU / GPL 2.0 </ license> 11. <description> Слайдер на jQuery. Для вставки в будь-якому місці тексту статті можна використовувати тег {jqueryslider} </ description> 12. <version> 1.0 </ version> 13. <files> 14. <filename plugin = "jqueryslider"> jqueryslider.php </ filename> 15 . <filename plugin = "jqueryslider"> jqueryslider / ycodaslider-2.0.pack.js </ filename> 16. <filename plugin = "jqueryslider"> jqueryslider / jquery-easing-compatibility.1.2.pack.js </ filename> 17 . <filename plugin = "jqueryslider"> jqueryslider / jquery-easing-1.3.pack.js </ filename> 18. <filename plugin = "jqueryslider"> jqueryslider / jquery-1.5.min.js </ filename> 19. < filename plugin = "jqueryslider"> jqueryslider / coda-slider.1.1.1.pack.js </ filename> 20. <filename plugin = "jqueryslider"> jqueryslider / jslider.js </ filename> 21. <filename plugin = " jqueryslider "> jqueryslider / jslider.css </ filename> 22. <filename plugin =" jqueryslider "> jqueryslider / .DS_Store </ filename> 23. 24. </ files> 25. <params> 26. <param name =" sef " type = "radio" default = "1" label = "Чи використовується SEF" description = "Вимкніть, якщо SEF на сайті відключений"> 27. <option value = "0"> Ні </ option> 28. <option value = "1"> Так </ option> 29. </ param> 30. 31. 32. <param name = "pretext" type = "text" size = "40" default = "jQuery плагін:" label = "Вступний текст "description =" Напишіть текст, який додасться перш ніж можна буде плагіна "/> 33. 34. <param name =" size "type =" radio "default =" 48 "label =" Розмір іконок "description =" Розмір іконок соціальних закладок "> 35. <option value = "24"> 24 </ option> 36. <option value = "32"> 32 </ option> 37. <option value = "48"> 48 </ option> 38. </ param > 39. 40. <param name = "background" type = "text" default = "#FDFFBC" label = "Колір бекграунду" description = "Колір бекграунду - використовується css-варіанти (http: //www.joomla15.ru/вертска/копіпасти/56-спісок_цветов_CSS.html) "/> 41. 42. <param name =" padd "type =" text "default =" 10 "label = "Відступ між кнопками в пікселях" description = "значення відступу між кнопками в пікселях" /> 43. 44. <param name = "border" type = "radio" default = "1" label = "чи потрібен бордер навколо"> 45. <option value = "0"> Приховати </ option> 46. <option value = "1"> Показувати </ option> 47. </ param> 48. 49. <param name = "showon" type = " radio "default =" 1 "label =" Показувати кнопки в кінці статті "> 50. <option value =" 0 "> Ні (тільки за тегом {jqueryslider}) </ option> 51. <option value =" 1 "> показувати </ option> 52. </ param> 53. 54. <param name = "copy" type = "radio" default = "1" label = "Показати з Силка на плагін "description =" Показувати посилання на скачування плагіна "> 55. <option value =" 0 "> Приховати </ option> 56. <option value =" 1 "> Показувати </ option> 57. </ param> 58. 59. 60. </ params> 61. 62. <params group = "advanced"> 63. </ params> 64. 65. 66. <media destination = "stories / jquery-slider-img /" folder = "jquery-slider-img"> 67. <filename> bg.png </ filename> 68. <filename> tempphoto-5.jpg </ filename> 69. <filename> tempphoto-5thumb.jpg </ filename> 70. <filename> tempphoto-6thumb.jpg </ filename> 71. <filename> tempphoto-4thumb.jpg </ filename> 72. <filename> tempphoto-4.jpg </ filename> 73. <filename> tempphoto-3thumb.jpg </ filename> 74. <filename> scotch-egg.jpg </ filename> 75. <filename> tempphoto-1thumb.jpg </ filename> 76. <filename> tempphoto-1.jpg </ filename> 77. <filename > icon-uparrowsmallwhite.png </ filename> 78. <filename> tempphoto-2.jpg </ filename> 79. <filename> tempphoto-2thumb.jpg </ filename> 80. <filename> tempphoto-3.jpg </ filename> 81. <filename> tempphoto-6.jpg </ filename> 82. <filename> thumb-author.jpg </ filename> 83. <filename> thumb-video -1.jpg </ filename> 84. <filename> thumb-video-2.jpg </ filename> 85. <filename> thumb-video-3.jpg </ filename> 86. <filename> transpBlack.png </ filename> 87. <filename> .DS_Store </ filename> 88. 89. </ media> 90. 91. 92. 93. </ install> 94. Лістинг 1.
Думаю, особливої складності не представляє, можливо Вам не знайомий тег media, даний тег дозволяє завантажувати файли в директорію media, в якій, як передбачається, дані файли будуть доступні для модифікації користувачеві через «Медіа менеджер».
Заугрузка, указаннихфалов нам необхідна для того, щоб при слайдеру було що виводити, а так само для відображення елементів слайдера.
Файл плагіна jqueryslider.php
Для початку, в наш плагін необхідно підключити дві бібліотеки Joomla:
1. <? Php 2. 3. defined ( '_JEXEC') or die ( 'Restricted access'); 4. 5. jimport ( 'joomla.event.plugin'); 6. jimport ( 'joomla.plugin.plugin'); 7. 8. .......... 9. Лістинг 2.
Далі слід обробник події до відображення вмісту статті:
1. ....... 2. 3. $ mainframe-> registerEvent ( 'onPrepareContent', 'plgJSMarks'); 4. 5. ....... 6. 7. Лістинг 3.
Функція "plgJSMarks" буде розглянута нижче.
Після обробника події слід основна функція плагіна «jquerydisp», всередині якої снача перевіряється тип документа (змінна GET запиту "view"):
1. function jquerydisp (& $ article, & $ params, $ limitstart) 2. {3. $ view = JRequest :: getCmd ( 'view'); 4. if (($ view! = 'Article') 5. | | JRequest :: getBool ( 'fullview') 6. | | JRequest :: get Var ( 'print')) 7. {8. return null; exit; 9.} 10. 11. ....... 12. 13. Лістинг 4.
Тобто якщо тип не є статтею, наприклад PDF або файл для друку, нам ні до чого виводити решті код плагіна, тому ми завершуємо виконання php скрипта.
Решта код «jquerydisp», де спочатку ми отримуємо налаштування нашого плагіна з об'єкта $ params, який містить налаштування файлу jqueryslider.xml, тобто $ params-> get ( 'pretext') містить значення з тега «param» з ім'ям «pretext» файлу jqueryslider.xml.
1. <param name = "pretext" type = "text" size = "40" default = "jQuery плагін:" label = "Вступний текст" description = "Напишіть текст, який додасться перш ніж можна буде плагіна" /> Лістинг 5.
1. 2. global $ mainframe; 3. 4. / * The url adress of page * / 5. $ currurl = JURI :: current (); 6. $ content = ''; 7. 8. 9. $ baseurl = JURI :: base (); 10. $ document = & JFactory :: getDocument (); 11. $ title = $ document-> getTitle (); 12. 13. / * customs params * / 14. $ pretext = $ params-> get ( 'pretext'); 15. $ h = $ params-> get ( 'size'); 16. $ b = '#FDFFBC'; 17. $ b = $ params-> get ( 'background'); 18. 19. 20. $ content. = '<Div id = "page-wrap"> 21. 22. <div class = "slider-wrap"> 23. <div id = "main-photo-slider" class = "csw"> 24. <div class = "panelContainer"> 25. 26. <div class = "panel" title = "Panel 1"> 27. <div class = "wrapper"> 28. <img src = "jquery -slider-img / tempphoto-1.jpg "alt =" temp "/> 29. <div class =" photo-meta-data "> 30. Photo Credit: <a href =" http: //flickr.com/ photos / astrolondon / 2396265240 / "> Kaustav Bhattacharya </a> <br /> 31. <span>" Free Tibet "Protest at the Olympic Torch Rally </ span> 32. </ div> 33. </ div> 34 . </ div> 35. <div class = "panel" title = "Panel 2"> 36. <div class = "wrapper"> 37. <img src = "jquery-slider-img / tempphoto-2.jpg" alt = "temp" /> 38. <div class = "photo-meta-data"> 39. Chicago Bears at Seattle Seahawks <br /> 40. <span> Fifth field goal, overtime win for the Seahawks </ span> 41. </ div> 42. </ div> 43. </ div> 44. <div class = "panel" title = "Panel 3"> 45. <div class = "wrapper"> 46. 47. <img src = "jquery- slider-img / scotch-egg.jpg "alt =" scotch egg "class =" floatLeft "/> 48. 49. <h1> How to Cook a Scotch Egg </ h1> 50. 51. <ul> 52. < li> 6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up) </ li> 53. <li> 1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup) </ li> 54. <li> 1/2 cup AP flour </ li> 55. <li> 1 -2 eggs, beaten </ li> 56. <li> 3/4 cup panko-style bread crumbs </ li> 57. <li> Vegetable oil for frying </ li> 58. </ ul> 59. </ div> 60. </ div> 61. <div class = "panel" title = "Panel 4"> 62. <div class = "wrapper"> 63. <img src = "jquery-slider-img / tempphoto-4 .jpg "alt =" temp "/> 64. <div class =" photo-meta-data "> 65. A Poem by Shel Silverstein <br /> 66. <span> Falling Up </ span> 67. </ div> 68. </ div> 69. </ div> 70. <div class = "panel" title = "Panel 5"> 71. <div class = "wrapper"> 72. <img src = "jquery -slider-img / tempphoto-5.jpg "alt =" temp "/> 73. <div class =" photo-meta-data "> 74. New Video on CSS-Tricks <br /> 75. <span> Using Wufoo for Web Forms </ span> 76. </ div> 77. </ div> 78. </ div> 79. <div class = "panel" title = "Panel 6"> 80. <div class = "wrapper "> 81. <h1> A Tale of Two Cities </ h1> 82. <p> <em> Charles Dickins </ em> </ p> 83. <blockquote> It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period , that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only. </ Blockquote> 84. </ div> 85. </ div> 86. 87. </ div> 88. </ div> 89. 90. <a href = "# 1" class = "cross-link active- thumb "> <img src =" jquery-slider-img / tempphoto-1thumb.jpg "class =" nav-thumb "alt =" temp-thumb "/> </a> 91. <div id =" movers-row "> 92. <div> <a href=" #2 "class=" cross-link "> <img src = "jquery-slider-img / tempphoto-2thumb.jpg" class = "nav-thumb" alt = " temp-thumb "/> </a> </ div> 93. <div> <a href=" #3 "class=" cross-link "> <img src = "jquery-slider-img / tempphoto-3thumb. jpg "class =" nav-thumb "alt =" temp-thumb "/> </a> </ div> 94. <div> <a href=" #4 "class=" cross-link "> <img src = "jquery-slider-img / tempphoto-4thumb.jpg" class = "nav-thumb" alt = "temp-thumb" /> </a> </ div> 95. <div> <a href = "# 5 "class =" cross-link "> <img src =" jquery-slider-img / tempphoto-5thumb.jpg "class =" nav-thumb "alt =" temp-thumb "/> </a> </ div> 96. <div> <a href= "#6" class= "cross-link "> <img src =" jquery-slider-img / tempphoto-6thumb.jpg "class =" nav- thumb "alt =" temp-thumb "/> </a> </ div> 97. </ div> 98. 99. </ div> 100. 101. </ div> '; 102. 103. 104. return $ content; 105.} 106. Лістинг 6.
Змінна $ content містить html структуру слайдера.
Так як все палгіни повинні містити функцію конструктор, наследуемиую об'єкти і функції глобального класу «JPlugin», в нашому випадку за це відповідає наступний код:
1. 2. 3. class plgcontentJquerySlider extends JPlugin 4. {5. function plgcontentJquerySlider (& $ subject, $ params) 6. {7. parent :: __ construct ($ subject, $ params); 8. $ document = & JFactory :: getDocument (); 9. $ document-> addStyleSheet ( '/plugins/content/jqueryslider/jslider.css'); 10. $ document-> addScript ( '/plugins/content/jqueryslider/jquery-1.5.min.js'); 11. $ document-> addScript ( '/plugins/content/jqueryslider/jquery-easing-1.3.pack.js'); 12. $ document-> addScript ( '/plugins/content/jqueryslider/jquery-easing-compatibility.1.2.pack.js'); 13. $ document-> addScript ( '/plugins/content/jqueryslider/coda-slider.1.1.1.pack.js'); 14. $ document-> addScript ( '/plugins/content/jqueryslider/jslider.js'); 15.} 16. 17. function onAfterDisplayContent (& $ article, & $ params, $ limitstart) 18. {19. 20. if ($ this-> params-> get ( 'showon') == 1) 21. { 22. $ content = jquerydisp ($ article, $ this-> params, $ limitstart); 23.} 24. 25. return $ content; 26.} 27.} 28. Лістинг 7.
Даний код найбільш важливий як для плагіна, так і для слайдера, так як він підключає javascript і css файли, але є ще важливішим для нас функція «onAfterDisplayContent», за допомогою якої просіходіт початковий запуск палгіна, якщо параметр «showon» (відображення слайдера тільки в кінці статті) встановлено (1).
Можна сказати, що плагін на цьому завершено, однак у нас залишилася функція «plgJSMarks».
Функція «plgJSMarks» замінять все {jqueryslider} вставкою слайдера, проте, попереджаю, даний плагін МОЖЛИВО вставити НА СТОРІНКУ один раз, тому не намагайтеся вставляти «купу» тегів {jqueryslider} в текст статті, - буде працювати тільки перший зверху. Таке обмеження пов'язане з jQuery кодом і HTML розміткою.
Якщо Вам потрібно вставляти необмежену кількість палігнов, потрібно позбавити слайдер від прив'язці до id «page-wrap». Іншими словами, - це тема іншої статті та іншого розділу! Якщо потрібно звертайтеся в розділ «Замовлення скрипта»!
функції «plgJSMarks» призначена для заміни тегу {jqueryslider}:
1. 2. 3. function plgJSMarks (& $ article, & $ params, $ limitstart) 4. {5. static $ pluginParams = null; 6. 7. if ($ params-> get ( 'showon') == 1) 8. {9. if (preg_match ( '{jqueryslider}', $ article-> text)) 10. {11. 12. $ plugin = & JPluginHelper :: getPlugin ( 'content', 'jqueryslider'); 13. $ pluginParams = new JParameter ($ plugin-> params); 14. 15. 16. $ content = jquerydisp ($ article, $ pluginParams, $ limitstart); 17. 18. $ article-> text = str_replace ( '{jqueryslider}', $ content, $ article-> text); 19.} 20.} 21. return true; 22.} 23. 24. Лістинг 8.
Так повинен працювати наш з вами jQuery слайдер:
Chicago Bears at Seattle Seahawks
Fifth field goal, overtime win for the Seahawks
A Poem by Shel Silverstein
Falling Up
New Video on CSS-Tricks
Using Wufoo for Web Forms
Charles Dickins
It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only. Все, тепер для Вас, як і для мене відкриті хороші можливості для інтеграції плагінів jQuery в Joomla!
Залишилося написати статтю про те як зробити код плагіна легко доступним для редагування користувачеві з редактора адмін. панелі, без необхідності ручного зміни файлу jqueryslider.php в папці з плагінами. Може хтось підкаже в якому напрямку шукати?
Завантажити Joomla плагін "Мій перший палгін для Joomla!" архівом.
2.0 / 5 (299 проголосували) Дата: 8 роки тому - 2011.07.14
Переглядів: 109 965
Коментарів: 2
Коментарі до статті:Наш плагін відноситься до групи плагінів для роботи з контентом, - де ж, як не в статтях виводити слайдер?
Lt;?
Quot; encoding = "utf-8"?
Lt;?
Може хтось підкаже в якому напрямку шукати?