HTML5 自訂資料屬性

》HTML5 全域屬性

HTML5 導入了一個全域的通用屬性 data-* ,這個屬性允許我們在任何的 HTML5 標籤裏面,嵌入自訂的資料屬性,jQuery Mobile 大量的運用了這個屬性,這一篇先討論相關的概念。

自訂資料屬性以 data- 為字首,然後緊接著連接符號 - 後方,加上自訂的屬性名稱,例如 data-title ,用來表示一個儲存 title 資料的自訂資料屬性,而 title 則被作為存取屬性對應名稱,一個元素可以接受數個不同的自訂屬性,考慮以下的配置:

<div id="mybook"
data-title="HTML5完美風暴" data-isbn="9789866432606"
dat-price="1000" data-author="呂高旭">
</div>

這裏配置了一個 <div> 標籤,用來表示「HTML5 完美風暴」這本電腦書的相關資訊,其中的四個自訂資料屬性意義如下表:

data 屬性
說明
data-title
書籍名稱。
data-isbn
書籍 ISBN 碼。
data -price
書籍價格。
data-author
作者姓名。

一旦完成配置,自訂資料屬性就可以如同一般屬性進行存取,例如當你想要取得上述 <div> 標籤中的 data-title 屬性值,可以透過以下的 jQuery 語法:

$('#book').attr('data-title')

我們來看一個網頁範例。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
        $(document).ready(
            function () {                
                var bookInfoString = '書名:' +
                $('#book').attr('data-title') + '<br/>ISBN' +
                    $('#book').attr('data-isbn') + '<br/>價格:' +
                    $('#book').attr('data-price') + '<br/>作者:' +
                    $('#book').attr('data-author');
                $('#bookInfo').html(bookInfoString);
            }
        );
    </script>
</head>
<body>
    <div id="book"
data-title="HTML5完美風暴"
data-isbn="9789866432606"
data-price="1000"
data-author="呂高旭">
        <img style="float: left; padding-left: 20px;"
              src="img/cover_v3_CS4_02.jpg" />
        <div id="bookInfo" style="float: left; padding-left: 20px;">
        </div>
    </div>
</body>
</html>

當網頁載入完成之後,逐一透過 attr() 取得指定的自訂屬性值,並且將其合併,最後得到一個長字串,將其設定給畫面中的另外一個名稱為 bookInfo 的 <div> 標籤,成為其 HTML 內容,最後的畫面如下:

我們順利的將資料屬性的內容取出,並且顯示在畫面上。自訂資料屬性的用途相當廣泛,你可以將其運用在儲存特定元素的相關資料,以方便後續的 JavaScript 存取,甚至直接儲存伺服器端的資料,避免不必要的伺服器端往返,另外一方面, jQuery Mobile 大量的運用了自訂資料屬性的設計,這是我們介紹此屬性最主要的目的。

》HTML5 全域屬性

沒有留言: