ایجاد ماژول مدیریت تب ها

مقدمه

در این مقاله چگونگی ایجاد یک ماژول مدیریت تب ها را در جوملا بررسی خواهیم کرد. جهت ایجاد ماژول با چندین تب نیازمند آشنایی با دانش JavaScript خواهیم بود.
1. در ابتدا به یک < div > بایک id منحصر به فرد برای هرتب نیازمنیدم تب ها خود در داخل یک سطر از < table > قرار گرفته اند.
2. برای محتوایی که قرار است به ازای هر تب نمایش داده شود به یک < div > با id هایی منحصر فرد نیاز داریم این مجموعه نیز در داخل یک سطر دیگر از < table > قرار میگیرد.
3. برای مشخص کردن رویداد کلیک برروی هریک از تب ها باید از JavaScript استفاده کنیم. از آنجایی که استفاده از تکنولوژی جاوااسکریپت در نسخه های قدیمیه IE ممکن است با مشکلاتی همراه باشد باید از قبل مرورگر را مشخص کنیم که Internet Explorer است یا خیر؟ اگر اینترنت اکسپلورر بود از تابع attachEvent() استفاده میکنیم و اگر هر مرورگری به جز IE بود از تابع addEventListener() اجرا میشود.

چگونه مرورگرها را از یکدیگر تمیز دهیم؟

window.addEventListener مقدار true را زمانی بازمیگرداند که مرورگر هر چیزی به جز IE است و مقدار false را برای IE بازمیگرداند.

<source lang="javascript"> if(window.addEventListener) {

} else {

} </source>

4. تابع titleDivTab1Func حاوی کدی است که زمانیکه کاربر برروی تب ها کلیک میکند اجرا میشود. زمانیکه کاربر برروی هریک از آیتم های تب کلیک کند محتوای هر تب باید در پایین نمایش داده شود. این هدف با عنصر innerHTML وبه کمک یک id منحصر به فرد برای هر div انجام خواهد شد. <source lang="javascript"> document.getElementById("divContentTab").innerHTML = " محتوای تب اول"; </source>

5. فراخوانی تابع JavaScript از helper.php همانطور که مستحضر هستید روند اجرای ماژول های جوملا بعد از mod_modulename از فایل helper.php آغاز خواهد میشود. عملیات فراخوانی توسط تابع script() موجود در کلاس JHtml انجام میشود. که به صورت زیر باید در فایل helper قرار گیرد. <source lang="php"> JHTML::_('script',"tabbed.js",JURI::base().'/modules/mod_tabbed/js/',true); </source>

فایلهای مورد نیاز

1. mod_tabbed.php  : از این فایل روند اجرای ماژول آغاز خواهد شد. این فایل وظیفه اجرای فایل helper و فراهم کردن مقدمات لازم برای مقدار دهی های اولیه و ... را به عهده دارد.
2. Helper.php  : این فایل شامل کلاس helper میباشد که وظیفه جمع آوری داده های مورد نیاز ماژول را از پایگاه داده ها یا سایر منابع به عهده دارد.
3. mod_tabbed.xml  : این فایل شامل اطلاعاتی در مورد ماژول است همچنین وظیفه نصب ماژول در جوملا را به عهده دارد.
4. tmpl/default.php  : از این فایل جهت نمایش خروجی ماژول استفاده میکنیم.
5. js/tabbed.js : این فایل شامل کدهای جاوا اسکریپت مورد نیاز برای ماژول خواهد بود.

ایجاد فایل Mod_tabbed.php

کدهای موجود در فایل mod_tabbed.php به صورت زیر است <source lang="php"> <?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); // Include the syndicate functions only once require_once( dirname(__FILE__).DS.'helper.php' ); $hello = modTabbedHelper::getHello( $params ); require( JModuleHelper::getLayoutPath( 'mod_tabbed' ) ); ?> </source>

ایجاد فایل helper.php

این فایل شامل کلاس modTabbedHelper است و شامل یک متد بانام getHello() میباشد. کدهایی که باید در فایل Helper.php قرار گیرد به صورت زیر است.

<source lang="php"> <?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); class modTabbedHelper { static function getHello($params) { JHTML::_('script',"tabbed.js",JURI::base().'/modules/mod_tabbed/js/',true); return 'Helper Tabbed Pane'; } } ?> </source>

ایجاد فایل mod_tabbed.xml

همان طور که قبلا گفته شد این فایل شامل اطلاعاتی در مورد ماژول است. کدهای موجود در فایل mod_tabbed.xml به صورت زیر میباشند. <source lang="xml"> <?xml version="1.0" encoding="utf-8"?> <extension type="module" version="2.5" client="site" method="upgrade"> <name>tabbed</name> <author>JoomlaFarsi Team</author> <version>2.5</version> <description>ماژول مدیریت تب ها</description> <files> <filename>mod_tabbed.xml</filename> <filename module="mod_tabbed">mod_tabbed.php</filename> <filename>index.html</filename> <filename>helper.php</filename> <filename>tmpl/default.php</filename> <filename>tmpl/index.html</filename> <filename>js/index.html </filename> <filename>js/tabbed.js</filename> </files> <config> </config> </extension> </source>

ایجاد فایل tmpl\default.php

کد این فایل نیز شامل <source lang="php"> <html><body bgcolor="#FFFFFF"></body></html> </source> است و باعث نمایش یک صفحه سفید میشود.

فایل js\tabbed.js

این فایل شامل کدهای جاوا اسکریپت است و همچنین محتوای درون تب ها را میتوانید از این فایل تغییر دهید. <source lang="php"> window.addEvent("domready",function(){ if(window.addEventListener) { document.getElementById('divTitleTab1').addEventListener("click",titleDivTab1Func, false,true); document.getElementById('divTitleTab2').addEventListener("click",titleDivTab2Func, false,true); document.getElementById('divTitleTab3').addEventListener("click",titleDivTab3Func, false,true); document.getElementById('divTitleTab4').addEventListener("click",titleDivTab4Func, false,true); } else if(window.attachEvent) { //IE document.getElementById('divTitleTab1').attachEvent("onclick",titleDivTab1Func); document.getElementById('divTitleTab2').attachEvent("onclick",titleDivTab2Func); document.getElementById('divTitleTab3').attachEvent("onclick",titleDivTab3Func); document.getElementById('divTitleTab4').attachEvent("onclick",titleDivTab4Func); } });

function titleDivTab1Func() { var oDiv = document.getElementById("divContentTab"); oDiv.style.display = "block"; document.getElementById("divTitleTab1").style.background = "#FFFFFF"; document.getElementById("divTitleTab2").style.background = "#F3F3F3"; document.getElementById("divTitleTab3").style.background = "#F3F3F3"; document.getElementById("divTitleTab4").style.background = "#F3F3F3"; oDiv.innerHTML = " you are under Tab 1"; }

function titleDivTab2Func() { var oDiv = document.getElementById("divContentTab"); oDiv.style.display = "block"; document.getElementById("divTitleTab2").style.background = "#FFFFFF"; document.getElementById("divTitleTab1").style.background = "#F3F3F3"; document.getElementById("divTitleTab3").style.background = "#F3F3F3"; document.getElementById("divTitleTab4").style.background = "#F3F3F3"; oDiv.innerHTML =" You are in Tab 2" ; }

function titleDivTab3Func() { var oDiv = document.getElementById("divContentTab"); oDiv.style.display = "block"; document.getElementById("divTitleTab3").style.background = "#FFFFFF"; document.getElementById("divTitleTab1").style.background = "#F3F3F3"; document.getElementById("divTitleTab2").style.background = "#F3F3F3"; document.getElementById("divTitleTab4").style.background = "#F3F3F3"; oDiv.innerHTML ="Congratulations! You have a Joomla! site! Joomla! makes it easy to build a website just the way you want it and keep it simple to update and maintain.in tab3" ; }

function titleDivTab4Func() { var oDiv = document.getElementById("divContentTab"); oDiv.style.display = "block"; document.getElementById("divTitleTab4").style.background = "#FFFFFF"; document.getElementById("divTitleTab1").style.background = "#F3F3F3"; document.getElementById("divTitleTab2").style.background = "#F3F3F3"; document.getElementById("divTitleTab3").style.background = "#F3F3F3"; oDiv.innerHTML ="Joomla! is a flexible and powerful platform, whether you are building a small site for yourself or a huge site with hundreds of thousands of visitors. You are in Tab 4" ; } </source>

ایجاد بسته نصبی از ماژول

در این مرحله باید یک فایل zip با نام mod_tabbed ایجاد کنیم و این فایل باید شامل فایل‌ها و فولدرهای زیر باشد.

• mod_tabbed.php
• index.html
• mod_tabbed.xml
• helper.php
• tmpl\default.php
• tmpl\index.html
• js\tabbed.js
• js\index.html

فایل zip بالا می‌تواند از قسمت مدیریت افزونه‌ها در مدیریت جوملا نصب شود. همچنین جهت دانلود این افزونه میتوانید از لینک استفاده کنید.

---

جمع آوری شده توسط :شهاب مطاع پور

گروه آموزش - تیم جوملا فارسی

هر گونه سوال و یا مشکلی در این رابطه دارید، می‌توانید در انجمن تخصصی تیم جوملا فارسی جستجو کرده و در صورت عدم دریافت نتیجه مورد نظر، سوال جدیدی را مطرح کنید.

استفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.