2012-06-06 5 views
2

Можно ли добавить условную таблицу стилей на xpage.Добавить условную таблицу стилей CSS в xpage

Совершено как это в HTML:

<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> 

Хотя о добавлении с вычисленным полем, создаваемым в HTML и код Javascript, как:

return '<!--[if lt IE 8]><link rel=\"stylesheet\" href=\"../../blueprint/ie.css\" type=\"text/css\" media=\"screen, projection\"><![endif]-->' 

, но тогда он будет включен в теле страницы, а не заголовок с другими таблицами стилей.

Необходим для доказательства концепции, составленной с использованием http://blueprintcss.org.

ответ

5

тема XPage будет большим для этого. В комплект поставки заметок входит пример.

перейти к C: \ каталог Notes \ XSP \ НФС \ Themes

сделать копию webStandard.theme, переименовывать является webStandard. xml и откройте в редакторе по вашему выбору, это покажет вам много примеров того, что может сделать тема. Применить атрибуты, добавлять ресурсы, вычислить их с помощью выражений и т.д.

сниппета:

<resource rendered="#{javascript:context.isDirectionRTL()}"> 
     <content-type>text/css</content-type> 
     <href>/.ibmxspres/global/theme/webstandard/xspRTL.css</href> 
    </resource> 

    <!-- IE Specific --> 
    <resource rendered="#{javascript:context.getUserAgent().isIE(0,6)}"> 
     <content-type>text/css</content-type> 
     <href>/.ibmxspres/global/theme/webstandard/xspIE06.css</href> 
    </resource> 
    <resource rendered="#{javascript:context.getUserAgent().isIE(7,8)}"> 
     <content-type>text/css</content-type> 
     <href>/.ibmxspres/global/theme/webstandard/xspIE78.css</href> 
    </resource> 
+0

Это, вероятно, лучший способ сделать это. См. Также здесь (http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_themes) для некоторых рекомендаций по использованию тем. –

5

Вы можете использовать вынесенное свойство с SSJS, чтобы показать элемент для IE только:

визуализации = "# {JavaScript:. Context.getUserAgent() isIE()}"

Тогда ваш ресурс CSS будет добавлен только к сгенерированному ответу HTML, если XPage открывается в Internet Explorer.

EDIT:
В вашем случае это должно соответствовать вашим требованиям:

<xp:this.resources> 
    <xp:styleSheet href="../../blueprint/ie.css" 
     rendered="#{javascript:context.getUserAgent().isIE(0,7)}" 
     media="screen, projection"> 
    </xp:styleSheet> 
</xp:this.resources> 
+0

Круто! Это сделало трюк с доказательством концепции. Благодаря! – Derek

Смежные вопросы