GWT裡面的CSS樣式單

2021-08-29 17:18:27 字數 3879 閱讀 7113

在gwt的文件裡說,大致上css的命名規則是這樣的"[project]-[widget],比如gwt-button,你可以在css裡定義如下:

.gwt-button

但是這樣的說明是不充分的,所以這裡有必要把他真正的樣式表來列一下,以供檢視。

absolutepanel

用乙個div來實現,預設的設定了overflow:hidden。這個div裡邊的內容可以用乙個x,y座標來確定位置。

botton

就是乙個正常的html的button.預設的樣式名字是gwt-button.

cellpanel

用乙個table來實現,沒有預設的樣式,可以設定border,cell-spacing屬性。

checkbox

就是正常的html的checkbox,預設的樣式名字為gwt-checkbox,會自動生成乙個不重複的id,checkn(n是乙個整數),可以使用checked,defaultchecked,disabled等屬性。預設樣式是空的。

deckpanel

用乙個div來實現,包含了一系列的子物件。每乙個物件可以用單獨的display屬性來設定是否顯示。這個有點像swing裡面的cardlayout的方式有點像,新增了一系列的元件,但是只能顯示乙個。

dialogbox

預設的樣式有gwt-dialogbox,caption兩個都是相關。用乙個div來實現,標題caption也是乙個div。

caption

content

dockpanel

用乙個table來實現,cell-spacin,cell-padding都預設為0,為了實現dockpanel裡邊的tr,td比較麻煩一些。

flextable

只是乙個簡單的table,沒什麼特別的東西。

flowpanel

用乙個div來實現,設定裡display屬性為inline。

content

focuspanel

只是乙個div,重要的是它宣告了focusevents,keyevents,onclick和mouseevents,對對於那些沒有宣告的這些事件"子元件"很有用處。

content

focuswidget

可以是任何元件,只是它可以幫助捕獲focusevents,keyevents。

frame

是乙個iframe,他的預設的樣式是gwt-frame

grid

就是乙個table

html

乙個div,預設的樣式是gwt-html,可以設定屬性white-space為normal,nowrap。

htmlpanel

就是乙個div,可以容納html或是其他元件,不適用gwt-html樣式。最有用的屬性就是createuniqueid,可以設定乙個id,htmlpanel_n。和前面的checkbox的checkn,相比,這裡用大寫字母和下劃線。看起來多少有點怪異。

content

htmltable

沒有疑問,這是用乙個table實現的,重要的是,它是grid,flextable的父類。提供了設定每行或是每乙個單元格的樣式設定的方法。**中沒有thead。假如要設定表頭的話,可能通過設定第一行的樣式來區別。

table.getrowformtter(0).setstylename("style");

horizontalpanel

水平排列的面板,用乙個只有一行的**實現。

item 1

item 2

hyperlink

乙個有定義了錨點的div,預設的樣式名:gwt-hyperlink

image

沒有問題,肯定是img.gwt-image樣式沒有實現。

label

乙個div,預設的樣式是gwt-label。label不能解析html內容,假如你想要的話,可以用html來代替,兩者都提供滑鼠事件。label會自動換行,但是你也可以通過setwordwrap來修改。

content

listbox

就是用select和option來實現。gwt-listbox樣式沒有被實現。可以設定selected,size,multples等屬性。

menubar

用乙個包含**的div實現。乙個水平的選單,只有一行,用單元格來設定選單項,乙個垂直的選單,用行來區分選單項。gwt-menubar只是設定外層的div的樣式。

text or html

text or html

menuitem

乙個選單項就是在選單條中的乙個單元格。它的預設屬性是gwt-menuitem.選中的時候有乙個附加的屬性,gwt-menuitem- selected.在選單項預設的樣式class="gwt-menuitem",在選中的時候就改變成class="gwt-menuitem gwt-menuitem-selected".

passwordtextbox

用password實現,使用gwt-passwordtextbox樣式。

popuppanel

只是乙個div.

radiobutton

用乙個input實現,使用gwt-radiobutton樣式。

rootpanel

乙個rootpanel可以附加到任何的元件上,但是以前屬於這個元件的所有的內容都會被清除。假如你仔細想想,你會發現除了初始化之外,這個元件還有很多用處。

scrollpanel

乙個div設定了overflow屬性為scroll 或auto.

content

******panel

就是乙個div.

stackpanel

用乙個**來實現,每乙個組用兩行來儲存,第一行放了標籤,第二行放了內容。預設的這個**使用gwt-stackpanel樣式,標籤行用了gwt- stackpanelitem和gwt-stackpanelitem-selected.當乙個標籤被選中的時候,它的樣式就由原來的gwt- stackpanelitem替換成為gwt-stackpanelitem-seleted.

text/html

content -- a widget

tabbar

tabbar 使用乙個horizontalpanel來實現,所以它也是乙個table,**的樣式是gwt-tabbar。對於第乙個標籤,通常是乙個空的,它的樣式是gwt-tabbarfirst,就是為了裝飾,最後也會加上乙個空的標籤,指定樣式為gwt-tabbarrest。當乙個標籤被選中的時候, gwt-tabbaritem-selected的樣式會附加到樣式中,這點和menuitem是一樣的。

tab #1

tab #2

tabpanel

用乙個verticalpanel來實現,包含了乙個tabbar和乙個deckpanel,這樣就巢狀幾層**,樣式gwt-tabpanel用到最外層**。gwt-tabbar用到tabbar,gwt-tabpanelbottom用到deckpanel的div上了。需要注意的是tabbar獲取了width:100%樣式,這樣你就知道tabbar中的gwt-tabbarrest樣式的必要了。  

textarea

就是乙個textarea,預設的樣式為gwt-textarea.

textbox

tree

就是乙個包含了多個treeitem的div,預設樣式gwt-tree,設定overflow:auto.

treeitem

用乙個包含了乙個**的div來實現。預設的樣式gwt-treeitem和gwt-treeitem-selected,來修飾裡面的內容。但選中的時候gwt-treeitem-selected會替換gwt-treeitem。這個stackpanel是一樣的。

content

children

verticalpanel

用乙個**來實現,所有的東西按行來排列。

item 1

item 2

python裡面的單例模式

幾種實現單例模式的方法 所謂的單例模式就是乙個類只有乙個例項,所有的引用 例項 和物件 擁有相同的 屬性和方法 單例模式的要點 1.某個類只有乙個例項 2.它必須自行創造這個例項 3.它必須自行向整個系統提供這個例項 實現要點 1.單例模式中的類只提供所有的建構函式 2.類定於中含有該類的靜態私有物...

怎麼給HTML裡面的元素加樣式

分為外聯樣式,在css資料夾下新建login.css檔案 這是id選擇器,頁面上所有是這個的元素,都執行這裡面的樣式 div1 所有是p標籤的元素執行這裡面的樣式 p 他是class選擇器,通常命名的時候以 開頭,裡面定義了一些樣式,誰要是想用,直接用class 引用就可以了 center hu新建...

動態改變頁面的CSS樣式

在asp.net中,有的時候要動態變換css,比如有的時候做個性化頁面,可以這樣做 之後,在要更換css的頁面中,使用如下 sub page load sender as object,e as eventargs if not ispostback mystylesheet.attributes....