- 注册时间
- 2009-11-15
- 最后登录
- 2010-10-20
- 在线时间
- 54 小时
- 阅读权限
- 100
- 积分
- 1900
- 帖子
- 99
- 精华
- 1
- UID
- 11
  
|
本帖最后由 Sanakan 于 2009-11-17 10:02 编辑
Tabs and Accordions第3章笔记
标签和手风琴
tab和accordion都是用来分割页面的不同内容
不同点在于
1.tab的handles（控制器）是在标签内容边缘水平或垂直放置，而accordion是交错放在内容中的，就像章节标题一样。
2.tab切换是即时，而accordion的都动画效果。
3.accordion类似于IDE的代码折叠，便于查找内容而不需浏览剩余的部分。
相同点是都需要一个东西来暗示可以用于切换和一点点代码来实现。
Using a jQuery tab plugin
jQuery UI http://jqueryui.com/,插件中的精华部分（the cream of the crop），配合美观的css主题，提供一系列windgets
tab widget由Tabs List,Tabs Content二部分组成，并包含在一个容器里(wrapper)
首先来看硬编码的Tabs Content
Client-side code
客户端需要2个额外的文件
http://ajax.googleapis.com/ajax/ ... .2/jquery-ui.min.js
http://ajax.googleapis.com/ajax/ ... tness/jquery-ui.css
[snippet 46页]
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
...
</ul>
<div id="tabs-1">
<p> roin elit arcu, rutrum commodo, vehicula tempus,commodoa, risus. </p>
</div>
...
</div>
注意ul中每一个li是如何与下面div标签对应的。
Tip:里面的占位文本在http://www.lipsum.com/.可以找到。
$(document).ready(function() {
$("#tabs").tabs();
});
#tabs里可以用.tabs来建立多个windgets
运用DOM探测工具比如FireFox的Firebug((http://getfirebug.com/)或是Safari的Web Inspector可以看到class已经被添加进去，以便样式化tabs。
你可以在Firebug等DOM工具里暂时改变css属性，观察元素的显示。但是永久行的需要到css文件里去改。
(sanakan:其实在其他浏览器里opera(opera蜻蜓）和charme(内置），在IE里可以外链firebug的js来实现firebug的一些功能。当然IE也由自己的工具。FireFox+Firebug目前是最好的）
Server-side considerations
如何在CMS里写tabs内容呢？一个表单是最好的。先看下accordion，然后再一起讨论。
Using jQuery accordion plugins
Accordions同tabs很像，点击链接(a header link)浏览各板块,不同在于如何定义，将javacript禁用显示可以看出：tabs用于离散的内容，accordion用于便于阅读。
Client-side code
<div id="accordion">
<h3>Nunc tincidunt</h3>
<div>
<p>roin elit arcu, rutrum commodo, vehicula tempus,commodo a, risus.</p>
</div>
...
</div>
对比tabs来说accordion没有可以css,也一样行得通，因为它的元素的位置都是固定的，而tabs的导航条可以在上面，下面等不同地方。
注意accordion的默认设置的高度是固定的，由第一项决定，所以可能会由滚动条。解决方法如下。
$(document).ready(function() {
$("#accordion").accordion({
autoHeight:false
});
});
Server-side management of accordions
假设在你的CMS系统中管理员可以通过富文本编辑器比如TinyMCE (http://tinymce.moxiecode.com/) 或者 CKeditor (http://ckeditor.com/, FCKeditor的继承者（the upcoming successorto FCKeditor)).
简单的方式：所有的H3元素都做成accordion的标题
Client-side code
下载CKeditor解压到例子的上层目录
[snippet54页]
<script src="../jquery.min.js"></script>
<script src="../ckeditor/ckeditor.js"></script>
<script>
$(document).ready(function(){
$('textarea.rte').each(function(){
CKEDITOR.replace(this.name);
});
});
</script>
<form action="page2.php" method="post">
...
<textarea class="rte"
style="width:100%;height:200px;"
name="body">
</textarea>
...
Unobtrusive JavaScript:不唐突的JavaScript写法,将行为层从内容和展现层分离开来,是代码简洁，易于维护。
Server-side code
Just the conversion
page2.php
[snippet 56页]
<?php
$html=@$_REQUEST['body'];
if(strpos($html,'<h3')===false)
$converted=$html;
else{
$panels=explode('<h3',$html);
$converted=array_shift($panels).'<div class="accordion">';
foreach($panels as $panel){
$panel_bits=explode('</h3>',$panel);
$converted.='<h3'.$panel_bits[0].'</h3>';
$converted.='<div>'.$panel_bits[1].'</div>';
}
$converted.='</div>';
}
//echo $converted;
?>
// Now show the data with the accordionos,snippet 57page
...
<body>
<?php echo $converted;?>
</body>
...
(数组操作流畅）
注意：需要做2个数据库，一个是原本的文档，以便管理员编辑，另外一个用来发送到页面(render)，使得有accordion效果。
这是个简单的例子（使用h3)，更复杂的页面，再比如多个accordionos,留做练习。
Server-side management of tabs
我们依然做H3后面的页面，客户端代码和accordiono一样
Server-side code
Just the conversion
[snippet60]
<?php
$html=@$_REQUEST['body'];
if(strpos($html,'<h3')===false)
$converted=$html;
else{
$menu=array();
$tabs=0;
$tab_c='';
$panels=explode('<h3',$html);
$converted=array_shift($panels).'<div class="tabs"><ul>';
foreach($panels as $panel){
$panel_bits=explode('</h3>',$panel);
//取得tab名字的时候，需要考虑到<h3 style="color:red">的情况
$menu[]=preg_replace('/^[^>]*>/','',$panel_bits[0]);
$tab_c.='<div id="tab-'.($tabs++).'">'.
$panel_bits[1].'</div>';
}
foreach($menu as $k=>$v)
$converted.='<li><a href="#tab-'.$k.'">'.$v.'</a></li>';
$converted.='</ul>'.$tab_c.'</div>';
}
?>
...
<body>
<?php
echo $converted;
?>
</body>
...
Using special codes to define tabs
同时使用这两个windgets怎么做？
因为文本是你自己写的，所以可以用自定义的文本分割。{{TABSTART}},{{TABPAGE}},{{TABEND}}.
图62页
Client-side code
[63页代码]
同时使用<h3>和上面的分割文本
第1次explode后移除第一项，得到{{TABSTART}}前面的，做成accordion.
第2次剩下的explode，[0]为中间,再用{{TABPAGE}}分割的各个tabs.(S:处理中间这堆，揉得人头晕）
[1]为{{TABEND}}后面的，做成accordion.
例子是tabs中包含accordion的所以要注意convert_accordions函数出现的各个地方。
可以改为{{TABPAGE name="configuration"}}，将name做成tags的标签名字。可以自由扩展。因为用户使用的是变换好的，变换占的资源置在编辑保存的时候。
Loading accordion panels through Ajax
配合使用Ajax来accordion一本书的章节。
Client-side code
[snippet 67页]
$chapters=preg_match_all('/Chapter /',$book,$arr);
for($i=1;$i<$chapters+1;++$i){
...
}
accordion()函数的参数：
'collapsible'： 是否允许所有的元素关闭，默认是false.
'active': 定义开始的时候打开的是哪个面板。设置为false的话，当collapsible是ture的时候，一个打开的都没有。
'changestart':function(ev,ui){}中ui是jqueryUI中关于accordion状态的，ui.newHeader是刚点击的标题。
Server-side code
[snippet69页]
注意以下php函数的参数和用法：
str_replace
preg_replace
preg_match_all
explode
array_shift
echo(逗号分隔开的内容）
和JavaScript函数replace的用法。
Loading tab panels through Ajax
tab用来分离内容
Client-side code
tabs插件能够自动使用Ajax取得内容。
（《jquery_ui_16_the_user_interface_library_for_jquery》书里有没有提到，倒是记不清了。）
注意:如果使用tabs和Accordions提交表单时候使用Ajax不当，会丢失表单内容。
http://www.bookfm.com/book/bookdetail.html?bid=107006
下一章
PHP/JavaScript表单验证。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡