我目前正在开发一个可以嵌入页面的小部件。但是,在嵌入时,它会影响嵌入页面的样式(字体、文本、布局等)。
我想知道 Clearspring 和其他小部件框架如何封装它们的小部件,以免影响嵌入页面。
谢谢。
制作您的小部件,例如在一个具有唯一 Id(或类,如果有多个)的 div 下,它最不可能与主机页面上的其他部件发生冲突。一个很好的例子可能是#company-widjet-name
. 看看 jQuery UI 是如何做到的(.ui-widget input
)。
然后您可能需要执行某种本地化重置,以避免父页面的 CSS 填满您的设计。修改诸如Eric Meyer 的重置之类的东西以适应。请避免,#uniqueId * { padding: 0, margin: 0 }
因为它会导致头痛。
只要你做
#uniqueId a {
property: value;
}
特异性应该足够强以正确设置元素的样式,而不会让主机页面的 CSS 无意中更改它。