1

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 がチェーンの最初にリストされている場合、スタイルを制御するのはより困難です (ただし、不可能ではありません)。

4

2 に答える 2

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 ファイルをテストするために、次のことを行いました。

モバイルテーマを選択

新しいページ 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>
于 2013-09-23T13:13:18.207 に答える