Webapp external css reference, webappcss reference

Webapp external css reference, webappcss reference

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" design = "device: mobile ">
<Div component = "$ UI/system/components/justep/model" xid = "model" style = "height: auto; left: 121px; top: 261px; "/>
<Div class = "container-fluid">
<H3 xid = "h31" class = "text-center"> <Div component = "$ UI/system/components/justep/tooBar"
Class = "x-toolbar form-inline x-toolbar-spliter"
Xid = "toolBar1">
<A component = "$ UI/system/compnents/justep/button"
Class = "btn-link btn-icon-left"
Label = "dynamically load text under UI2"
Xid = "innerTextBtn"
>
<I xid = "i3"/>
<Span xid = "span3" bind-click = "span3Click"> dynamically load text in UI2 </span>
</A>
</Div>
<Span xid = "span10"
Style = "display: block"
Class = "innerCss1"> internal css style 1 </span>
<Span style = "display: block"
Class = "innerCss2"
Xid = "span11"> internal css style 2 </span>
<Span style = "display: block"
Class = "outterCss1"
Xid = "span12"> external css style </span>

</Div>
</Div>

JS files

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

Note: As shown in the Code, in WeX5, use require ("css! The request parameters must comply with the following rules:
1. The parameter must be "css !" Constant starting;
2. the path supports the following situations ". /"or ".. the relative path starting with/(relative to the path of the current js file) does not require an extension. The absolute path starting with "$ UI/" ($ UI indicates the UI2 directory ), no extension is required. An absolute path starting with "http: //" must contain an extension (if there is an extension ).

• How to reference Text in WeX5

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

123456789101112131415161718

// Load the text file under UI2varinnerText1 = require("text!./innerText1.txt"); varModel = function(){    this.callParent();}; Model.prototype.modelLoad =function(event){    alert("innerText1 content: "+ innerText1);}; // Dynamically load the text file under UI2Model.prototype.innerTextBtnClick =function(event){    varpath = "text!./innerText2.txt";    require([path],function(content){        alert("innerText2 content: " + content);    });};

As shown in the above Code, when the Text file on the server is referenced in WeX5, the request ('text! Xx ') or require (['text! Xx '], function (p. Supported paths for referencing Text:
1. The relative path starting with "./" or "./" (relative to the path of the current js file) must contain the extension;
2. the absolute path starting with "$ UI/" ($ UI indicates the UI2 directory) must contain the extension;
Note: Cross-origin files cannot be loaded!

• Download Resources

Download: importCss case

Running Mode: Decompress the downloaded file to the corresponding directory of UI2 of WeX5; start the WeX5 service; enter http: // localhost: In chrome: 8080/x5/UI2/demo/misc/importCss. w