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"
);
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();
...
});
|
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文件
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);
});
};
|
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!
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