WebApp references to external CSS

W File:

<?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" >

<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= "Dynamic loading of text under UI2"
Xid= "Innertextbtn"
>
<i xid= "i3"/>
<span xid= "span3" bind-click= "Span3click" > UI2 under Dynamic Loading text</span>
</a>
</div>
<span xid= "Span10"
Style= "Display:block"
class= "InnerCss1" > Internal CSS style one </span>
<span style= "Display:block"
Class= "InnerCss2"
Xid= "Span11" > Internal CSS style 2</span>
<span style= "Display:block"
Class= "OutterCss1"
Xid= "Span12" > External CSS Styles </span>

</div>
</div>

JS file

Define (function (require) {
var $ = require ("jquery");
var justep = require ("$UI/system/lib/justep");
Loading a 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);
};
Dynamically loading the text file 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:

12345678910111213

define(function(require){    var$ = require("jquery");    varjustep = 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();        ...});

Description: As shown in the code, in WeX5, the CSS file is referenced by require ("css!xxx"). Load (), and the require parameters must conform to the following rules:
1. The parameter must be "css!" The constant at the beginning;
2. The path supports the following situations: "./" or ". /"Relative path at the beginning (as opposed to the path of the current JS file), no extension required, absolute path beginning with" $UI/"($UI represents the UI2 directory), no extension required, absolute path beginning with" http://"and must have an extension (if there is an extension).

• WeX5 How to reference text

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

123456789101112131415161718

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

As shown in the code above, WeX5, when referencing the server's text file, is implemented through require (' text!xx ') or require ([' text!xx '], function (p) {}). The path referencing text supports:
1. with "./" or ". /"Relative path at the beginning (as opposed to the path where the current JS file is located), must have an extension;
2. Absolute path beginning with "$UI/" ($UI represents UI2 directory), must have an extension;
Note: Loading cross-domain files is not supported!

• Resources download

Download: Importcss case

Operation mode: Extract the downloaded files to WeX5 UI2 corresponding directory; start the WeX5 service; in Chrome, enter: HTTP://LOCALHOST:8080/X5/UI2/DEMO/MISC/IMPORTCSS/IMPORTCSS.W

WebApp references to external CSS