設計一個允許自定義樣式的HTML/javascript控件

問這個問題的簡短方法是，「我應該如何設計可重用的html + js控件？設計一個允許自定義樣式的HTML/javascript控件

我喜歡在html和javascript中編寫ui控件以包含在網頁中。（認爲：小部件，照片選取器，股票行情，日曆等）。

我可以寫一個像樣的體系結構（oo設計，模型視圖演示，等..）我的JavaScript。我有JavaScript代碼和CSS在單獨的文件。託管控件的html標記只需引用腳本和樣式表文件，然後在onload事件中用父DOM元素初始化我的控件實例。

我與之奮鬥的是一個很好的模式，讓我自己的控件可以在其他地方重複使用，同時允許定製樣式，而無需每次都分割CSS文件。

對於每種用途（顏色，字體，大小等），都有一些特定的樣式屬性需要調整。但是控制的內部孩子的風格屬性並不意味着被改變。（例如，位置：絕對，邊界膠印，溢出）。當某些內部孩子需要根據控件的整體大小進行調整時，它會變得不可思議。

我可以使用什麼策略使重複使用輕鬆實現想要重新使用我的小部件而不必分離最初編寫的代碼或CSS文件的人？

來源

2011-01-07 selbie

正如其名稱暗示CSS應用於級聯，所以您可以定義一個具有核心樣式（不打算更改）的核心樣式的主CSS文件以及可更改的樣式的默認值，然後是一種用於這些值可供用戶用來定義自定義樣式。

覺得法師CSS，就像這樣的：

.widget-frame { 
    position: relative; 
    text-align: left; 
    margin: 5px; 
    padding: 10px; 
    color: #000000; 
    ... 
} 

.widget-frame h1 { 
    font-size: 2em; 
    margin-bottom: 3px; 
    color: 1E1E1E; 
    ... 
} 
...

，然後自定義CSS文件，就可能是這樣的：

.widget-frame { 
    /*Body of the widget*/ 
} 

.widget-frame h1 { 
    /*Title of the widget*/ 
} 
...

讓用戶改變顏色應該只不得不採取這個自定義的CSS文件，並添加例如color,background等...屬性的不同元素，將覆蓋主CSS屬性（請記住加載自定義CSS文件後主要覆蓋）

這是一個額外的文件加載，所以如果你需要極端的性能可能不是最好的方法，但在大多數情況下，開銷是最小的，這允許輕鬆地自定義組件，而不必擔心分離主CSS文件並挖掘元素/屬性以查看您想要更改的內容。

來源

2011-01-07 07:04:46 maid450

將CSS的佈局和樣式分開，以便任何可自定義的屬性（顏色，邊框，字體家族等）都集中在一個CSS文件中。

我還要挑一個共同的預修爲所有的類名 - 也就是。我的小部件，包裝，。我的小部件，標題等不強迫人寫的選擇是這樣的：

div.my-widget-wrapper div h1 span span.close a

時，他們可能只是做

a.my-widget-close-button

來源

2011-01-07 07:38:09 Stephen

設計一個允許自定義樣式的HTML/javascript控件

回答

相關問題