## 樣式 # 目錄 * [1、了解X5的樣式](http://wex5.com/cn/?p=4827#1) * [2、使用樣式](http://wex5.com/cn/?p=4827#2.1) * [2.1、改變組件的樣式](http://wex5.com/cn/?p=4827#2.1) * [2.2、自定義組件的樣式](http://wex5.com/cn/?p=4827#2.2) * [2.3、修改系統樣式](http://wex5.com/cn/?p=4827#2.3) * [3、使用皮膚](http://wex5.com/cn/?p=4827#3.1) * [3.1、PC和手機使用不同的皮膚](http://wex5.com/cn/?p=4827#3.1) * [3.2、提供了六種皮膚](http://wex5.com/cn/?p=4827#3.2) * [3.3、設計器中設置設備和皮膚](http://wex5.com/cn/?p=4827#3.3) * [4、使用LESS](http://wex5.com/cn/?p=4827#4) # 1、了解X5的樣式 * 以Bootstrap樣式為基礎——非x-開頭的樣式即為Bootstrap的樣式 * 增加了一些樣式——X5的樣式使用 x-開頭 * 支持使用皮膚——PC和手機使用了兩個不同的皮膚 * 組件支持使用less——簡化層疊樣式表（CSS）的編寫 [](https://box.kancloud.cn/2015-09-23_56018d81a7cba.jpg) 上圖中的btn-default就是Bootstrap的樣式，x-black就是x5的樣式 # 2、使用樣式 ## 2.1、改變組件的樣式 組件的樣式是可以修改的，通過修改組件的class屬性，來改變組件的樣式 例如：外賣頁面中的加入購物車按鈕是綠色的，button組件的底色是如何改成綠色的呢？在設計器中選中w文件中的button組件，點class屬性右邊的小按鈕，就打開了樣式選擇對話框，在顏色樣式中選擇x-green，點確定按鈕即可。 [](https://box.kancloud.cn/2015-09-23_56018d878d7a4.jpg) ## 2.2、自定義組件的樣式 如果系統提供的樣式不滿足需要，例如：希望按鈕的底色是淺綠色，那么我們可以通過自定義組件的樣式來實現。樣式要定義在CSS文件中，如果定義的是只有當前W文件才使用的樣式，可以定義在設計器的CSS頁簽里，這樣系統會自動創建與當前W文件同名的CSS文件，并自動引用。如果定義的是公共樣式，應該新建一個CSS文件，在這個文件中定義，在需要此樣式的W文件中引用這個CSS文件。 ### 1、定義樣式 定義一個新的樣式，設置背景色為淺綠色 .light-green-btn{ background-color: #00aa00; background-image: none; } 由于X5使用單頁模式，在組件上不能設置id屬性，因此樣式選擇器不能使用id，可以使用html標記和class。 ### 2、修改組件的class屬性 修改button組件的class屬性，增加上面定義的.light-green-btn樣式， [](https://box.kancloud.cn/2015-09-23_56018d8873baf.jpg) ### 3、引用css文件 樣式如果定義在設計器的css頁里面，那么這個w文件不用引用這個css文件，系統會自動引用。其它情況需要引用CSS文件，可以在js文件中引用，也可以在w文件中引用。 [](https://box.kancloud.cn/2015-09-23_56018d8902a10.jpg) **（1）、在js文件中引用css文件** 在js文件中，用下面第4行的寫法引用css文件，下面引用了/UI2/OA/config/pub.css 文件 define(function(require) { var $ = require("jquery"); var justep = require("$UI/system/lib/justep"); require("css!$UI/OA/config/pub").load(); **（2）、在W文件中引用css文件 [](https://box.kancloud.cn/2015-09-23_56018d8981e69.jpg) **在window組件上點右鍵，選擇增加CSS引用，在目錄中選擇要引用的CSS文件即可。引用的代碼寫在w文件中，不寫在js文件中。 ## 2.3、修改系統樣式 如果系統提供的樣式不滿足需要，也可以修改系統樣式。例如：把系統設置的深綠色改成淺綠色 .btn.x-green{ background-color: #00aa00; background-image: none; } 這里有一點需要注意，X5使用單頁模式，在加載了新的樣式后，原來的同名樣式被覆蓋，因此，就有了兩種不同的做法：覆蓋系統樣式和不覆蓋系統樣式。它們有著各自的優缺點。 **（1）、覆蓋系統樣式** 優點：系統功能和自己開發的功能風格一致 缺點：容易導致系統功能界面出現問題，樣式修改后，需要兼顧系統功能的界面。 做法：定義公共CSS文件，在門戶首頁中引用這個CSS文件。例如在/UI2/portal/pc/index.w中引用。 **（2）、不覆蓋系統樣式** 優點：修改樣式不會影響系統功能，不用兼顧系統功能的界面 缺點：系統功能和自己開發的功能風格不一致 做法：使用命名空間的方式，避免樣式覆蓋，在修改系統樣式時，在系統class前面增加一個命名空間class，例如：.btn是系統樣式，增加一個命名空間oa，oa是我們做OA系統時取的名字，可以使用你們的項目名，或者其它名稱。重定義時定義為 .oa.btn.x-green{ background-color: #00aa00; background-image: none; } 同時，在需要此樣式的w文件的window組件的class屬性中加上oa，這個樣式就會在這個w文件上生效，不會影響其它使用.btn.x-green樣式的w文件。 # 3、使用皮膚 [](https://box.kancloud.cn/2015-09-23_56018d89f284c.png) 上面展現了三種皮膚的登錄界面，從左到右分別是默認、desktop、superhero。 ## 3.1、PC和手機使用不同的皮膚 ### 1、登錄系統 在瀏覽器中輸入127.0.0.1:8080回車，會執行\apache-tomcat\webapps\ROOT\index.html，會重定向到127.0.0.1:8080/x5 <script type="text/javascript"> window.location="/x5"; </script> ### 2、判斷使用的設備 判斷是PC，重定向到127.0.0.1:8080/x5/UI2/portal/pc/index.w?device=pc，是手機，重定向到127.0.0.1:8080/x5/UI2/portal/mobile/index.w?device=m，注意URL中攜帶了device參數。 在\runtime\UIServer\WEB-INF\web.xml文件中定義了不同設備的跳轉URL <context-param> <param-name>mobile.login.path</param-name> <param-value>/UI2/portal/mobile/index.w?device=m</param-value> </context-param> <context-param> <param-name>pc.login.path</param-name> <param-value>/UI2/portal/pc/index.w?device=pc</param-value> </context-param> ### 3、根據device參數，使用設置的默認皮膚 在\runtime\UIServer\WEB-INF\justep.xml中定義了設備對應的默認皮膚，PC使用desktop皮膚，mobile使用默認皮膚 <default-skin> <pc>desktop</pc> <mobile></mobile> </default-skin> ## 3.2、提供了六種皮膚 系統提供了六種皮膚，分別是：默認, ?desktop,? superhero,? slate,? united,? yeti。 ### ?1、每個皮膚都有對應的css文件 組件的css文件最終合并到/UI2/system/components/justep目錄下，文件名中都有min，表示是合并后的css文件。文件中有皮膚名稱的就是皮膚的css文件，文件名中沒有皮膚名稱的就是默認皮膚的css文件。 [](https://box.kancloud.cn/2015-09-23_56018d8a614dc.jpg) ### 2、使用皮膚對應的css文件 通過在URL中設置皮膚參數$s，系統自動加載該皮膚對應的css文件 看下面這個URL，其中：皮膚參數——$sdesktop，$s就是皮膚參數，desktop就是使用的皮膚名稱 [URL:http://127.0.0.1:8080/x5/$v933ef3a63cb847edb8458463964798d5$lzh_CN$sdesktop$dpc/UI2/system/components/bootstrap/lib/css/bootstrap-theme.css](http://127.0.0.1:8080/x5/$v933ef3a63cb847edb8458463964798d5$lzh_CN$sdesktop$dpc/UI2/system/components/bootstrap/lib/css/bootstrap-theme.css) ## 3.3、設計器中設置設備和皮膚 w文件中的 window組件提供了design-device和design-$skin兩個屬性，分別用來設置設備和皮膚，這兩個屬性決定了w文件在設計器和模擬器中使用的皮膚。 # 4、使用LESS LESS 是動態的樣式表語言，通過簡潔明了的語法定義，使編寫 CSS 的工作變得非常簡單。相當于賦予了CSS動態語言的特性，如變量，繼承，運算，函數，關于LESS可以上網查找介紹。下面簡單介紹一下PC頁面上灰色的按鈕和手機界面上藍色的按鈕是怎么設置的。 [](https://box.kancloud.cn/2015-09-23_56018d8ac8045.jpg) 從上圖我們可以看出，button組件的漸變底色是使用.btn-default的background-image實現的，這個樣式定義在bootstrap.min.css文件中了，這是合并后的文件，我們把這個文件去掉，就可以看到原始文件了。 [](https://box.kancloud.cn/2015-09-23_56018d8b6648f.jpg) 從上圖可以看出，樣式的原始文件是bootstrap-theme.css，再加上皮膚，因此是bootstrap-theme.desktop.css文件。打開bootstrap-theme.desktop.css文件，看看第38行，就是運行時使用的樣式。 [](https://box.kancloud.cn/2015-09-23_56018d8bf02e9.jpg) 這個css文件是編譯bootstrap-theme.less文件生成的，看看bootstrap-theme.less文件 [](https://box.kancloud.cn/2015-09-23_56018d8c9342c.jpg) 這其中使用了Mixins（混入）功能 /UI2/system/components/bootstrap/lib/css/mixins/gradients.less [](https://box.kancloud.cn/2015-09-23_56018d8d2a600.jpg) 現在就剩下需要說明@btn-default-bg:是在哪兒定義的，每個皮膚使用的變量可以匯總在一個變量文件中，在/UI2/system/components/bootstrap/lib/skin目錄下存放了每個皮膚對應的變量文件，variables.less是默認皮膚的變量文件，variables.desktop.less是desktop的變量文件。打開這兩個文件，看看變量的定義。 [](https://box.kancloud.cn/2015-09-23_56018d8e02133.jpg) 最后，把LESS文件編譯成CSS文件，執行\tools\dist\less.bat編譯LESS，基于LESS文件。配合上皮膚的變量文件，生成相應皮膚的CSS文件 例如：編譯bootstrap-theme.less生成每個皮膚的CSS文件 | 皮膚 | 變量文件 | 生成CSS | | 默認 | ? variables.less | ? bootstrap-theme.css | | desktop | ? variables.desktop.less | ? bootstrap-theme.desktop.css | 為了提高運行速度，我們應該將零散的小CSS文件合并成幾個大的CSS文件。合并css的方法是：運行\tools\dist\ dist.bat，執行合并