Drupal မွာ jQuery အသံုးျပဳရတာ လြယ္ကူပါတယ္။ ဘာလို႔လဲ ဆိုေတာ့ တျခား CMS ေတြလိုပဲ jQuery UI ကို အစ ကတည္းက ထည့္သြင္းေပးထား လို႔ပါ။ ဒါအျပင္ ကိုယ္သံုးထားတဲ႔ ( js ) file ကိုလဲ drupal_add_js () function ကို အသံုးျပဳျပီး ခ်ိတ္ဆက္လို႔ ရပါတယ္။

အခု Drupal မွာ jQuery ကို စျပီး အသံုးျပဳၾကည့္မယ္။ အဲ jQuery ကို နဲ႔ Code ေတြ မေရးခင္ အရင္ဦးဆံုး ကိုယ္႔ Computer ထဲက Drupal ထဲကို login အရင္ဝင္ပါ။ Admin account နဲ႔ ျဖစ္ရပါမယ္။ ျပီးေတာ့ Modules page ကို သြားပါ။ PHP filter module ကို ရွာျပီး Enable ေပးထားလိုက္ပါ။ ျပီးရင္ေတာ့ Inline code တစ္ခုစေရးလို႔ ရပါျပီ။ စစခ်င္း Basic Page မွာ node တစ္ခု အသစ္ျပဳလုပ္လိုက္ပါ။ Title မွာ Testing jQuery လို႔ေရးျပီး Body မွာေတာ့-

<?php
drupal_add_js('jQuery(document).ready(function () {
jQuery("p").hide();
jQuery("p").slideDown("slow");
});', 'inline');
?>
<p id="one">Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>

ျပီးရင္ ေအာက္ဆံုး မွာ ရွိတဲ့ ” Input formats ” မွာ ” PHP code ” ကို ေရြးပီး save လိုက္ပါ။ သိပ္မရွင္းရင္ေတာ့ ေအာက္မွာ ပံုရွိပါတယ္။

jQuery code ေတြကို Drupal မွာ misc/jquery.js file မွာ ပါရွိပါတယ္။ drupal_add_js() function ကို အသံုးျပဳလိုက္တာနဲ႔ jquery.js ကို load လုပ္ပါတယ္။ ေစာေစာက Code မွာ ၎ function ကို parameters နွစ္ခု pass ေပးလိုက္ပါတယ္။ တစ္ခုက ကိုယ္အလုပ္လုပ္မဲ့ code ေတြပါ။ ေနာက္တစ္ခုကေတာ့ ” inline ” ပါ။ “inline” လို႔ေရးလိုက္ရင္ Drupal က ကိုယ့္အလုပ္လုပ္မယ့္ Code ေတြကို <script></script> tag ထဲကို ထည့္ေပးပါတယ္။

ေနာက္ထပ္ id = “one” လို႔ေရးထားတဲ့ paragraph ကို ပဲ အလုပ္လုပ္ခိုင္းၾကည့္မယ္။

<?php
drupal_add_js('jQuery(document).ready(function () {
jQuery("#one").hide();
jQuery("#one").slideDown("slow");
});', 'inline');
?>
<p id="one">Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>

ဒီေလာက္ဆိုရင္ Drupal မွာ jQuery ကို သေဘာေလာက္ေတာ့ စမ္းျပီးပါျပီ။ ဒီထက္ အဆင့္တက္တဲ့အေနနဲ႔ jQuery ကို module တစ္ခု အျဖစ္ ေရးၾကည့္ပါမယ္။ ေရးမယ္ ဆိုေတာ့ folder ေတြအရင္ ေဆာက္ရပါမယ္။ folder structure ကေတာ့ သင့္ရဲ့ Drupal folder ထဲက sites/all/modules/custom/blockaway/ ပါ။ မရွိရင္ ေဆာက္လိုက္ပါ။ ျပီးရင္ custom folder ထဲမွာ blockaway.info file တစ္ခုေဆာက္ပါ။ ၎ file ထဲမွာ-

name = Block-Away
description = Uses jQuery to hide blocks until a button is clicked.
package = Module Drupal Development
core = 7.x
files[] = blockaway.module

ေနာက္ blockaway.module file တစ္ခုေဆာက္ျပီး code အနည္းငယ္ေရးပါမယ္။

<?php
/**
 * @file
 * Use this module to learn about jQuery.
 */

/**
 * Implements hook_init().
 */
function blockaway_init()
{
	drupal_add_js(drupal_get_path('module', 'blockaway') .'/blockaway.js');
}

အခု js file ကို blockaway folder ထဲမွာ ထပ္ေရးပါမယ္။ sites/all/modules/custom/blockaway/blockaway.js -

/**
* Hide blocks in sidebars, then make them visible at the click of a button.
*/
jQuery(document).ready(function() {
	// Get all div elements of class 'block' inside the left sidebar.
	// Add to that all div elements of class 'block' inside the
	// right sidebar. Check your theme’s page.tpl.php file to see what
	// selectors you should use – the following are for garland.
	var blocks = jQuery('#sidebar-first div.block, #sidebar-second div.block');
	// Hide them.
	blocks.hide();
	// Add a button that, when clicked, will make them reappear.
	jQuery('#sidebar-first').prepend('<div id="collapsibutton">Show Blocks</div>');
	jQuery('#collapsibutton').css({
		'width': '90px',
		'border': 'solid',
		'border-width': '1px',
		'padding': '5px',
		'background-color': '#fff',
		'cursor':'pointer'
	});
	// Add a handler that runs once when the button is clicked.
	jQuery('#collapsibutton').one('click', function() {
		// Button clicked! Get rid of the button.
		jQuery('#collapsibutton').remove();
		// Display all our hidden blocks using an effect.
		blocks.slideDown("slow");
	});
});

အဲ့ဒါဆိုရင္ေတာ့ စမ္းသပ္လို႔ရပါပီ။

အဲ မစမ္းသပ္ခင္ေတာ့ module ကို Enable လုပ္ထားရပါမယ္။

အခုဆိုရင္ေတာ့ Drupal မွာ jQuery ကို အသံုးျပဳျပီး module တစ္ခုေရးျပီးပါျပီ။ Module တစ္ခု ေရးျပီးပီ ဆိုေတာ့ override လုပ္ၾကည့္မယ္။ ဘာလိုလဲဆိုေတာ့ Drupal မွာက အမ်ားအားျဖင့္ ( အားလံုးနီးပါး ) override လုပ္ရပါတယ္။ ၎မွာက function, module ေတြက အျပည့္အစံု နီးပါးေလာက္ရွိတာေၾကာင့္ ကိုယ္လိုခ်င္တဲ့ ပံုစံရေအာင္ override လုပ္ရတာပါ။ ဒါေၾကာင့္ အခုေရးထားတဲ့ Block-Away Module ကို ဝင္ေရာက္ ျပင္ဆင္ျခင္းမရွိပဲ ကိုယ္တိုင္ customize ျပန္လုပ္ ၾကည့္မယ္။ ဒါေပမယ့္ blockaway.module ကိုေတာ့ ျပန္ေရးရမယ္။ ဘာလို႔လဲဆိုေတာ့ ေစာေစာကေရးထားတဲ့ code ကနားလည္ရလြယ္ေအာင္ ရိုးရိုးရွင္းရွင္းေရးထားတာပါ။ Module ေတြကအဲ့ဒီေလာက္ မရိုးရွင္းပါဘူး။ ျပီးေတာ့ ကိုယ့္ Module ကို ဝင္ျပင္စရာမလိုပဲ override လုပ္လု႔ိရေအာင္ အစကတည္းက ေရးေပးထားရမွာပါ။ ဒါမွ ကိုယ္မွ မဟုတ္ တျခား developer ေတြက override လုပ္လို႔ရမွာပါ။ blockaway.module ကို ဒီ code ေတြနဲ႔ အစားထိုးမွာပါ။

<?php
/**
 * @file
 * Use this module to learn about jQuery.
 */

/**
 * Implements hook_init().
 */
function blockaway_init() {
	theme('blockaway_javascript');
}
/**
* Implements hook_theme().
* Register our theme function.
*/
function blockaway_theme() {
	return array(
	'blockaway_javascript' => array(
	'arguments' => array(),
	),
	);
}
/**
* Theme function that just makes sure our JavaScript file
* gets included.
*/
function theme_blockaway_javascript() {
	drupal_add_js(drupal_get_path('module', 'blockaway') .'/blockaway.js');
}

ျပီးရင္ ျပန္စမ္းၾကည့္လို႔ ရပါတယ္။ ေစာေစာကနဲ႔ ဘာမွာ မကြာျခားပါဘူး။ အခု စျပီး override  စလုပ္မယ္။ ကိုယ့္ အခုသံုးေနတဲ့ theme ဥပမာ- themes/bartik/ ထဲမွာ blockaway.js file ကို ေဆာက္လိုက္ပါ။ ျပီးေတာ့ အရင္ေရးထားတဲ့ blockaway.js file ထဲက code ေတြကူးလိုက္ပါ။ အဲ jQuery effect ေတြေတာ့ နည္းနည္း ေျပာင္းမယ္။ ဘာလို႔လဲဆိုေတာ့ ေစာေစာက စမ္းခဲ့တဲ့ effect နဲ႔ဆို ရွဳပ္ကုန္မွာဆိုးလို႔။

/**
 * Hide blocks in sidebar, then make them visible at the click of a button.
 */

jQuery(document).ready(function(){
	//Get all div elements of class 'block' inside the left sidebar
	//Add to that all div element of class 'block' inside the
	// right sidebar.
	var blocks = jQuery('#sidebar-first div.block, #sidebar-second div.block');

	// Hide them.
	blocks.hide();

	//Add a button that, when clicked, will make them reappear.
	jQuery('#sidebar-first').prepend('<div id="collapsibutton">Show Blocks</div>');
	jQuery('#collapsibutton').css({
		'width':'90px',
		'border':'solid',
		'border-width':'1px',
		'padding':'5px',
		'background-color':'#fff',
		'cursor': 'pointer',
		'margin-left':"15px"
	});

	//Add a handler that runs once when the button is clicked.
	jQuery('#collapsibutton').live('click',function(){

		if(jQuery('#collapsibutton').html() == 'Show Blocks')
		{
			//Button clicked! Get rid of the button.
			jQuery('#collapsibutton').html('Hide Blocks');
			//Display all our hidden blocks using an effect.
			blocks.slideDown('5000');
		}
		else
		{
			//Button clicked! Get rid of the button.
			jQuery('#collapsibutton').html('Show Blocks');
			//Display all our hidden blocks using an effect.
			blocks.slideUp('5000');

		}

	});
});

အခု js file အသစ္ေရးျပီးပီဆိုေတာ့ Drupal ကို ရွိျပီးသား js file ( sites/all/modules/custom/blockaway.js) အစား ဒီ js file ကို သံုးပါလို႔ ေျပာရမယ္။ ဒါေၾကာင့္ template.php file ထဲမွာ ထပ္ျဖည့္ရမယ္။

/**
 * Override theme_blockaway_javascript() with the
 * following function.
 */
function bartik_blockaway_javascript()
{
  drupal_add_js(path_to_theme().'/blockaway.js');
}

ဒါဆိုရင္ေတာ့ Block-Away module ကို override လုပ္တာပီးသြားပါျပီ။

မွတ္ခ်က္။ ။ Browser ကို reload လုပ္တာကို အေျပာင္းအလဲ မရွိဘူးဆိုရင္ Drupal ရဲ့ Caches ေတြကို သြားဖ်က္ေပးရပါမယ္။