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

از دانشنامه جوملا فارسی - مامبو فارسی
پرش به: ناوبری، جستجو
[ویرایش]

در این مقاله چگونگی ایجاد یک ماژول مدیریت تب‌ها را در جوملا بررسی خواهیم کرد. جهت ایجاد ماژول با چندین تب نیازمند آشنایی با دانش 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://upload.mambolearn.com/modules/mod_tabbed.zip


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

Indent support.png
هر گونه سوال و یا مشکلی در این رابطه دارید، می‌توانید در انجمن تخصصی تیم جوملا فارسی جستجو کرده و در صورت عدم دریافت نتیجه مورد نظر، سوال جدیدی را مطرح کنید.
8.pngاستفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.