webapp 外部css的引用

w文件：

<?xml version="1.0" encoding="UTF-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window" design="device:mobile">

<div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;left:121px;top:261px;"/>

<div class="container-fluid">

<h3 xid="h31" class="text-center"></h3>

<div component="$UI/system/components/justep/tooBar/tooBar"

class="x-toolbar form-inline x-toolbar-spliter"

xid="toolBar1">

<a component="$UI/system/compnents/justep/button/button"

class="btn btn-link btn-icon-left"

label="动态加载UI2下的text"

xid="innerTextBtn"

>

<i xid="i3"/>

<span xid="span3" bind-click="span3Click">动态加载UI2下的text</span>

</a>

</div>

<span xid="span10"

style="display:block"

class="innerCss1">内部css样式一</span>

<span style="display:block"

class="innerCss2"

xid="span11">内部css样式2</span>

<span style="display:block"

class="outterCss1"

xid="span12">外部css样式</span>



</div>

</div>

JS文件

define(function(require){

var $ = require("jquery");

var justep = require("$UI/system/lib/justep");

//加载ui2下的css文件

require("css!./innerCss1").load();

require("css!$UI/demo/misc/importCss/innerCss2").load();

//加载UI2下的text文件

var innerText1=require("text!./innerText1.txt");

var Model = function(){

this.callParent();

};

Model.prototype.modelLoad=function(event){

alert("innertText1 content:"+innerText1);

};

//动态加载UI2下的text文件

Model.prototype.innerTextBtnClick = function(event){

};

Model.prototype.span3Click = function(event){

var path = "text!./innerText1.txt";

require([path], function(content){

alert("innerText2 content: " + content);

});

};

return Model;

});

css1：

.innerCss1{

background-color:red;

}

css2：

.innerCss2{

background-color:yellow;

}

txt文件：

{message:"this is innerText1"}

x5官方讲解：

代码实现：

说明：如代码所示，在WeX5中，通过require(“css!xxx”).load()的方式引用css文件，require的参数必须符合以下规则：

1. 参数必须是以”css!”开头的常量;

2. 路径支持以下几种情况：以”./”或”../”开头的相对路径（相对于当前js文件所在的路径），不需要扩展名；以”$UI/”开头的绝对路径（$UI表示UI2目录），不需要扩展名；以”http://”开头的绝对路径，且必须带扩展名（如果有扩展名）。

WeX5如何引用Text

在WeX5中，如果想下载服务端文本文件，也是通过require机制实现的，例如：

如上代码所示，WeX5中，引用服务端的Text文件时，是通过require(‘text!xx’)或require([‘text!xx’], function(p){})实现的。引用Text的路径支持：

1. 以”./”或”../”开头的相对路径（相对于当前js文件所在的路径），必须带扩展名；

2. 以”$UI/”开头的绝对路径（$UI表示UI2目录），必须带扩展名；

注意：不支持加载跨域的文件！

资源下载

下载：importCss案例

运行方式：将下载的文件解压到WeX5的UI2相应的目录中；启动WeX5服务；在chrome浏览器中输入：http://localhost:8080/x5/UI2/demo/misc/importCss/importCss.w