webapp 外部 CSS リファレンス_html/css_WEB-ITnose

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 下のファイル
var innerText1=require("text!./innerText1.txt");
var Model = function(){
this.callParent();
};

Model.prototype.modelLoad=function(event) {
alert("innertText1 content:"+innerText1);
};
//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 モデル;
});

css1:

.innerCss1{
背景色:red;
}

css2:

.innerCss2{
背景色: yellow;
}

txt ファイル:

{メッセージ:"this is innerText1"}

x5 公式説明:

コードの実装:

注: コードに示されているように、WeX5 では、css ファイルは require("css!xxx").load() を通じて参照されます。 be "css" !";
2. パスは次の状況をサポートします: 「./」または「../」で始まる相対パス (現在の js ファイルが配置されているパスからの相対パス)、拡張子は必要ありません; "$ で始まる" UI/ ($UI は UI2 ディレクトリを表します) で始まる絶対パスには拡張子は必要ありません。" http://" で始まる絶対パスには拡張子が必要です (拡張子がある場合)。 。

WeX5 でテキストを参照する方法

WeX5 では、サーバーサイドのテキスト ファイルをダウンロードしたい場合、次のような require メカニズムを通じても実現されます:

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" ); require( " css!./innerCss1" ); 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 14 15 16 17 18

//UI2 テキスト ファイルを読み込みます var innerText1 = require( "text!./innerText1.txt" ); var Model = function (){ this .callParent() }; Model.prototype.modelLoad = function (event){ alert( "innerText1 content: " + innerText1) }; 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) {}) が実装されました。テキストを参照するためのパスのサポート: 1. 「./」または「../」で始まる相対パス (現在の js ファイルが配置されているパスに対する相対パス) には拡張子が必要です。 2. 「$UI/」で始まる" 絶対パス ($UI は UI2 ディレクトリを表します) には拡張子が必要です。 注: クロスドメイン ファイルの読み込みはサポートされていません。

リソースのダウンロード

ダウンロード: importCss ケース

実行方法: ダウンロードしたファイルを WeX5 の UI2 の対応するディレクトリに抽出し、Chrome ブラウザーに次のように入力します: http://localhost:8080/ x5 /UI2/demo/misc/importCss/importCss.w

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。