## WeX5界面模塊化的使用—引用css和text 在上一篇文章中，介紹了WeX5中如何引用JS，本文章繼續介紹界面模塊化的使用：引用css和text。 * #### WeX5如何引用CSS 運行效果： [](http://wex5.com/cn/wp-content/uploads/2015/04/importCss.jpg) 代碼實現： 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機制實現的，例如： //加載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案例](http://wex5.com/cn/wp-content/uploads/2015/04/importCss.rar) 運行方式：將下載的文件解壓到WeX5的UI2相應的目錄中；啟動WeX5服務；在chrome瀏覽器中輸入：http://localhost:8080/x5/UI2/demo/misc/importCss/importCss.w