">
当前位置:Gxlcms > html代码 > webapp外部css的引用_html/css_WEB-ITnose

webapp外部css的引用_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:49人阅读

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文件

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();

//加载UI2下的text文件
var innerText1=require("text!./innerText1.txt");
var Model = function(){
this.callParent();
};

Model.prototype.modelLoad=function(event){
alert("innertText1 content:"+innerText1);
};
//动态加载UI2下的text文件
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文件:

{message:"this is innerText1"}



x5官方讲解:

代码实现:

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();

...

});

说明:如代码所示,在WeX5中,通过require(“css!xxx”).load()的方式引用css文件,require的参数必须符合以下规则:
1. 参数必须是以”css!”开头的常量;
2. 路径支持以下几种情况:以”./”或”../”开头的相对路径(相对于当前js文件所在的路径),不需要扩展名;以”$UI/”开头的绝对路径($UI表示UI2目录),不需要扩展名;以”http://”开头的绝对路径,且必须带扩展名(如果有扩展名)。

  • WeX5如何引用Text

  • 在WeX5中,如果想下载服务端文本文件,也是通过require机制实现的,例如:

    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);

    });

    };

    如上代码所示,WeX5中,引用服务端的Text文件时,是通过require(‘text!xx’)或require([‘text!xx’], function(p){})实现的。引用Text的路径支持:
    1. 以”./”或”../”开头的相对路径(相对于当前js文件所在的路径),必须带扩展名;
    2. 以”$UI/”开头的绝对路径($UI表示UI2目录),必须带扩展名;
    注意:不支持加载跨域的文件!

  • 资源下载

  • 下载:importCss案例

    运行方式:将下载的文件解压到WeX5的UI2相应的目录中;启动WeX5服务;在chrome浏览器中输入:http://localhost:8080/x5/UI2/demo/misc/importCss/importCss.w

    人气教程排行