webapp external css reference_html/css_WEB-ITnose-HTML Tutorial-php.cn

webapp external css reference_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:15

Original

1640 people have browsed it

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