使用 views 建立tabs, use view to build tabs

JOE — Mon, 15 Sep 2008 01:11:48 -0700

上圖顯示了一個經過修改的 user page 的 tabs

tabs 其實來自一個 hook(), menu_local_tasks()
用 theme developer 指一下便可以看到
但這次介紹的並不是要修改這個 hook 的 theme template
而是使用 views, 新增一個tab 到這個地方

在上圖的例子,
一個 url 為 [root]/user 的頁面,
要在 views 建立一個的 tab,

2007-04-09-drupal-module-develop-with-tabs-and-ajax

JOE — Sun, 08 Apr 2007 18:35:19 -0700

blog 數正幾何級的減少中...

主要是專注於放復活節假...
和drupal 的一個模?開發有關

這一次的模?是一個recent comment 和 recent blog post 的二合一模?
用了jquery library 和 tabs plugin
成就一個tab 和ajax 模?
當然沿用drupal 內建使用ajax 的方式
但講起來容易
官網都不多這類的drupal 5.1+ ajax 的描述
唯有向已經內建ajax 的現有module 偷師
open source 吧...
明白了當中的機制之後
有寫過ajax 的朋友應該會立即上手
如果還沒有寫過, 到jquery 的官網先參考一下ajax 的用法會容易點
反正都有中文說明

以下假設你已經會做一個模?
所以只提重點部份

先講tabs 的組成
tabs 有一個指定的格式

<div>

<ul>

<li>tab title1</li>
<li>tab title2</li>

</ul>
<div>tab content1</div>
<div>tab content2</div>

</div>

換成recent comment, recent blog post:(非php code, 只為一個算法結構)
hook_block()內:

<ul>

<li>t(''Recent comments'')</li>
<li>t(''Recent blog posts'')</li>

</ul>
<div>theme(''comment_block'')</div>
<div>joe_recent_blog()</div>//self defined function

</div>

其中, theme(''comment block'')為comment module 內建的function 輸出recent comment
joe_recent_blog() 為一個模?內定義的function, prototype類似:

if (user_access(''access content'')) {
$result = db_query_range(db_rewrite_sql("SELECT
n.nid, n.title, n.created FROM {node} n WHERE n.type = ''blog'' AND n.status = 1
ORDER BY n.created DESC"), 0, 10);
if (db_num_rows($result)) {
$block[''content''] .= "<div
id=''fragment-2''>".node_title_list($result);
$block[''content''] .= ''<div
class="more-link">''. l(t(''more''), ''blog'', array(''title'' => t(''Read the
latest blog entries.''))) .''</div>'';
}
}

先完成非ajax block 的部份, 可降解ajax, 可降解block

此時已經可以在drupal 內enable block, 測試一下
為插入ajax 做準備

因為ajax 的javascript code 為數十多二十行,
分開一個.js file 處理
joe.js:

$(document).ready( function(){dojo_ajax_auto_attach();} )

function dojo_ajax_auto_attach(){
//init tabs
$("#joe_container").tabs();

///////////////////////////////略

留意, drupal 5.1 內建的drupal/misc/jquery.js
並不可以使用tabs plugin...(應該為版本問題)
故要使用tabs plugin 包內的jquery.js 或官網的jquery.js, 覆蓋
接著又可以試一下tabs 的效果

戲玉...終於到了...ajax 的部分
ajax request 有一個url 的para 注(i)
用作找出php handler 的php file
但drupal 內卻用一個module file作handler
故要告訴(register) 到drupal core, 某一path 會用作handler
傳相關parameter 到module file
要在hook_menu() 內:

$items = array();
$items[] = array(
''path'' => ''dojo/menu'', //注(i)
''title'' => t(''dojo''),
''access'' => user_access(''access content''),
''type'' => MENU_CALLBACK,
''callback'' => ''dojo_js'' //真正的php handler
function
);

$items = array_merge($items, module_invoke_all(''dojo_menu'', $may_cache));
return $items;

到此, ajax 的php 部份其實只有一個register function hook_menu()
和dojo_js(), 一個真正的handler

javascript 卻反而可以細分為兩個部份
caller 和handler
caller 為一個buttom, 按了就發出一個要求到注(i) 的path

$(".dojo-ajax").click(function(){
$.ajax({
type: "POST",
url: "/drupal/dojo/menu",
data: "path=" + "dojo/menu",

/////////////////////略, 待續
handler 為php 返回的json object parser
通常為插入返回的json object 的javascript code
////續

success: function (data) {
data = Drupal.parseJson(data);
$("#block-dojo-0 .content").html(
data.content );

細心看source code 就可以了

歡迎回應~