webapp 外部css的引用_html/css_WEB-ITnose

w文件：

 
 

 
 

   

   

         class="x-toolbar form-inline x-toolbar-spliter" 
         xid="toolBar1">
                    class="btn btn-link btn-icon-left"
            label="动态加载UI2下的text"
            xid="innerTextBtn"
          >
           
            动态加载UI2下的text    
       
     

                 style="display:block" 
           class="innerCss1">内部css样式一
                  class="innerCss2"
            xid="span11">内部css样式2
                    class="outterCss1"
              xid="span12">外部css样式
     
 

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官方讲解：

代码实现：

1 2 3 4 5 6 7 8 9 10 11 12 13

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();        //加载外网的css文件      require( "css! http://wex5.com/cn/wp-content/uploads/2015/04/outterCss1.css" ).load();            ... });

说明：如代码所示，在WeX5中，通过require(“css!xxx”).load()的方式引用css文件，require的参数必须符合以下规则：
1. 参数必须是以”css!”开头的常量;
2. 路径支持以下几种情况：以”./”或”../”开头的相对路径（相对于当前js文件所在的路径），不需要扩展名；以”$UI/”开头的绝对路径（$UI表示UI2目录），不需要扩展名；以”http://”开头的绝对路径，且必须带扩展名（如果有扩展名）。

WeX5如何引用Text

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//加载UI2下的text文件 var innerText1 = require( "text!./innerText1.txt" );   var Model = function (){      this .callParent(); };   Model.prototype.modelLoad = function (event){      alert( "innerText1 content: " + innerText1); };   //动态加载UI2下的text文件 Model.prototype.innerTextBtnClick = function (event){      var path = "text!./innerText2.txt" ;      require([path], function (content){          alert( "innerText2 content: "  + content);      }); };

如上代码所示，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