اگر شما بخواهید به قالب خود فایل های CSS و JS اضافه کنید، بهتر است از اصول استاندار اینکار یعنی قرار دادن فایل های مربوطه در بین تگ های <head> انجام دهید. این کار باعث منظم بودن و اصولی بودن صفحه وب شما در بین موتورهای جستجوگر و مرورگرها خواهد بود و اگر عکس این موضوع عمل شود با اینکه ممکن است مشکلات ظاهری به همراه نداشته باشد ولی قطعا مشکلات فنی برای سایت شما ایجاد خواهد کرد. در این آموزش به شما خواهیم آموخت که کلا هسته جوملا 3 برای ایجاد تگ های <link> و <script> چگونه کار می کند.

برای درک بهتر مطالب این آموزش نیازمند آشنایی به زبان های HTML ، CSS و PHP خواهید بود

 جوملا به شما این امکان را می دهد که بتوانید قبل از لود صفحه ، در هر فایل PHP که نیاز داشته باشید فایل استایل CSS و فایل های اسکریپت JavaScript خود را اضافه کنید و هسته جوملا تمامی این فایل ها را در بین تگ <head> اضافه می کند.

 فراخوانی فایل استایل CSS به قالب (جوملا 3)

 فرض کنید می خواهید درون یک ماژول یا یک صفحه از ویوهای یک کامپوننت ، یک استایل فراخوانی کنید. طبق اصول جوملا 3 شما باید به روش زیر عمل کنید :

$document = JFactory::getDocument();
$url = JUri::base() . 'templates/themeiran_sample/css/sample.css';
$document->addStyleSheet($url);

 در خط اول شما یک رفرنس از شی داکیومنت فعلی می سازید و با کمک تابع addStyleSheet فایل مربوطه را اضافه می کنید. تابع JUri::base() مسیر ریشه سایت تان را نشان می دهد و مابقی مسیر را شما خودتان باید بصورت دستی بنویسید؛ در مثال بالا ما یک قالب به نام themeiran_sample داریم که یک پوشه به نام css درون آن ایجاد شده است؛ حال ما فایل sample.css را به صفحه خود اضافه کرده ایم. این روش اصولی ترین و ساده ترین روش اضافه کردن فایل CSS به صفحه از طریق فریمورک های جوملا می باشد.

 فراخوانی فایل اسکریپت JavaScript به قالب (جوملا 3)

 برای فراخوانی اسکریپت ها هم به همین روش انجام می شود منتها تابع فراخوانی ما متفاوت می باشد به مثال زیر دقت کنید :

$document = JFactory::getDocument();
$url = JUri::base() . 'templates/themeiran_sample/js/sample.js';
$document->addScript($url);

 همان طور که مشاهده می کنید بجای تابع addStyleSheet از تابع addScript استفاده کرده ایم طبیعتا مسیر رسیدن به فایل به ما و قالب ما بستگی دارد.

 فراخوانی فایل استایل و اسکریپت به قالب (جوملا 2.5 و 1.5)

 در جوملا 1.5 و 2.5 این موضوع کمی متفاوت بوده و دیگر در جوملا کلا این روش منسوخ شده اما در این مقاله صرفا جهت آگاهی شما یک نمونه از آن کد را نشان خواهیم داد. در جوملا 1.5 و 2.5 از تابع script و stylesheet که متعلق به کلاس JHTML بودند استفاده می شد، به مثال زیر توجه کنید :

<?php JHTML::script('sample.js', JURI::base(true) . 'templates/themeiran_sample/js/'); ?>

 همان طور که مشاهده می کنید در پارامتر اول نام فایل نوشته میشد و در پارامتر دوم مسیر رسیدن به فایل درج می شد که در جوملا 3 شما دیگر نیازی به انجام این کار ندارید و مسیر بصورت کاملا مستقل و در یک بخش نوشته می شد. برای استایل CSS هم به همین نحو انجام می شد. به مثال زیر توجه کنید : 

<?php JHTML::stylesheet('sample.css', JURI::base(true) . 'templates/themeiran_sample/css/'); ?>

 درج استایل CSS و اسکریپت JavaScript بصورت Inline در Head

 جوملا برای شما امکان درج استایل و اسکریپت بصورت خطی (Inline) را هم فراهم کرده است و شما می توانید علاوه بر اضافه کردن یک فایل به قالب ، کدهای خود را هم می توانید اضافه کنید. برای این کار کافی است به روش زیر عمل کنید :

$document = JFactory::getDocument();

// Add JavaScript
$document->addScriptDeclaration('
    window.event("domready", function() {
        alert("An inline JavaScript Declaration");
    });
');

// Add styles
$style = '
body {
    background: #00ff00;
    color: rgb(0,0,255);
}
'; 
$document->addStyleDeclaration($style);

 اضافه کردن تگ سفارشی با کمک تابع addCustomTag

 یکی از قابلیت های مهم کتاب خانه JDodument در جوملا اضافه کردن تگ سفارشی در بین تگ <head> می باشد به این صورت که شما هر چیزی در پارامتر این تابع ارسال کنید ، جوملا آن را در بین تگ <head> نمایش می دهد. لطفا به مثال های زیر توجه کنید :

$document = JFactory::getDocument();

// Example 1 => Add meta tag
$document->addCustomTag('<meta property="author" content="ThemeIran"/>');

// Example 2 => Add stylesheet tag
$stylelink = '<!--[if lte IE 6]>' ."\n";
$stylelink .= '<link rel="stylesheet" href="/../css/IEonly.css" />' ."\n";
$stylelink .= '<![endif]-->' ."\n";

$document->addCustomTag($stylelink);

// Example 3 => Add Google site verification tag
$document->addCustomTag('<meta name="google-site-verification" content="d-NZtSSAwNktmyFFQuNKgb-DXN1eDrbyx1q_HjLHYzM" />');

 در مثال اول ما یک تگ از نوع متا (meta) نوشتیم؛ شما می توانید هر نوع تگ متا را که نیاز داشته باشید با استفاده از این تابع به صفحه اضافه کنید. کاربر بیشتر آن هم روی تگ های og می توان نام برد که جوملا این تگ ها را بصورت پیشفرض تا بدین لحظه به هسته خود اضافه نکرده است پس بهترین راه اضافه کردن این تگ ها ، استفاده از تابع addCustomTag می باشد.

 در مثال دوم ما نیاز داشتیم چند خط کامنت (Comment) به تگ <head> اضافه کنیم؛ برای مثال برای مرورگرهای نسخه IE 6 و نسخه های پایین تر باید شرط قرار بدیم که اگر وجود داشت این تابع فراخوانی بشه در غیر اینصورت نیازی به فراخوانی نیست؛ خب تنها راه اضافه کردن کامنت به همراه خود آدرس فایل ، استفاده از تابع addCustomTag می باشد.

 در مثال سوم ما مجدد از یک تگ متا (meta) استفاده کردیم که در آن کد اعتبار سنجی گوگل برای هویت مالک سایت نوشته شده است. همان طور که مشاهده می کنید کاربرد تابع addCustomTag کم نیست و در جاهای مختلفی از آن استفاده می شود.

 فراخوانی کتابخانه جی کوئری (jQuery) در جوملا

 برای فراخوانی کتابخانه جی کوئری در جوملا 1.5 ، 2.5 و 3 هر کدام بصورت های مختلف انجام می پذیرد و ما در ادامه به هر 3 آنها اشاره خواهیم کرد.

 برای جوملا 1.5 

JHTML::_('behavior.mootools');

 برای جوملا 2.5 

JHTML::_('behavior.framework');

 برای جوملا 3 

JHTML::_('jquery.framework');

در جوملا 3 وقتی کد بالا را اجرا کنید ، کتابخانه جی کوئری به علاوه no conflict به صفحه اضافه می شود و شما می توانید برای جلوگیری از تداخل ، بجای $ از jQuery استفاده کنید.اگر می خواهید حالت نرمال کتابخانه جی کوئری (بدون no conflict) را اضافه کنید ، باید در پارامتر دوم این تابع ، false قرار بدید :

JHtml::_('jquery.framework', false);

 فراخوانی کتابخانه بوت استرپ (Bootstrap) در جوملا

 در جوملا شما قادر هستید با اجرای کد زیر کتابخانه بوت استرپ توییتر را فراخوانی کنید. با فراخوانی این کتابخانه شما می توانید از ویژگی های alert, button, carousel, collapse, dropdown, modal, tooltip, popover, scrollspy, tab و ... استفاده کنید. توجه داشته باشید که با فراخوانی بوت استرپ ، کتابخانه جی کوئری هم بصورت خودکار فراخوانی خواهد شد.

JHtml::_('bootstrap.framework')

 فراخوانی کتاب خانه jQuery UI

 برای فراخوانی کتابخانه محبوب jQuery UI می توانید از تابع زیر استفاده کنید :

JHtml::_('jquery.ui');

 کد بالا فایل jquery-ui.core.js را به صفحه اضافه خواهد کرد.

اگر به فراخوانی کتابخانه Sortable نیاز دارید می توانید از کد زیر استفاده کنید :

JHtml::_('jquery.ui', array('sortable'));

 برای کد نویسی بهینه تر بهتر است با یکبار فراخوانی این کتابخانه هم core را فراخوانی کنید و هم sortable را. نمونه کد زیر اینکار را برای شما انجام خواهد داد :

JHtml::_('jquery.ui', array('core', 'sortable'));

 فراخوانی کتابخانه Mootools در جوملا

JHtml::_('behavior.framework');

 فراخوانی ویژگی Tooltip در جوملا

 تولتیپ (به انگلیسی : Tooltip) یکی از ویژگی های منحصر به فرد کتابخانه بوت استرپ (Bootstrap) می باشد که به شما قابلیت نمایش متن در هنگام هاور (hover) روی هر عنصر HTML را خواهد داد. ابتدا شما باید کتابخانه بوت استرپ (Bootstrap) را به صفحه اضافه کنید کد زیر این کار را برای شما انجام می دهد :

JHtml::_('bootstrap.framework')

 سپس باید به این کتابخانه دستور فراخوانی تولتیپ را بدهیم؛ به زبان ساده تر اینکه باید بگوییم چه عنصری از صفحه را تحت تاثیر خود قرار دهد. نحوه فراخوانی دستی این ویژگی بصورت زیر می باشد :

jQuery('[data-toggle="tooltip"]').tooltip({html:true});

 کد بالا تمامی عناصر HTML در صفحه که با خصوصیت data-toggle="tooltip" هستند را تحت تاثیر کتابخانه خود قرار می دهد. برای درک این موضوع به کد HTML زیر نگاه کنید :

<div class="ttip" data-placement="top" data-toggle="tooltip" data-original-title="این یک متن تستی می باشد <br> لطفا با دقت با کدها نگاه کنید">
Hover This Text
</div>

 توضیح 1 : مقدار data-placement که برابر top قرار گرفته است مشخص می کند که باکس تولتیپ به سمت بالا باز شود. می توانید مقادیر top ، bottom ، left ، right را بر اساس نیاز خود به این خصوصیت بدهید.

 توضیح 2 : خصوصیت data-toggle که برابر tooltip قرار داده شده همان نقش اصلی داستان ماست که اگر نباشد کلا این عملیات کنسل است. در صورتی که هر گونه تغییری در این خصوصیت بدید باید در کد جاوا اسکریپت بالا هم تغییر دهید.

 توضیح 3 : در نهایت هم خصوصیت data-original-title را می توانید مقدار دهی کنید. دقت کنید که هر چه در این خصوصیت وارد کنید در هنگام هاور (Hover) نشان داده خواهد شد.

 نکته حائز اهمیت این است که شما هر تعداد عنصر HTML با خصوصیت data-toggle="tooltip" داشته باشید، تحت تاثیر این ویژگی قرار خواهند گرفت و اگر اشاره گر موس را روی آنها ببرید ، مقدار درون data-original-title هر یک بصورت مجزا نمایش داده خواهد شد.

 نکته : اگر دقت کنید در مثال بالا ما از تگ <br> استفاده کردیم که در حالت پیشفرض کتابخانه تولتیپ تگ های HTML را نمی شناسد و بصورت متن نشان می دهد. برای حل این موضوع در پارامترهای تابع فراخوانی این ویژگی ، مقدار html را برابر true قرار داده ایم. در مثال فراخوانی تابع این موضوع را می توانید مشاهده کنید.

 کد زیر یک مثال از نمایش تولتیپ (Tooltip) با کمک از کلاس JTHML و کلاس tooltip می باشد :

// Load Bootstrap framework
JHtml::_('bootstrap.framework');

// -JavaScript
<script>
	jQuery(document).ready(function() {
		jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
	});
</script>

// HTML
// Place this line every where you need to
echo JHTML::tooltip('This is the tooltip text', 'Tooltip title', '', 'Hover This Text', 'https://www.themeiran.com');

 در پارامتر آخر تابع tooltip لینک وب سایت تم ایران را درج کرده ایم که با این کار جوملا متن مربوطه را به لینک تبدیل خواهد کرد.اگر نگاهی به Source Code صفحه بندازید می بینید که تابع tooltip کد HTML زیر را برگردانده است که در واقع فرق چندانی با ساختار کدی که ما در بالا مثال زدیم ندارد :

<span class="hasTooltip" title="&lt;strong&gt;Tooltip title&lt;/strong&gt;&lt;br /&gt;This is the tooltip text"><a href="https://www.themeiran.com">Hover This Text</a></span>

کد زیر یک مثال دیگر برای اجرای تولتیپ با کلاس hasTip در جوملا می باشد :

// PHP
// Load Bootstrap framework
JHtml::_('bootstrap.framework');

// Load Tooltip framework
JHTML::_('behavior.tooltip');

// Insert this code every where you need
<span class="hasTip" title="Tooltip Title Sample::This is a tooltip sample to test">
   Hover on this text
</span>

 توضیح 1 :در این روش شما می توانید یک عنوان هم برای متن توضیحات خود قرار دهید برای این کار متن درون خصوصیت title را به دو قسمت با (::) تقسیم کنید؛ سمت چپ این کارکتر عنوان توضیح شما و سمت راست آن متن توضیح شما خواهد بود. به مثال بالا دقت کنید.

توضیح 2 : بعد از فراخوانی کتابخانه بوت استرپ ، باید کتاب خانه tooltip با هم فراخوانی کنیم. دستور JHTML::_('behavior.tooltip') کد جاوا اسکریپت زیر را در بین تگ <head> درج می کند که البته شما می توانید خودتان هم این کار را بصورت دستی انجام دهید؛ برای این کار کد زیر را در بالای تگ بسته ی </head> قرار دهید و مشاهده خواهید کرد که تولتیپ شما بدون مشکل کار می کند :

<script>
	jQuery(function($) {
		$('.hasTip').each(function() {
			var title = $(this).attr('title');
			if (title) {
				var parts = title.split('::', 2);
				var mtelement = document.id(this);
				mtelement.store('tip:title', parts[0]);
				mtelement.store('tip:text', parts[1]);
			}
		});
		var JTooltips = new Tips($('.hasTip').get(), {"maxTitleChars": 50,"fixed": false});
	});
</script>

 توجه: لطفا توجه کنید که کد دستور بالا باید بعد از فراخوانی کتابخانه بوت استرپ باشد در غیر اینصورت عملکرد درستی نخواهد داشت.

 برای استایل دهی به تولتیپ با کلاس hasTip می توانید بصورت زیر استایل مورد نظر تان را اعمال کنید :

.tip-wrap{
    // Code Here
}

.tip {
    // Code Here
}

.tip-title {
    // Code Here
}

.tip-text {
    // Code Here
}

 و همچنین برای استایل دهی به تولتیپ با کلاس tooltip می توانید بصورت زیر عمل کنید :

.tooltip{
    // Code Here
}
.tooltip > .tooltip-inner {
    // Code Here
}
.tooltip.top > .tooltip-arrow {
    // Code Here
}

فراخوانی کتابخانه validate.js در جوملا

JHtml::_('behavior.formvalidation');

 فراخوانی کتابخانه multiselect.js در جوملا

JHtml::_('behavior.multiselect');

 فراخوانی کتابخانه Chosen در جوملا

JHtml::_('formbehavior.chosen', 'select');

 در پارامتر دوم شما می توانید کلاس یا شناسه (id) عنصر select را وارد کنید. اگر مانند مثال بالا فقط select را وارد کنید ، تمامی عناصر select درون صفحه تحت تاثیر این کتابخانه قرار خواهند گرفت. در صورتی که پارامتر دوم این تابع را پر نکنید ، جوملا بصورت پیشفرض به دنبال عناصر select که با کلاس advancedSelect هستند خواهد بود. با این اوصاف اکر شما پارامتر دوم را پر نکنید و در خصوصیت کلاس عناصر select در صفحه مقدار advancedSelect را بنویسید ، تمامی این عناصر select تحت تاثیر کتابخانه Chosen قرار خواهند گرفت.

 در حالت کلی شما می توانید با فراخوانی کتابخانه Chosen ، بصورت دستی هم این کار را انجام دهید. به نمونه کد زیر دقت کنید :

<script>
// 1
jQuery(".slc").chosen();

// 2
jQuery("#edu").chosen();
</script>

 تمامی مطالب مربوط به استایل و جاوا اسکریپت ها در جوملا به همین اطلاعات خلاصه نمی شود اما در این مقاله سعی شده از مهم ترین ها و پر کاربردترین ها توضیح داده شود. این مقاله در آینده بروزرسانی خواهد شد ...