【jQuery】避免冒泡事件

利用jQuery製作網頁Tab效果的時候
想要利用 $('.class').click(function(event) {}) 這個函式來處理時
被卡住
看一下HTML部分

<div class="menu">
    <ul>
        <li><a target="#">Menu</a>
          <ul>
            <li><a target="a.html">list-1</a></li>
            <li><a target="b.html">list-2</a></li>
            <li><a target="c.html">list-3</a></li>
          </ul>
        </li>
    </ul>
</div>

後來去查了jQuery API發現因為有冒泡事件的發生
導致第二層選單的Tab效果在IE 9可以正常運作
但是在Google Chrome會發生錯誤
後來找到一個方法來解決冒泡事件
就是

event.stopPropagation()

先看一下jQuery API如何描敘他
Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.
把這個方法放進 click function 內，就可以解決Chrome失效的問題
來看一下完成之後的jQuery code

$('.menu li').click(function(event) {
    var $this = $(this);
    /* 找到連結a中的targer標籤值 */
    _clickTab = $this.find('a').attr('target'); 
    if (_clickTab=="#")
        ;
    else
        $("#content").load(_clickTab);
    event.stopPropagation();
})

【HTML5】RGraph demos bar01

本文介紹使用HTML5 canvas標籤搭配RGraph函式
先看一下RGraph官網介紹
Title:Build faster websites with RGraph

內文
RGraph is a HTML5 charts library written in Javascript
that uses the HTML5 canvas tag to draw
and supports over twenty different types of charts.

<script>
        window.onload = function ()
        {
            var data = [5,4,1,6,8,5,3]; //data也可以是二維陣列           

            // Create the br chart. The arguments are the ID of the canvas tag and the data
            var bar = new RGraph.Bar('cvs', data);
            bar.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']); //橫座標項目
            bar.Set('chart.background.barcolor1', 'white');
            bar.Set('chart.background.barcolor2', 'white');
            bar.Set('chart.background.grid', true); //是否顯示格線
            // bar.Set('chart.colors', ['red']); //控制長條圖顏色

            // Now call the .Draw() method to draw the chart
            bar.Draw();
        }
</script>

HTML的部分就很簡單
主要是使用HTML 5的canvas標籤

<h1>A basic Bar chart</h1>
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

下圖則是執行結果