JavaScript trong joomla

Hôm nay chúng ta tìm hiểu vấn đề JavaScript trong joomla trong bài này mình giới thiệu đến các bạn hai cách phổ biến để chèn javascript vào trong joomla.

Bây giờ ta sẽ chèn Menu Glossy Accordion đây là một dropdown menu sử dụng js rất đẹp mắt. Trước tiên bạn phải downloads file dưới đây về copy vào thư mục gốc trong joomla.

Download: Menu Glossy Accordion

Cách 1: Sử dụng Custom HTML

Trước khi nhúng javascript bằng cách này bạn phải tắt trình Editor để chúng ta có thể nhập được mã HTML mà không bị mã hóa ra các ký tự đặc biệt.

Bạn vào Site -> Global Configuration

site trong joomla

Típ theo chọn như hình sau:

Xong bước đầu tiên bây giờ bạn tiến hành cài module Custom HTML các bước bạn làm như sau: Vào Module Manager -> New -> chọn vào Module Custom HTML

Custom HTML

Trong Custom Output bạn copy đoạn code sau đây vào.

<!--
//Khai báo js và css
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="ddaccordion.js"></script>
<script type="text/javascript">
ddaccordion.init({
	headerclass: "submenuheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})
</script>
<style type="text/css">
.glossymenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/
border: 1px solid #9A9A9A; border-bottom-width: 0; }
.glossymenu a.menuitem{ background: black url(glossyback.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white; display: block; 
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none;}
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; }
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute; top: 5px; right: 5px; border: none; }
.glossymenu a.menuitem:hover{ background-image: url(glossyback2.gif); }
.glossymenu div.submenu{ /*DIV that contains each sub menu*/ 
background: white;}
.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none; margin: 0; padding: 0; }
.glossymenu div.submenu ul li{ border-bottom: 1px solid blue; }
.glossymenu div.submenu ul li a{ display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black; text-decoration: none; padding: 2px 0; padding-left: 10px; }
.glossymenu div.submenu ul li a:hover{ background: #DFDCCB; colorz: white; }
</style>


//Nội dung menu
<div class="glossymenu">
<a class="menuitem" href="#">bcdOnline.net</a>
<a class="menuitem submenuheader" href="#" >CSS Examples</a>
<div class="submenu">
	<ul>
	<li><a href="#">Horizontal CSS Menus</a></li>
	<li><a href="#">Vertical CSS Menus</a></li>
	<li><a href="#">Image CSS</a></li>
	<li><a href="#">Other</a></li>
	<li><a href="#">Browse All</a></li>
	</ul>
</div>
<a class="menuitem" href="#">DOM Reference</a>
<a class="menuitem submenuheader" href="#">CSS Drive</a>
<div class="submenu">
	<ul>
	<li><a href="#">CSS Gallery</a></li>
	<li><a href="#">Menu Gallery</a></li>
	<li><a href="#">CSS Compressor</a></li>
	<li><a href="#">CSS Forums</a></li>
	</ul>
	<img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" />
</div>
<a class="menuitem" href="#" style="border-bottom-width: 0">Coding Forums</a>		
</div>

-->

Bấm nút Save lại ra trang chủ xem ta sẽ được kết quả đã hiển thị menu.

menu trong joomla

Cách 2: Can thiệp đến file trong Template của joomla.

Bạn copy file như cách trên đã làm, tiếp theo tìm đến địa chỉ template mà bạn đang sử dụng. Mở file index.php lên chèn đoạn js mà mình chú thích là //Khai báo js và css ở trên vào trong tag HEAD

Tiếp đến bạn chạy trang chủ lên dùng firebug trong firefox để tìm đến chỗ bạn muốn chèn hiển thị js.

Xác định được vị trí bạn vào file index.php vào chỗ bạn đã xác định và chèn đoạn code mình chú thích //Nội dung menu vào đó. Ví dụ mình chọn bên trái hiển thị thì copy đoạn code đó vào tag DIV có id là leftcolumn

<!--
<div id="leftcolumn">
     <?php if($this->countModules('left')) : ?>
     <jdoc:include type="modules" name="left" style="rounded" />
     <?php endif; ?>

//Copy vào đây.

</div>
-->

Save lại tất cả và test.

Kết luận:
Mình đã chia sẽ bạn hai cách chèn javascript trong joomla thông dụng thì người ta xài cách thứ 2 hơn nó đúng chuẩn và mình kiểm soát được tất cả và có thể là load nhanh hơn cách kia. Comment nha a e!…

VN:F [1.9.22_1171]
Rating: 9.6/10 (5 votes cast)
JavaScript trong joomla, 9.6 out of 10 based on 5 ratings
Chuyên mục: JavaScript & jQuery, Joomla
Tagged: , .

Một Comment

  1. Bạn đã bao giờ gặp trường hợp xung đột giữa các jquery với nhau chưa, và như vậy bạn sẽ xử lý ntn? mong hồi âm sớm. Thanks!

Để lại comment của bạn