xmlplus組件設(shè)計系列之圖標（ICON）(1）
網(wǎng)頁上使用的圖標分可為三種：文件圖標、字體圖標和 SVG 圖標。對于文件圖標，下面僅以 PNG 格式來說明。
PNG 圖標
對于 PNG 圖標的引用，有兩種方式。一種是直接由 HTML 元素 img 的 src 屬性給出。下面是一個簡單的示例。
Icon: {
css: "#icon { width: 68px; height: 68px; }",
xml: "<img id='icon'/>",
fun: function (sys, items, opts) {
this.attr("src", this + ".png");
}
}
這里假定圖標文件與組件所在文件在同級目錄中，于是可以按如下的方式便捷地引用所需的圖標。注意組件 Icon 巧妙地使 id 屬性值與圖片文件名關(guān)聯(lián)，這樣可以避免創(chuàng)建額外的屬性。
Example: {
css: "#example > * { padding: 10px; background: #F9F9F9; }",
xml: "<div id='example' class='bs-example'>\
<Icon id='msg'/>\
<Icon id='home'/>\
<Icon id='contact'/>\
</div>"
}
另一種引用 PNG 圖標的方式是給相應(yīng)的對象添加 background-image 樣式，并且由樣式中給出圖標所在路徑。下面是一個簡單的示例。
Icon: {
css: "#icon { width: 68px; height: 68px; }",
xml: "<div id='icon'/>",
fun: function (sys, items, opts) {
this.css("background-image", this + ".png");
}
}
這種形式與前面由 img 標簽給出的圖標有許多相似之處。不同的是，前者動態(tài)指定的是 img 標簽的 src 值 ，而后者動態(tài)指定的則是 div 元素的 css 樣式。該組件與前面給出的 Icon 組件的使用方式完全一致，這里就不重復(fù)了。
對于以上給出的組件 Icon，使用的是離散的圖標文件。實際應(yīng)用中，通常給出的是一個包含許多圖標的 PNG 文件。這種情況下該如何構(gòu)建圖標組件呢？請看下面給出的一種較為實用的方案。
Icon: {
css: "#msg { background-position: 0 0; }\
#home { background-position: -48px 0; }\
#contact { background-position: -96px 0; }\
#icon { width: 68px; height: 68px; background-image: url(icons.png); }",
xml: "<div id='icon'/>",
fun: function (sys, items, opts) {
sys.icon.addClass("#" + this);
}
}
此組件在樣式項 css 中直接給出了圖標文件所在路徑，以及各種圖標在文件內(nèi)的位置。并且圖標實例 id 與相應(yīng)圖標類名對應(yīng)。當(dāng)然，組件的使用方式與前面給出的組件是一致的。
下面給出的是另一種組件設(shè)計方案，它把位置信息移到了函數(shù)項中。此方案是可行的，但組件的執(zhí)行效率不如前者。該組件每次實例化都要生成位置信息一次，而對于前者，由于樣式項在組件實例化時，僅生成一次，所以保證了組件的執(zhí)行性能。
Icon: {
css: "#icon { width: 48px; height: 48px; background-image: url(icons.png); }",
xml: "<div id='icon'/>",
fun: function (sys, items, opts) {
var positions = {
"msg": "0 0",
"home": "-48px 0",
"contact": "-96px 0"
}
sys.icon.css("background-position", positions[this]);
}
}
字體圖標
字體圖標通過引入包含圖標的字體文件，將圖標像文字一樣使用。它與 PNG 圖標相比，最關(guān)鍵一點在于它的矢量性。字體圖標的引用方式有兩種：通過類名的引用方式以及直接引用 unicode 的方式。
通過類名引用
這種類型的圖標內(nèi)容定義在樣式項中，HTML 元素通過類名進行關(guān)聯(lián)。
Msg: {
css: "#msg { font-size: 48px; width: 68px; height: 68px; line-height: 48px; }\
#msg:before { content: '\\e608'; }",
xml: "<div id='msg'/>"
}
直接引用unicode
這種引用方式與前一種在本質(zhì)上沒什么不同，它只是將圖標內(nèi)容由樣式項轉(zhuǎn)移到視圖項中而已。
Home: {
css: "#home { font-size: 48px; width: 68px; height: 68px; line-height: 48px; }",
xml: "<div id='home'><div/>"
}
下面給出的示例展示了兩種不同的引用字體圖標的方式。注意，此示例簡化了樣式項中與兼容性相關(guān)的內(nèi)容，詳情請查閱配套源碼。
Example: {
css: "@font-face { font-family: 'iconfont'; url('iconfont.ttf') format('truetype');}\
#msg, #home { font-family: 'iconfont'; font-style:normal; }\
#example > * { display: inline-block; padding: 10px; background: #F9F9F9; }",
xml: "<div id='example'>\
<Msg id='msg'/>\
<Home id='home'/>\
</div>"
}
SVG 圖標
最后來看看我們的重頭戲，如何封裝以及使用 SVG 圖標。在 xmlplus 中，SVG 圖標是推薦的圖標使用形式，它允許直接嵌入代碼，無需額外引用相關(guān)文件。
通過 xlink:href 引用
對于這種方式，首先你需要一個 svg 圖標集，其包含的內(nèi)容大概是下面這樣子。
<svg>
<symbol id="icon" width='48px' height='48px' viewBox='0 0 24 24'>
<g><polygon points='9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6'/></g>\
</symbol>
<!-- 還可以有更多的symbol -->
</svg>
svg 圖標集有兩種存在方式，一個是以文件形式存在，這時 xlink:href 屬性值需要明確指明文件的 url，下面是一個示例。
<svg> <use xlink:/>\ </svg>
另一種形式是，圖標集直接存在于頁內(nèi)，這種方式叫做頁內(nèi)引用，它無需指明 url，只要指定相應(yīng) symbol 的 id 就好了。
<svg> <use xlink:href='#icon'/>\ </svg>
對svg 圖標的直接封裝
相對于通過 xlink:href 引用圖標，使用 xmlplus 的組件化技術(shù)直接封裝會是一種更好的方式。請看下面的一個 SVG 圖標組件。
Icon: {
xml: "<svg width='48px' height='48px' viewBox='0 0 24 24'>\
<g><polygon points='9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6'/></g>\
</svg>",
fun: function (sys, items, opts) {
this.attr("fill", '' + this);
}
}
這是一個鉤形圖標，組件中僅包含視圖項以及函數(shù)項成份。根據(jù)函數(shù)項的內(nèi)容可以知道，圖標顏色由組件實例的 id 屬性值給出。下面來看看如何使用該圖標。
Example: {
css: "#example > * { padding: 10px; background: #F9F9F9; }\
#example > *:hover { fill: #fff; background: #563d7c; }",
xml: "<div id='example'>\
<Icon id='red'/>\
<Icon id='green'/>\
<Icon id='blue'/>\
</div>",
fun: function (sys, items, opts) {
sys.example.on("click", "*", e => console.log(this + " clicked"));
}
}
此示例展示了三個不同顏色的圖標，并且偵聽了圖標的點擊事件，打開瀏覽器控制臺，當(dāng)點擊不同圖標時，可以看到相應(yīng)的輸出。
另外，有一種常見的 SVG 圖標的封裝方式，它把 SVG 文本經(jīng)過 URL 編碼后直接在 img 的 src 屬性或者樣式 background-image 中給出。就像下面這樣子。
Icon: {
css: "#icon {width: 16px; height: 16px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D...")},
xml: "<div id='icon'/>"
}
這種方式與上一種方式比起來，有兩個缺點：其一，你看不出 SVG 的源文件。其二，你失去了對 SVG 圖標的操作權(quán)。當(dāng)然，這種方式也并非不能用。如果你不需要對圖標進行后續(xù)的操作，使用這種方式也是可以接受的。另外，與之相似的一種圖標使用方式是對圖標 base64 編碼后的內(nèi)嵌引用。下面是一個簡單的示范：
Icon: {
xml: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAA..." />"
}
這種方式與上一種 SVG 圖標的封裝方式是類似的。不過相對于 SVG 圖標組件的直接封裝，你同樣失去了對圖標的操作權(quán)。
本系列文章基于 xmlplus 框架。如果你對 xmlplus 沒有多少了解，可以訪問 www.xmlplus.cn。這里有詳盡的入門文檔可供參考。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
早該知道的7個JavaScript技巧，有了這7個JavaScript技巧，事半功倍，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章為大家詳細主要介紹了JavaScript實現(xiàn)垂直滾動條效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
在javascritp中，有兩個關(guān)于定時器的專用函數(shù)，下面講解一下兩個定時器，有需要的朋友可以參考一下2013-10-10
最近在寫插件的過程中，需要使用 JS 判斷是否有滾動條，搜了一下，大致方法都差不多，但都有些啰嗦，代碼不夠簡潔。最終通過參考不同方法，寫了一個比較簡單的方法2018-04-04
JavaScript判斷一個變量是否是數(shù)組的五種方式總結(jié)
在 JavaScript 編程中,我們經(jīng)常需要對不同類型的變量進行判斷和處理,其中,判斷一個變量是否是數(shù)組是一項基本且常見的任務(wù),在本篇博客中,我們將介紹幾種常用的方式來判斷一個變量是否是數(shù)組,并探討它們的優(yōu)缺點以及適用場景,需要的朋友可以參考下2023-11-11
JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組
Array filter() 方法會跳過稀疏數(shù)組中缺少的元素，它的返回數(shù)組總是稠密的。這篇文章給大家介紹了JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組的相關(guān)知識，需要的朋友參考下2018-02-02
這篇文章主要介紹了JavaScript乘法口訣表的簡單實現(xiàn)，文中給出了詳細的示例代碼，這樣對大家的理解和學(xué)習(xí)更有幫助，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
目前一直在學(xué)習(xí)WEB前端的知識。下面貼出最近完成的一個可排序表格.2010-12-12
uniapp自定義頁面跳轉(zhuǎn)loading的實現(xiàn)代碼
有些頁面加載起來比較慢,為了加強用戶體驗效果,所以一般都會做一個頁面加載等待的提示,頁面加載完成后消失,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義頁面跳轉(zhuǎn)loading的實現(xiàn)代碼,需要的朋友可以參考下2023-06-06
下面小編就為大家分享一篇webpack打包并將文件加載到指定的位置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02