ایجاد ماژول مدیریت تب ها: تفاوت بین نسخه‌ها   

از دانشنامه جوملا فارسی - مامبو فارسی
پرش به: ناوبری، جستجو
(صفحه‌ای جدید حاوی «=مقدمه = در این مقاله چگونگی ایجاد یک ماژول مدیریت تب ها را در [http://www.joomlafarsi....» ایجاد کرد)
 
 
(۱ نسخهٔ میانی ویرایش شده توسط ۱ کاربر نشان داده نشده)
سطر ۱: سطر ۱:
 
=مقدمه =
 
=مقدمه =
  
−
در این مقاله چگونگی ایجاد یک [[ماژول]] مدیریت تب ها را در [http://www.joomlafarsi.com جوملا] بررسی خواهیم کرد. جهت ایجاد [[ماژول]] با چندین تب نیازمند آشنایی با دانش [[JavaScript]] خواهیم بود. <br/>
+
در این مقاله چگونگی ایجاد یک [[ماژول]] مدیریت تب‌ها را در [http://www.joomlafarsi.com جوملا] بررسی خواهیم کرد. جهت ایجاد [[ماژول]] با چندین تب نیازمند آشنایی با دانش [[JavaScript]] خواهیم بود.  
−
1. در ابتدا به یک ''' < div > ''' بایک '''id''' منحصر به فرد برای هرتب نیازمنیدم تب ها خود در داخل یک سطر از ''' < table > ''' قرار گرفته اند.     <br/>
+
 
−
2. برای محتوایی که قرار است به ازای هر تب نمایش داده شود به یک < div > با id هایی منحصر فرد نیاز داریم این مجموعه نیز در داخل یک سطر دیگر از  < table >  قرار میگیرد.   <br/>
+
1-در ابتدا به یک ''' < div > ''' بایک '''id''' منحصر به فرد برای هر تب نیازمندیم. تب‌ها خود در داخل یک سطر از ''' < table > ''' قرار گرفته‌اند.
−
3. برای مشخص کردن رویداد کلیک برروی هریک از تب ها باید از [[JavaScript]] استفاده کنیم. از آنجایی که استفاده از تکنولوژی جاوااسکریپت در نسخه های قدیمیه IE ممکن است با مشکلاتی همراه باشد باید از قبل مرورگر را مشخص کنیم که Internet Explorer است یا خیر؟ اگر اینترنت اکسپلورر بود از تابع ''' attachEvent() ''' استفاده میکنیم و اگر هر مرورگری به جز IE بود از تابع ''' addEventListener() ''' اجرا میشود.
+
 
 +
2-برای محتوایی که قرار است به ازای هر تب نمایش داده شود به یک < div > با id‌هایی منحصر فرد نیاز داریم این مجموعه نیز در داخل یک سطر دیگر از  < table >  قرار می‌گیرد.
 +
 
 +
3-برای مشخص کردن رویداد کلیک بر روی هر یک از تب‌ها باید از [[JavaScript]] استفاده کنیم. از آنجایی که استفاده از تکنولوژی جاوا اسکریپت در نسخه‌های قدیمی IE ممکن است با مشکلاتی همراه باشد باید از قبل مرورگر را مشخص کنیم که Internet Explorer است یا خیر؟
 +
 
 +
اگر اینترنت اکسپلورر بود از تابع ''' attachEvent() ''' استفاده می‌کنیم و اگر هر مرورگری به جز IE بود از تابع ''' addEventListener() ''' جهت اجرا استفاده می‌شود.
  
 
=چگونه مرورگرها را از یکدیگر تمیز دهیم؟=
 
=چگونه مرورگرها را از یکدیگر تمیز دهیم؟=
  
−
''' window.addEventListener ''' مقدار ''' true ''' را زمانی بازمیگرداند که مرورگر هر چیزی  '''به جز''' IE است و مقدار ''' false ''' را برای IE بازمیگرداند.
+
''' window.addEventListener ''' مقدار ''' true ''' را زمانی باز می‌گرداند که مرورگر هر چیزی  '''به جز''' IE است و مقدار ''' false ''' را برای IE باز می‌گرداند.
  
 
<source lang="javascript">
 
<source lang="javascript">
سطر ۲۰: سطر ۲۵:
  
  
−
4. تابع ''' titleDivTab1Func ''' حاوی کدی است که زمانیکه کاربر برروی تب ها کلیک میکند اجرا میشود. زمانیکه کاربر برروی هریک از آیتم های تب کلیک کند محتوای هر تب باید در پایین نمایش داده شود. این هدف با عنصر ''' innerHTML ''' وبه کمک یک id  منحصر به فرد برای هر div انجام خواهد شد.  
+
4-تابع ''' titleDivTab1Func ''' حاوی کدی است که زمانیکه کاربر برروی تب‌ها کلیک می‌کند اجرا می‌شود. زمانیکه کاربر بر روی هر یک از آیتم‌های تب کلیک کند محتوای هر تب باید در پایین نمایش داده شود. این هدف با عنصر ''' innerHTML ''' و به کمک یک id  منحصر به فرد برای هر div انجام خواهد شد.  
 +
 
 +
 
 
<source lang="javascript">
 
<source lang="javascript">
 
document.getElementById("divContentTab").innerHTML = " محتوای تب اول";
 
document.getElementById("divContentTab").innerHTML = " محتوای تب اول";
 
</source>
 
</source>
  
−
5. فراخوانی تابع [[JavaScript]] از helper.php
+
 
−
همانطور که مستحضر هستید روند اجرای [[ماژول]] های [[جوملا]] بعد از mod_modulename از فایل helper.php آغاز خواهد میشود. عملیات فراخوانی توسط تابع script() موجود در کلاس ''' JHtml ''' انجام میشود. که به صورت زیر باید در فایل helper قرار گیرد.
+
5-فراخوانی تابع [[JavaScript]] از helper.php
 +
 
 +
همانطور که مستحضر هستید روند اجرای [[ماژول]]‌های [[جوملا]] بعد از mod_modulename از فایل helper.php آغاز خواهد می‌شود. عملیات فراخوانی توسط تابع script() موجود در کلاس ''' JHtml ''' انجام می‌شود. که به صورت زیر باید در فایل helper قرار گیرد.
 +
 
 +
 
 
<source lang="php">
 
<source lang="php">
 
JHTML::_('script',"tabbed.js",JURI::base().'/modules/mod_tabbed/js/',true);
 
JHTML::_('script',"tabbed.js",JURI::base().'/modules/mod_tabbed/js/',true);
 
</source>
 
</source>
  
−
=فایلهای مورد نیاز=
 
  
 +
=فایل‌های مورد نیاز=
  
−
1. '''mod_tabbed.php ''' : از این فایل روند اجرای [[ماژول]] آغاز خواهد شد. این فایل وظیفه اجرای فایل helper و فراهم کردن مقدمات لازم برای مقدار دهی های اولیه و ... را به عهده دارد.    <br/>
+
 
−
2. ''' Helper.php ''' : این فایل شامل کلاس helper میباشد که وظیفه جمع آوری داده های مورد نیاز [[ماژول]] را از [[پایگاه داده]] ها یا سایر منابع به عهده دارد.    <br/>
+
#'''mod_tabbed.php ''' : از این فایل روند اجرای [[ماژول]] آغاز خواهد شد. این فایل وظیفه اجرای فایل helper و فراهم کردن مقدمات لازم برای مقدار دهی‌های اولیه و ... را به عهده دارد.     
−
3. ''' mod_tabbed.xml ''' : این فایل شامل اطلاعاتی در مورد [[ماژول]] است همچنین وظیفه نصب [[ماژول]] در [[جوملا]] را به عهده دارد.    <br/>
+
#''' Helper.php ''' : این فایل شامل کلاس helper می‌باشد که وظیفه جمع آوری داده‌های مورد نیاز [[ماژول]] را از [[پایگاه داده]]‌ها یا سایر منابع به عهده دارد.     
−
4. ''' tmpl/default.php  ''' : از این فایل جهت نمایش خروجی [[ماژول]] استفاده میکنیم.      <br/>
+
#''' mod_tabbed.xml ''' : این فایل شامل اطلاعاتی در مورد [[ماژول]] است همچنین وظیفه نصب [[ماژول]] در [[جوملا]] را به عهده دارد.     
−
5. '''js/tabbed.js''' : این فایل شامل کدهای جاوا اسکریپت مورد نیاز برای [[ماژول]] خواهد بود.    <br/>
+
#''' tmpl/default.php  ''' : از این فایل جهت نمایش خروجی [[ماژول]] استفاده می‌کنیم.       
 +
#'''js/tabbed.js''' : این فایل شامل کدهای جاوا اسکریپت مورد نیاز برای [[ماژول]] خواهد بود.     
  
 
==ایجاد فایل Mod_tabbed.php ==
 
==ایجاد فایل Mod_tabbed.php ==
  
−
کدهای موجود در فایل mod_tabbed.php به صورت زیر است
+
کدهای موجود در فایل mod_tabbed.php به صورت زیر است:
 +
 
 +
 
 
<source lang="php">
 
<source lang="php">
 
<?php
 
<?php
سطر ۵۳: سطر ۶۷:
 
?>
 
?>
 
</source>
 
</source>
 +
  
 
==ایجاد فایل helper.php ==
 
==ایجاد فایل helper.php ==
  
−
این فایل شامل کلاس ''' modTabbedHelper''' است و شامل یک متد بانام getHello() میباشد. کدهایی که باید در فایل Helper.php قرار گیرد به صورت زیر است.  
+
این فایل شامل کلاس ''' modTabbedHelper''' است و شامل یک متد بانام getHello() می‌باشد. کدهایی که باید در فایل Helper.php قرار گیرد به صورت زیر است.  
 +
 
  
 
<source lang="php">
 
<source lang="php">
سطر ۷۲: سطر ۸۸:
 
?>
 
?>
 
</source>
 
</source>
 +
  
 
==ایجاد فایل mod_tabbed.xml ==
 
==ایجاد فایل mod_tabbed.xml ==
−
همان طور که قبلا گفته شد این فایل شامل اطلاعاتی در مورد ماژول است. کدهای موجود در فایل mod_tabbed.xml به صورت زیر میباشند.
+
 
 +
همان طور که قبلا گفته شد این فایل شامل اطلاعاتی در مورد ماژول است. کدهای موجود در فایل mod_tabbed.xml به صورت زیر می‌باشند.
 +
 
 +
 
 
<source lang="xml">
 
<source lang="xml">
 
<?xml version="1.0" encoding="utf-8"?>
 
<?xml version="1.0" encoding="utf-8"?>
سطر ۸۱: سطر ۱۰۱:
 
<author>JoomlaFarsi Team</author>
 
<author>JoomlaFarsi Team</author>
 
<version>2.5</version>
 
<version>2.5</version>
−
<description>ماژول مدیریت تب ها</description>
+
<description>ماژول مدیریت تب‌ها</description>
 
<files>
 
<files>
 
<filename>mod_tabbed.xml</filename>
 
<filename>mod_tabbed.xml</filename>
سطر ۹۶: سطر ۱۱۶:
 
</extension>
 
</extension>
 
</source>
 
</source>
 +
  
 
==ایجاد فایل tmpl\default.php==
 
==ایجاد فایل tmpl\default.php==
 +
 
کد این فایل نیز شامل  
 
کد این فایل نیز شامل  
 +
 +
 
<source lang="php">
 
<source lang="php">
 
<html><body bgcolor="#FFFFFF"></body></html>
 
<html><body bgcolor="#FFFFFF"></body></html>
 
</source>
 
</source>
−
است و باعث نمایش یک صفحه سفید میشود.
+
 
 +
 
 +
است و باعث نمایش یک صفحه سفید می‌شود.
  
 
==فایل js\tabbed.js==
 
==فایل js\tabbed.js==
  
−
این فایل شامل کدهای جاوا اسکریپت است و همچنین محتوای درون تب ها را میتوانید از این فایل تغییر دهید.
+
این فایل شامل کدهای جاوا اسکریپت است و همچنین محتوای درون تب‌ها را می‌توانید از این فایل تغییر دهید.
 +
 
 +
 
 
<source lang="php">
 
<source lang="php">
 
window.addEvent("domready",function(){
 
window.addEvent("domready",function(){
سطر ۱۶۳: سطر ۱۹۱:
 
}
 
}
 
</source>
 
</source>
 +
  
 
= ایجاد بسته نصبی از ماژول =
 
= ایجاد بسته نصبی از ماژول =
 +
 
در این مرحله باید یک فایل '''zip''' با نام '''mod_tabbed''' ایجاد کنیم و این فایل باید شامل فایل‌ها و فولدرهای زیر باشد.
 
در این مرحله باید یک فایل '''zip''' با نام '''mod_tabbed''' ایجاد کنیم و این فایل باید شامل فایل‌ها و فولدرهای زیر باشد.
  
سطر ۱۷۵: سطر ۲۰۵:
 
* js\tabbed.js
 
* js\tabbed.js
 
* js\index.html
 
* js\index.html
−
<br/>
+
 
−
فایل zip بالا می‌تواند از قسمت مدیریت افزونه‌ها در مدیریت [[جوملا]] نصب شود. همچنین جهت دانلود این افزونه میتوانید از لینک استفاده کنید.
+
فایل zip بالا می‌تواند از قسمت مدیریت افزونه‌ها در مدیریت [[جوملا]] نصب شود. همچنین جهت [http://upload.mambolearn.com/modules/mod_tabbed.zip دانلود این افزونه] می‌توانید از لینک زیر استفاده کنید.
 +
 
 +
http://upload.mambolearn.com/modules/mod_tabbed.zip
 +
 
 +
<headertabs />
  
 
----
 
----

نسخهٔ کنونی تا ‏۱۸ نوامبر ۲۰۱۳، ساعت ۰۵:۵۲

[ویرایش]

در این مقاله چگونگی ایجاد یک ماژول مدیریت تب‌ها را در جوملا بررسی خواهیم کرد. جهت ایجاد ماژول با چندین تب نیازمند آشنایی با دانش 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 بلامانع است.
برگرفته از «https://docs.joomlafarsi.com/index.php?title=ایجاد_ماژول_مدیریت_تب_ها&oldid=4019»