Question

当使用XPages Mobile主题时，我添加到页面的CSS文件作为资源被添加到IBM提供的CSS文件之前作为移动主题的一部分。

示例：

<xp:this.resources>
  <xp:styleSheet href="css/font-awesome/css/font-awesome.css"></xp:styleSheet>
  <xp:styleSheet href="/mobile.css"></xp:styleSheet>
</xp:this.resources>

生成以下HTML

<link rel="stylesheet" type="text/css" href="/redpill/graph.nsf/css/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="/redpill/graph.nsf/mobile.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/dojoroot-1.8.1/dojox/mobile/themes/iphone/iphone.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/css/customMobile.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/css/customIphone.css">

有没有办法强制我自己的自定义控件在IBM之后添加？当我自己的CSS首先列在链中时，控制风格更具挑战性（但并非不可能）。

Answer 1

这个答案假设使用移动工具不会改变对象的加载方式。

我使用主题，我的CSS文件出现在生成的CSS文件之后。

<theme extends="webstandard">
    <resource>
        <content-type>text/css</content-type>
        <href>crmStyle.css</href>
    </resource>
</theme>

使用主题在页面上生成以下内容：

<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/dojoroot-1.8.1/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/dojoroot-1.8.1/ibm/domino/widget/layout/css/domino-default.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xsp.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xspLTR.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xspSF.css">
<link rel="stylesheet" type="text/css" href="/Path/crmStyle.css">

要测试具有移动主题的CSS文件，我执行了以下操作：

Select Mobile Theme

创建新页面m_Landing。添加了CSS文件作为资源。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex" xmlns:xc="http://www.ibm.com/xsp/custom" themeId="MyTheme">
    <xp:this.resources>
        <xp:styleSheet href="/crmStyle.css"></xp:styleSheet>
    </xp:this.resources>
</xp:view>

生成的HTML：

<head>
<title></title>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.1/dojo/dojo.js" djConfig="locale: 'en-us'"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.1/ibm/xsp/widget/layout/layers/xspClientDojo.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="/Path/crmStyle.css">
</head>

Answer 2

我找到了解决方案。我不确定它是否符合W3规范，但我可以通过将其作为XML代码放入XPage中来简单地添加Body中的链接。

<link rel="stylesheet" type="text/css" href="/redpill/graph.nsf/mobile.css"></link>

使用移动主题控制XPages CSS的顺序

2 个答案: