Worklight 5.0.5 生成不可更改的内联 CSS
Posted
技术标签:
【中文标题】Worklight 5.0.5 生成不可更改的内联 CSS【英文标题】：Worklight 5.0.5 generates unalterable inline CSS 【发布时间】：2013-06-20 16:10:16 【问题描述】：我今天在将 Worklight 5.0.5 用于 android 移动项目时遇到了问题。如果有帮助的话，这个项目确实使用了 Apache Cordova、Dojo Mobile 和 Worklight 库。
问题在于，Worklight 在某些情况下会在构建期间自动生成不需要的内联 CSS。我找不到 Worklight 的哪个组件对此负责，也找不到在需要时如何更改或防止此行为。这似乎是一个小问题，但事实上它是内联 CSS，并且在构建期间，意味着我无法影响它！
通过 javascript 和 CSS 进行搜索，无论是我构建的还是为 Dojo 导入的，似乎都没有显示任何会添加 CSS 的内容。
示例：
我的 html 中有以下标记：
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="center segmentContainer">
构建后，在基于 WebKit 的浏览器 (Google Chrome) 中显示为：
<ul bartype="segmentedControl" class="mblTabBarSegmentedControl mblTabBar center segmentContainer mblTabBarNoIcons"
data-dojo-type="dojox.mobile.TabBar" id="dojox_mobile_TabBar_0"
widgetid="dojox_mobile_TabBar_0" style="padding-left: 78px;">
最后的内联 CSS，“padding-left”，是我试图寻找和破坏的。有谁知道是什么导致了这种行为，以及我可以如何改变或防止它？
【问题讨论】：
【参考方案1】：我不太了解这些技术，但如果您无法摆脱插入的 CSS，您可以在自己的 CSS 中使用 !important。例如：
.segmentContainer
padding-left: 0px !important;
这会将padding-left 语句的优先级移出正常的优先级顺序。通常我相信它是内联的，ids 然后是类，但是!important 你的类优先。
【讨论】：
【参考方案2】：您确定这个 Worklight 的构建过程添加了这种样式，而不是 Dojo 的 ?我会检查 Dojo 移动 api 以确保它没有默认添加。 OOTB Dojo，用于 TabBar 使用内联 CSS 生成以下标记。
<ul id="demoTabBar" dojotype="dojox.mobile.TabBar" single="true" iconbase="images/tabbar_all.png" fixed="bottom" role="tablist" class="mblTabBarTabBar mblTabBar mblFixedBottomBar mblTabBarNoText mblTabBarFill" widgetid="demoTabBar" style="bottom: 0px; padding: 0px;">
【讨论】：
我确实检查了 Dojo 的 API，甚至对包含的 JS 文件进行了一些挖掘。不幸的是，似乎没有任何东西可以插入这么大的“padding-left”。【参考方案3】：这是默认的 Dojo 样式。您在 AppName.html 中编写此代码来覆盖它：
...
<style>
.segmentContainer
//your personalization
</style>
</head>
<body>
......
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="segmentContainer">
【讨论】：
以上是关于Worklight 5.0.5 生成不可更改的内联 CSS的主要内容，如果未能解决你的问题，请参考以下文章
IBM Worklight 5.0.5：通过操作系统的通知句柄控制 Worklight 推送通知订阅/取消订阅
Worklight 5.0.5 插件中的 Dojo 调色板是不是存在拖放问题？