黑暗jQuery工具包1-動態加入預設Style設定
0 | 9,259 |
對我來說,Javascript在處理CSS上一直有一個小困擾...
一般在習慣上,為了方便開發人員修改,多半會將Style設定獨立放在.css檔案裡,應用者可視需要覆寫或修改之。但有蠻多時候,應用者根本不打算更動CSS內容,只想直接沿用預設CSS設定,但部署時還是少不了要Copy相對應的.css檔案,網頁也必須多加上<style src="/img/loading.svg" data-src="...">宣告。
我總覺得,最理想的方式是將預設css與js融和在一個檔案裡。當開發者想自行定義CSS樣式,可將其寫在.css中加以引用,或在HTML中以<style>逕行宣告;若只想用預設內容,則只需參照.js就大功告成。
今天遇到類似需求,索性寫了幾個小函數,試著實現上述想法。
我的設計概念是這樣的: 先透過document.styleSheets.cssRules比對某個CSS Selector(例如: div.cCountryPicker),若已被定義過,表示網頁已透過參照.css檔或直接宣告<style type="text/css">方式定義了div.cCounterPicker,此時就不需加入預設的div.cCountryPicker樣式規則;反之,若沒有定義該規則,則透過$("head").append("<style type=\"text/css\">....")的方式加入Style宣告。
程式碼如下:
(PS: 我規劃用jQuery.Darkthread.*蒐集我陸續開發出來的工具函數,最前面的$.extend用來將多個.js中宣告的jQuery.Darkthread.*函數彙整在一起)
/*
** Darkthread's Tools for jQuery ver 1.0 **
by Jeffrey, 2010-02-25, http://blog.darkthread.net
=======================================================
checkStyle: to check if specific style selector is defined
addStyles: add <style type="text/css"> dynamically
addDefaultStyles: if specific style selector isn't defined, add style setting
*/
jQuery.extend(jQuery, { Darkthread: {} });
jQuery.extend(jQuery.Darkthread, {
tools: {
//ruleSelector sample: a:hover, .myClass, #someId
checkStyle:
function(ruleSelector) {
//REF: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml
var cssCol = document.styleSheets;
ruleSelector = ruleSelector.toLowerCase();
for (var i = 0; i < cssCol.length; i++) {
var rules = cssCol[i].cssRules || cssCol[i].rules;
for (j = 0; j < rules.length; j++)
if (rules[j].selectorText.toLowerCase() == ruleSelector)
return true;
}
return false;
},
/*styleDictionary sample:
{
"a:hover": { "background-color": "red", "color":"yellow" },
"#dvTest": { "border", "solid blue 1px" }
}
Note: it's for <style> declaration, not for jQuery.css, so don't use
backgourndColor instead of "background-color"
*/
addStyles:
function(styleDictionary) {
var sb = [];
for (var selector in styleDictionary) {
sb.push(selector + " {");
var props = styleDictionary[selector];
for (var p in props) {
sb.push(p + ":" + props[p] + ";");
}
sb.push("}");
}
$("head").append("<style type=\"text/css\">\n" +
sb.join("\n") + "\n</style>");
},
addDefaultStyles:
function(ruleSelector, styleDictionary) {
if (!$.Darkthread.tools.checkStyle(ruleSelector))
$.Darkthread.tools.addStyles(styleDictionary);
}
}
});
應用方式挺簡單的,將以下的程式寫進.js,等於將預設的.css一起藏進.js裡,就不必再多搞出一個預設用途的.css檔案囉!
$.Darkthread.tools.addDefaultStyles(".dttl_BookingBlock", {
".dttl_BookingBlock": {
float: "left", position: "absolute",
margin: "0px", padding: "0px", height: "100%",
"font-size": "9pt", "background-color": "#dddddd",
"border-left": "solid #444444 1px",
"border-right": "solid #444444 1px"
},
".ddtl_Timeline": { border: "solid red 1px" }
});
(以上的程式碼,會在網頁本身沒有宣告.dttl_BookingBlock且所有參照的.css中也沒有該宣告時,加入.dttl_BookingBlock及.dttl_Timeline兩條CSS規則,賦與預設Style設定。)
Comments
Be the first to post a comment