立即致電查詢!
電話: 3590-9591

jQuery網頁設計插件 Tangle互動網頁內容

Tangle Logo

今次介紹的jQuery網頁設計插件叫Tangle,單看字面很難想像它是做什麼,相信大部份人都沒有見過,筆者也是經朋友轉介才知道,筆者定期瀏覽的外國網站都不見其蹤影,相信插件的知名度不高。

Tangle的主要用途就是快速建立互動網頁內容,比如說文章中的某一個數值是根據另一個數值而計算出來,你可以在HTML簡單加上<span data-var="foo">的標碼,再在Javascript定義兩個數值的關係,用戶就可以簡單的變更數值而得到更新的內容。

以下是最簡單的範例︰

HTML:

When you eat <span data-var="cookies" class="TKAdjustableNumber"> cookies</span>,
you consume <span data-var="calories"> calories</span>.


Javascript:

var tangle = new Tangle(document, {
initialize: function () { this.cookies = 3; },
update: function () { this.calories = this.cookies * 50; }
});

網頁就會出現以下的顯示,用戶只要利用滑鼠變動cookies的數值,colories的數值就會自動更新了。
Tangle Text Demo

除了文字的表達,插件亦支援圖表的顯示。
Tangle Graph Demo

另外值得一贊的是有關的API說明文件十分清楚,這類小眾插件來說算是做得比較好的一個。有興趣的朋友可以到以下網址查看︰
Tangle互動網頁內容

原文網址:
https://www.aveego.com/html/o_39928_0_/jquery網頁設計插件-tangle互動網頁內容.html
原文作者︰

更多網頁設計新聞

我們的客戶

我們的客戶