XOOPS 這個 CMS (Content Management System) 已經風行好久了，最近才有機會仔細的評估一下，感覺上比 Mambo、Joomla 更有彈性，官方網站也點出未來的方向是朝向 Framework 發展。在專案裡用來作後台應該不錯，每個客戶要求的功能以 module 方式開發，速度快、程式碼也容易維護。
由於現在客戶的胃口都被養大了，要求的功能常常要用到 AJAX，以常見的 Yahoo UI 為例，這是一個 javascript base 的 framework，如何整合在一起的確是花了點時間研究。
首先我們要解決如何崁入我們的 css 及 js 檔，我們以預設的 theme 為例：
在 themes/default/theme.html 裡有以下2行
<!– customized header contents –>
<{$xoops_module_header}>
我們可以利用第2行的 smarty 樣板引擎變數加入我們所需要的 css 及 javascript 檔，以下是個簡單的範例
<?php
require(‘../../mainfile.php’);
require(XOOPS_ROOT_PATH.’/header.php’);
$xoops_module_header=<<<HEADER
<!– datatable includes below –>
<link rel=”stylesheet” type=”text/css” href=”js/yui/build/datatable/assets/skins/sam/datatable.css”>
<script src=”js/yui/build/yahoo-dom-event/yahoo-dom-event.js”></script>
<script src=”js/yui/build/element/element-beta-min.js”></script>
<script src=”js/yui/build/datasource/datasource-beta-min.js”></script>
<script src=”js/yui/build/datatable/datatable-beta-min.js”></script>
<!– loading panel includes below –>
<link rel=”stylesheet” type=”text/css” href=”js/yui/build/container/assets/container.css”>
<script src=”js/yui/build/utilities/utilities.js”></script>
<script src=”js/yui/build/container/container.js”></script>
<!– connection manager includes below –>
<script src=”js/yui/build/yahoo/yahoo-min.js”></script>
<script src=”js/yui/build/event/event-min.js”></script>
<script src=”js/yui/build/connection/connection-min.js”></script>
<!— module javascript –>
<script src=”js/module.js”></script>
HEADER;
$xoopsTpl->assign(‘xoops_module_header’,$xoops_module_header);
$html=<<<HTML
<script language=”javascript”>
showDownloadCountHTML();
</script>
<h2>AJAX HTML output</h2>
<div id=”DownloadTableHTML”></div>
<h2>AJAX YUI datatable</h2>
<div id=”DownloadTableYUI”></div>
HTML;
echo $html;
require(XOOPS_ROOT_PATH.’/footer.php’);
?>
2008.2.15 加註:
最近在寫 admin 的模組，由於 admin 預設的樣板 header 大部份都是 hard code，要 customize 的話，如果 client 端是 Firefox ，這些 css、js 外部 include 檔放在 body 內的 script 也可以正常運作。如果要同時相容 Firefox、Internet Explorer 則要透過 DOM 動態將 css、js 載入放進 header，有機會再提供詳細的範例。
(No Ratings Yet)
Loading...