Bootstrap 筆記 - 讓 table 以 <tr> 為單位支援 click event

這功能其實不難，但順手筆記一下自己選的解法：

<table class="table table-striped table-hover">
<thead>
<tr>
<td cols="3">
<img class="img-responsive" src="something"/>
</td>
</tr>
</thead>
<tbody>
<tr data-href="link">
<td>Data1</td>
<td>Data2</td>
<td><a href="link">Data3</a></td>
</tr>
</tbody>
</table>

搭配 Javascript(jQuery):

<script>
$(document).ready(function() {
$(".table > tbody > tr").css('cursor', 'pointer').click(function() {
var link = $(this).data("href").trim();
if (link.length > 0)
window.document.location = link;
return false;
});
});
</script>

簡單的說，就是在某個 <td> 欄位裡埋入 <a> tag，但在 <tr> 裡的屬性多個 data-href 來記錄，最後再用 Javascript 埋入 <tr> click event。

看起來好像多埋了 <a> tag ，其主因是為了 SEO。

[Javascript] Bootstrap - 使用大量 Collapse 與 錨點(anchor/hashchange) 處理

最近在使用 Bootstrap 來包裝 Web UI ，有一卡車多的東西就先用 Collapse 包起來，而官網的範例：

• Bootstrap:Panels
• Bootstrap:Collapse

<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>

...
</div>

其中可以留意 collapseOne 的 class 屬性中有 in，這效果是預設展開。

然而，如果又額外做了個 Menu 維護這群 Panels/Collapse 時，希望點選某項時可以讓瀏覽器 scrollbar 移到恰當地點時，則需要處理一下：

HTML:

<div id="menu">
<ul>
<li><a data-toggle="collapse" data-target="#collapseOne" href="#collapseOne">collapseOne</a></li>
<li><a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo">collapseTwo</a></li>
<li><a data-toggle="collapse" data-target="#collapseThree" href="#collapseThree"> collapseThree </a></li>
</ul>
</div>

Javascript:

$(document).ready(function(){

$('a[href*=#]').click(function(e){
var target = $(this).attr('href');
//console.log($(this).attr('href'));
if( target[0] == '#' ) {
//target = target.substr(1);
if( $(target) && $(target).offset() && $(target).offset().top )
$('html,body').animate({
scrollTop: $(target).offset().top
}, 1000 );
}
});
});

然而，如果預設 Collopse 是關閉的，那上述可能無法正確顯示效果，則需要把錨點切換到預設不會關閉的地點，例如 panel-heading 的位置：

<div class="panel-group">
<div class="panel panel-default">
<div id="collapseOneHead" class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
....
</div>
</div>

...
</div>

而 Menu 的 href 則改為 collapseOneHead 即可：

<div id="menu">
<ul>
<li><a data-toggle="collapse" data-target="#collapseOne" href="#collapseOneHead">collapseOne</a></li>
<li><a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwoHead">collapseTwo</a></li>
<li><a data-toggle="collapse" data-target="#collapseThree" href="#collapseThreeHead"> collapseThree </a></li>
</ul>
</div>

註：由於採用 CodeIgniter 的關係，在 錨點(anchor) 的變化有點不如預期，所以改在 <a> 點擊上處理，而非用偵測 hashchange 事件。