Hamidy در ‏۱۸ نوامبر ۲۰۱۳، ساعت ۰۵:۵۲

2013-11-18T05:52:34Z

Shmata در ‏۱۶ نوامبر ۲۰۱۳، ساعت ۰۶:۳۳

2013-11-16T06:33:41Z

Shmata: صفحه‌ای جدید حاوی «=مقدمه = در این مقاله چگونگی ایجاد یک ماژول مدیریت تب ها را در [http://www.joomlafarsi....» ایجاد کرد

2013-11-12T06:37:04Z

صفحه‌ای جدید حاوی «=مقدمه = در این مقاله چگونگی ایجاد یک ماژول مدیریت تب ها را در [http://www.joomlafarsi....» ایجاد کرد

صفحهٔ تازه

=مقدمه =

در این مقاله چگونگی ایجاد یک [[ماژول]] مدیریت تب ها را در [http://www.joomlafarsi.com جوملا] بررسی خواهیم کرد. جهت ایجاد [[ماژول]] با چندین تب نیازمند آشنایی با دانش [[JavaScript]] خواهیم بود. <br/>
1. در ابتدا به یک ''' < div > ''' بایک '''id''' منحصر به فرد برای هرتب نیازمنیدم تب ها خود در داخل یک سطر از ''' < table > ''' قرار گرفته اند. <br/>
2. برای محتوایی که قرار است به ازای هر تب نمایش داده شود به یک < div > با id هایی منحصر فرد نیاز داریم این مجموعه نیز در داخل یک سطر دیگر از < table > قرار میگیرد. <br/>
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 و فراهم کردن مقدمات لازم برای مقدار دهی های اولیه و ... را به عهده دارد. <br/>
2. ''' Helper.php ''' : این فایل شامل کلاس helper میباشد که وظیفه جمع آوری داده های مورد نیاز [[ماژول]] را از [[پایگاه داده]] ها یا سایر منابع به عهده دارد. <br/>
3. ''' mod_tabbed.xml ''' : این فایل شامل اطلاعاتی در مورد [[ماژول]] است همچنین وظیفه نصب [[ماژول]] در [[جوملا]] را به عهده دارد. <br/>
4. ''' tmpl/default.php ''' : از این فایل جهت نمایش خروجی [[ماژول]] استفاده میکنیم. <br/>
5. '''js/tabbed.js''' : این فایل شامل کدهای جاوا اسکریپت مورد نیاز برای [[ماژول]] خواهد بود. <br/>

==ایجاد فایل 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
<br/>
فایل zip بالا می‌تواند از قسمت مدیریت افزونه‌ها در مدیریت [[جوملا]] نصب شود. همچنین جهت دانلود این افزونه میتوانید از لینک استفاده کنید.

----

جمع آوری شده توسط :[http://forum.joomlafarsi.com/members/26237-shmata شهاب مطاع پور]

{{آموزش}}

{{معرفی پشتیبانی}}

{{کپی رایت}}

[[رده:ماژول‌های جوملا 2.5]] [[رده: سوالات متداول جوملا 2.5]] [[رده: کدنویسی و گسترش جوملا 2.5]][[رده: مقالات جوملا 2.5]]

@@ سطر ۱۷۶: / سطر ۱۷۶: @@
 * js\index.html
 <br/>
-فایل zip بالا می‌تواند از قسمت مدیریت افزونه‌ها در مدیریت [[جوملا]] نصب شود. همچنین جهت دانلود این افزونه میتوانید از لینک استفاده کنید.
+فایل zip بالا می‌تواند از قسمت مدیریت افزونه‌ها در مدیریت [[جوملا]] نصب شود. همچنین جهت [http://upload.mambolearn.com/modules/mod_tabbed.zip دانلود این افزونه] میتوانید از لینک زیر استفاده کنید.
 ----

ایجاد ماژول مدیریت تب ها - تاریخچهٔ ویرایش‌ها

Hamidy در ‏۱۸ نوامبر ۲۰۱۳، ساعت ۰۵:۵۲

Shmata در ‏۱۶ نوامبر ۲۰۱۳، ساعت ۰۶:۳۳

Shmata: صفحه‌ای جدید حاوی «=مقدمه = در این مقاله چگونگی ایجاد یک ماژول مدیریت تب ها را در [http://www.joomlafarsi....» ایجاد کرد