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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn