webapp external css reference_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 file

define(function(require){
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
//Load the css file under ui2
require("css!./innerCss1").load();
require ("css!$UI/demo/misc/importCss/innerCss2").load();

//Load the text file under UI2
var innerText1=require("text!./innerText1. txt");
var Model = function(){
this.callParent();
};

Model.prototype.modelLoad=function(event){
alert( "innertText1 content:" innerText1);
};
//Dynamic loading of text files under UI2
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 file:

{message: "this is innerText1"}

x5 official explanation:

Code Implementation:

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();            ... });

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" ); //Load the css file under UI2 require( "css !./innerCss1" ).load(); require( "css!$UI/demo/misc/importCss/innerCss2" ).load(); //Load the css file from the external network require( "css! http://wex5.com/cn/wp-content/uploads/2015/04/outterCss1.css" ).load(); ... });

Note: As shown in the code, in WeX5, the css file is referenced through require("css!xxx").load(). The parameters of require must comply with the following rules:
1. The parameter must be a constant starting with "css!";
2. The path supports the following situations: relative paths starting with "./" or "../" (relative to the path where the current js file is located ), no extension is required; the absolute path starting with "$UI/" ($UI represents the UI2 directory) does not require an extension; the absolute path starting with "http://" must have an extension (if any extension).

How does WeX5 reference Text

In WeX5, if you want to download a server-side text file, it is also achieved through the require mechanism, for example:

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);      }); };

1 2

3

4

5

6

7

8

9 10 11 12 13 14 15 16 17 18

//Load text files under UI2 var innerText1 = require( "text!./innerText1.txt" ); var Model = function (){ this .callParent(); }; Model.prototype.modelLoad = function (event){ alert( "innerText1 content: " innerText1); }; //Dynamic loading of text files under UI2 Model.prototype.innerTextBtnClick = function (event){ var path = "text!./innerText2.txt" ; require([path], function (content){ alert( "innerText2 content: " content); }); };

As shown in the above code, in WeX5, when referencing the Text file on the server, it is implemented through require('text!xx') or require(['text!xx'], function(p){}). Path support for referencing Text: 1. Relative paths starting with "./" or "../" (relative to the path where the current js file is located) must have an extension; 2. Starting with "$ The absolute path starting with "UI/" ($UI represents the UI2 directory) must have an extension; Note: Loading cross-domain files is not supported! Resource download Download: importCss case Operation method: Extract the downloaded file to the corresponding directory of WeX5 UI2; start the WeX5 service ; Enter in the chrome browser: http://localhost:8080/x5/UI2/demo/misc/importCss/importCss.w