WebApp references to external CSS

Source: Internet
Author: User

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/window "design=" Device:mobile ">
<div component= "$UI/system/components/justep/model/model" xid= "model" style= "HEIGHT:AUTO;LEFT:121PX;TOP:261PX;" />
<div class= "Container-fluid" >

<div component= "$UI/system/components/justep/toobar/toobar"
class= "X-toolbar form-inline x-toolbar-spliter"
Xid= "ToolBar1" >
<a component= "$UI/system/compnents/justep/button/button"
class= "Btn Btn-link btn-icon-left"
label= "Dynamic loading of text under UI2"
Xid= "Innertextbtn"
<i xid= "i3"/>
<span xid= "span3" bind-click= "Span3click" > UI2 under Dynamic Loading text</span>
<span xid= "Span10"
Style= "Display:block"
class= "InnerCss1" > Internal CSS style one </span>
<span style= "Display:block"
Class= "InnerCss2"
Xid= "Span11" > Internal CSS style 2</span>
<span style= "Display:block"
Class= "OutterCss1"
Xid= "Span12" > External CSS Styles </span>


JS file

Define (function (require) {
var $ = require ("jquery");
var justep = require ("$UI/system/lib/justep");
Loading a 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 loading 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;


. innercss1{


. innercss2{

TXT file:

{message: "This is InnerText1"}

X5 Official Explanation:

Code implementation:

12345678910111213 define(function(require){    var$ = require("jquery");    varjustep = 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();        ...});

Description: As shown in the code, in WeX5, the CSS file is referenced by require ("css!xxx"). Load (), and the require parameters must conform to the following rules:
1. The parameter must be "css!" The constant at the beginning;
2. The path supports the following situations: "./" or ". /"Relative path at the beginning (as opposed to the path of the current JS file), no extension required, absolute path beginning with" $UI/"($UI represents the UI2 directory), no extension required, absolute path beginning with" http://"and must have an extension (if there is an extension).

    • WeX5 How to reference text

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

123456789101112131415161718 //加载UI2下的text文件varinnerText1 = require("text!./innerText1.txt");varModel = function(){    this.callParent();};Model.prototype.modelLoad =function(event){    alert("innerText1 content: "+ innerText1);};//动态加载UI2下的text文件Model.prototype.innerTextBtnClick =function(event){    varpath = "text!./innerText2.txt";    require([path],function(content){        alert("innerText2 content: "+ content);    });};

As shown in the code above, WeX5, when referencing the server's text file, is implemented through require (' text!xx ') or require ([' text!xx '], function (p) {}). The path referencing text supports:
1. with "./" or ". /"Relative path at the beginning (as opposed to the path where the current JS file is located), must have an extension;
2. Absolute path beginning with "$UI/" ($UI represents UI2 directory), must have an extension;
Note: Loading cross-domain files is not supported!

    • Resources download

Download: Importcss case

Operation mode: Extract the downloaded files to WeX5 UI2 corresponding directory; start the WeX5 service; in Chrome, enter: HTTP://LOCALHOST:8080/X5/UI2/DEMO/MISC/IMPORTCSS/IMPORTCSS.W

WebApp references to external CSS

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.