添加CSS自定義可重複使用的功能

我創建了jQuery的一個功能，它可以讓我建立一個燈箱如下：添加CSS自定義可重複使用的功能

var lightbox = create_lightbox(params);

我想擴大這個功能，所以我可以添加自定義CSS來它並使它看起來就像任何特定情況下的感覺一樣。我寧願能夠做到如下因素：

lightbox.css = { 
    "background-color" : "red", 
    etc... 

}

什麼是做到這一點的最佳方式，以及如何，我會遍歷我的函數裏面的CSS元素？

tyvm

來源

2011-12-11 vincent

創建你的函數取一個對象與所有你想要添加到您的收藏夾的CSS屬性的值，然後加入您的默認值與jQuery的擴展。

function create_lightbox(params, css){ 
    css = $.extend({ "background-color": "default val"}, css); 

    lightbox.css = css; 
}

如果你真的想循環遍歷所有的CSS屬性，你可以在循環使用的

function create_lightbox (params, css) { 
    css = $.extend({ "background-color": "default val"}, css); 

    for (cssKey in css) 
    lightbox.css[cssKey] = css[cssKey]; 
}

來源

2011-12-11 19:45:14

只需使用CSS爲CSS應使用：在<風格> - 標籤或鏈接的.css文件。 lightbox插件使用以下dom樹;

<div id="jquery-lightbox"> 
    <div id="lightbox-container-image-box"> 
     <div id="lightbox-container-image"> 
      <img id="lightbox-image" /> 
      <div id="lightbox-nav">...</div> 
     </div> 
    </div> 
</div>

因此，然後風格你想要的風格。我想你不想在每個盒子上使用不同的風格？

來源

2011-12-11 19:52:53 Bergi

+1。在CSS沒有問題的時候切勿使用JavaScript。 –

您可以將元素屬性添加到收藏類，所以你可以修改值了構造：

function lightbox() { 
    this.element = document.ccreateElement("div") 
    this.light = "light"; 
    this.box = "box"; 
} 

var newLightBox = new lightbox(); 
newLightBox.element.style.background = "#000";

來源

2011-12-11 20:09:54

添加CSS自定義可重複使用的功能

回答

相關問題