無序列表的翻轉按鈕效果

CSS代碼:
















































頁面代碼:












用出來效果還是挺好看的。
posted @ 2008-03-12 09:38 和風細雨 閱讀(382) | 評論 (0) | 編輯 收藏
世上本無難事,心以為難,斯乃真難。茍不存一難之見于心,則運用之術自出。
用出來效果還是挺好看的。
posted @ 2008-03-12 09:38 和風細雨 閱讀(382) | 評論 (0) | 編輯 收藏
posted @ 2008-03-10 21:20 和風細雨 閱讀(1396) | 評論 (0) | 編輯 收藏
posted @ 2008-03-08 15:00 和風細雨 閱讀(3020) | 評論 (3) | 編輯 收藏
posted @ 2008-03-08 14:26 和風細雨 閱讀(409) | 評論 (0) | 編輯 收藏
posted @ 2008-03-08 02:25 和風細雨 閱讀(728) | 評論 (0) | 編輯 收藏
適于表現表單的表單元素
Xhtml中提供了一些有用的元素用來在表單中增加結構和定義,它們是fieldset,legend和label。
Fieldset用來給相關的信息塊進行分組,它在表現上類似于Swing中的border和VS中的frame。
Legend用來標識fieldset的用戶,它相當于border的標題文字。
Label元素可以用來幫助添加結構和增加表單的可訪問性,它用來在表單元素中添加有意義的描述性標簽。
fieldset,legend和label的例圖
頁面代碼
<form method=post action="#" onsubmit="return checkForm()">
<table width=200 bgcolor="#f8f8f8">
<tr><td>
<fieldset><legend>用戶注冊</legend>
<p><label for="name">用戶名:</label><input type="text" name="name"
value="" /></p>
<p><label for="pswd">密碼:</label><input type="text" name="pswd"
value="" /></p>
<p><label for="pswd">再次輸入密碼:</label><input type="text" name="pswd2"
value="" /></p>
<p><input type="button"
value="注冊"/></p>
</fieldset>
</td></tr>
</table>
</form>
未加樣式的效果
樣式表中的設定
fieldset{
margin:1em 0;
padding:1em;
border:1px solid #ccc;
background:#f8f8f8;
}
legend{
font-weight:bold;
}
label{
display:block;
}
其中值得注意的是label的display屬性設置為了block。Label默認是行內元素,但將display屬性設置為了block后使其產生了自己的塊框,是自己獨占一行,因此輸入表單就被擠到了下一行,形成了下圖的效果。
加入上述樣式的效果
More…
表單元素因為輸入數據的限制經常寬度不一,當需要個別調整大小是可以這樣設置:
<input type="text" name="negetiveinteger"
value="-1" style="width: 200px; height: 20px" />
加入必填字段的標識
在許多表單中有必填字段,我們可以在label中使用Strong來表示出來。代碼如下:
<label for="letterOrInteger">ID:<strong class="required">(必填字段)</strong></label>
樣式設定如下:
.required{
font-size:12px;
color:#760000;
}
表單反饋效果
表單反饋樣式及頁面代碼
fieldset{
margin:1em 0;
padding:1em;
border:1px solid #ccc;
background:#f8f8f8;
}
legend{
font-weight:bold;
}
label{
width:100px;
}
.feedbackShow{
position:absolute;
margin-left:11em;
left:200px;
right:0;
visibility: visible;
}
.feedbackHide{
position:absolute;
margin-left:11em;
left:200px;
right:0;
visibility: hidden;
}
.required{
font-size:12px;
color:#760000;
}
<table width=100% bgcolor="#f8f8f8">
<tr><td>
<fieldset><legend>員工信息</legend>
<p><label for="letterOrInteger">ID:<strong class="required">(必填字段)</strong></label><span id="idMsg" class="feedbackHide">這里必須輸入英語或數字</span><input type="text" name="letterOrInteger"
value="" style="width: 200px; height: 20px" /></p>
<p><label for="character">姓名:</label><span id="nameMsg" class="feedbackHide">這里必須輸入漢字</span><input type="text" name="character"
value="" style="width: 200px; height: 20px" /></p>
<p><label for="email">郵件:</label><span id="emailMsg" class="feedbackHide">這里必須輸入符合郵件地址的格式</span><input type="text" name="email"
value="" style="width: 200px; height: 20px" /></p>
<p><input type="submit"
value="提交" style="width: 100px; height: 25px"/></p>
</fieldset>
</td></tr>
</table>
JavaScript驗證代碼
/**
* 檢查驗證
*/
function checkForm(){
// 英數字驗證
var letterOrInteger=$("letterOrInteger").value;
if(isLetterOrInteger(letterOrInteger)==false){
$("letterOrInteger").focus();
$("idMsg").className="feedbackShow";
return false;
}
else{
$("idMsg").className="feedbackHide";
}
// 漢字驗證
var character=$("character").value;
if(isCharacter(character)==false){
$("character").focus();
$("nameMsg").className="feedbackShow";
return false;
}
else{
$("nameMsg").className="feedbackHide";
}
// 郵件驗證
var email=$("email").value;
if(isEmail(email)==false){
$("email").focus();
$("emailMsg").className="feedbackShow";
return false;
}
else{
$("emailMsg").className="feedbackHide";
}
return false;
}
Tomcat示例工程下載:
http://www.aygfsteel.com/Files/junglesong/CssTest20080305000633.rar
posted @ 2008-03-04 23:58 和風細雨 閱讀(3160) | 評論 (1) | 編輯 收藏
posted @ 2008-03-04 21:06 和風細雨 閱讀(4001) | 評論 (1) | 編輯 收藏
1.Collection接口
Java集合類中最基礎的接口是Collection,它定義了兩個基本方法:
Public interface Collection<E>{
boolean add(E element);
Iterator<E> iterator();
}
add是向Collection中添加一個元素,當添加的內容確實對Collection發生了有效變更的話add方法返回真,否則返回假,比如你向一個Set添加重復的元素時,Set內容不會變化,add方法會返回假。
iterator方法返回實現了Iterator接口的對象,你可以借此對Collection中的內容進行挨個遍歷。
2.Iterator接口
Iterator有三個方法:
Public interface Iterator<E>{
E next();
boolean hasNext();
void remove();
}
通過重復調用next方法,你可以挨個遍歷Collection中的元素。然而,當遍歷到Collection末端時,此方法會拋出一個NoSuchElementException異常,因此在遍歷時你就需要hasNext方法和next方法配合使用。 hasNext方法在當前遍歷位置后仍有元素時會返回真。配合例子如下:
Collection<String> c=….;
Iterator<String> iterator=c.iterator();
While(iterator.hasNext()){
String str=iterator.next();
…….
}
remove方法能刪除上一次調用next時指向的元素,注意不能連續兩次調用remove方法,否則會拋出IllegalStateException.
3.Collection接口的其它方法
int size():返回當前存儲的元素個數
boolean isEmpty():當集合中沒有元素時返回真
boolean contains(Object obj):當集合中有元素和obj值相等時返回真.
boolean containsAll(Collection<?> other):當集合包含另一集合的全部元素時返回真.
bBoolean addAll (Collection<? extends E> other):把其它集合中的元素添加到集合中來,當此集合確實發生變化時返回真.
boolean remove(Object obj):刪除一個和obj值相等的元素,當吻合的元素被刪除時返回真.
boolean removeAll(Collection<?> other) :從本集合中刪除和另一集合中相等的元素,當本集合確實發生變化時返回真.(差集)
void clear():清除集合中的所有元素
boolean retainAll(Collection<?> other) :從本集合中刪除和另一集合中不相等的元素,當本集合確實發生變化時返回真.(交集)
Object[] toArray()
返回由集合中元素組成的數組
4.實現了Collection接口的具體類
ArrayList:帶下標的隊列,增加和收縮時都是動態的.
LinkedList:有序隊列,在任意位置插入和刪除都是高效的.
HashSet:不存在重復的非排序集合.
TreeSet:自動排序的不存在重復的集合.
LinkedHashSet:保持了插入時順序的哈希表
PriorityQueue:優先級隊列,能有效的刪除最小元素.
5.沒有重復元素存在的集合HashSet
HashSet通過哈希碼來查找一個元素,這比鏈表的整體查找要迅速得多,但是由此帶來的缺陷時它不能保持插入時的順序.
由于HashSet靠hash碼來識別元素,因此它不能包含重復元素,當集合中已經存在值相等的元素時,再次添加同樣的元素HashSet不會發生變化.
Set<String> hashSet=new HashSet<String>();
hashSet.add("Andy");
hashSet.add("Andy");
hashSet.add("Bill");
hashSet.add("Cindy");
hashSet.add("Bill");
hashSet.add("Cindy");
Iterator<String> iter=hashSet.iterator();
while(iter.hasNext()){
System.out.println(iter.next());
}
輸出:
Cindy
Andy
Bill
6.自動排序的集合 TreeSet
TreeSet和HashSet類似但它值得一提的一點是無論你以何順序插入元素,元素都能保持正確的排序位置,這時因為TreeSet是以紅黑樹的形式存儲數據,在插入時就能找到正確的位置.注意插入TreeSet的元素都要實現Comparable接口.
例:
SortedSet<String> treeSet=new TreeSet<String>();
treeSet.add("Andy");
treeSet.add("Andy");
treeSet.add("Bill");
treeSet.add("Cindy");
treeSet.add("Bill");
treeSet.add("Cindy");
Iterator<String> iter=treeSet.iterator();
while(iter.hasNext()){
System.out.println(iter.next());
}
輸出:
Andy
Bill
Cindy
7.優先級隊列PriorityQueue
PriorityQueue使用一種名為堆的二叉樹高效的存儲數據,它檢索數據是按排序的順序而插入則隨意,當你調用remove方法時,你總能得到最小的元素.但PriorityQueue并不按序排列它的元素,當你遍歷時它是不會排序的,這也沒有必要. 在制作一個按優先級執行日程安排或事務安排時你應該首先想到PriorityQueue。
例:
PriorityQueue<String> pq=new PriorityQueue<String>();
pq.add("Cindy");
pq.add("Felix");
pq.add("Andy");
pq.add("Bill");
Iterator<String> iter=pq.iterator();
while(iter.hasNext()){
System.out.println(iter.next());
}
while(!pq.isEmpty()){
System.out.println(pq.remove());
}
8.保持插入順序的哈希表LinkedHashMap
從1.4起Java集合類中多了一個LinkedHashMap,它在HashMap的基礎上增加了一個雙向鏈表,由此LinkedHashMap既能以哈希表的形式存儲數據,又能保持查詢時的順序.
Map<String,String> members=new LinkedHashMap<String,String>();
members.put("001", "Andy");
members.put("002", "Bill");
members.put("003", "Cindy");
members.put("004", "Dell");
Iterator<String> iter=members.keySet().iterator();
while(iter.hasNext()){
System.out.println(iter.next());
}
Iterator<String> iter2=members.values().iterator();
while(iter2.hasNext()){
System.out.println(iter2.next());
}
9.自動按鍵進行排序的哈希表TreeMap
Map<String,String> members=new TreeMap<String,String>();
members.put("001", "Andy");
members.put("006", "Bill");
members.put("003", "Cindy");
members.put("002", "Dell");
members.put("004", "Felex");
for(Map.Entry<String,String> entry:members.entrySet()){
System.out.println("Key="+entry.getKey()+" Value="+entry.getValue());
}
10.1 集合工具類Collections的方法unmodifiable
此方法構建一個不可更改的集合視圖,當使用其修改方法時會拋出一個UnsupportedOperationException
static Collection<E> unmodifiableCollection(Collection<E> c)
static List<E> unmodifiableList (List<E> c)
static Set<E> unmodifiableSet (Set<E> c)
static SortedSet<E> unmodifiableSortedSet (SortedSet<E> c)
static Map<K,V> unmodifiableMap (Map<K,V> c)
static SortedMap<K,V> unmodifiableSortedMap (SortedMap<K,V> c)
10.2 集合工具類Collections的方法synchronized
此方法會返回一個線程安全的集合視圖
static Collection<E> synchronizedCollection(Collection<E> c)
static List<E> synchronizedList (List<E> c)
static Set<E> synchronizedSet (Set<E> c)
static SortedSet<E> synchronizedSortedSet (SortedSet<E> c)
static Map<K,V> synchronizedMap (Map<K,V> c)
static SortedMap<K,V> synchronizedSortedMap (SortedMap<K,V> c)
集合類靜態類圖
posted @ 2008-03-04 08:33 和風細雨 閱讀(458) | 評論 (0) | 編輯 收藏
使用表格渲染器渲染表格
在使用JTable時,用戶往往希望改變它缺省的渲染方式,比如使用間隔色的行,對特定的單元格進行特殊顏色顯示等,這對一些可視化編程環境的表格并不是一件容易的事。
在Java Swing編程中我們可以使用DefaultTableCellRenderer的子類渲染表格來達到這個目的,實現和使用它都非常容易。
渲染效果一:
步驟一:實現一個javax.swing.table.DefaultTableCellRenderer的子類
/**
* 間隔色表格渲染類
*/
public class ColorTableCellRenderer extends DefaultTableCellRenderer {
private static final long serialVersionUID = -3378036327580475639L;
public Component getTableCellRendererComponent(
JTable table,
Object value,
boolean isSelected,
boolean hasFocus,
int row,
int column) {
// 得到單元格
Component cell =
super.getTableCellRendererComponent(
table,
value,
isSelected,
hasFocus,
row,
column);
// 進行渲染
if (hasFocus) {
// 如果獲得焦點則設置背景色為紅色
cell.setBackground(Color.red);
//cell.setForeground(Color.black);
} else {
if ((row % 2) == 0) {
// 偶數行設置為白色
cell.setBackground(Color.white);
} else {
// 奇數行設置為藍色
cell.setBackground(Color.cyan);
}
}
return cell;
}
}
步驟二:將ColorTableCellRenderer設置為表格的渲染器
try {
ColorTableCellRenderer cellRender = new ColorTableCellRenderer();
table.setDefaultRenderer(Class.forName("java.lang.Object"),
cellRender);
} catch (Exception e) {
e.printStackTrace();
}
實現一個將特定單元格設置為紅色的表格渲染器
如右,如果想將成員年齡大于37的單元格設置為紅色。
AgeTableCellRenderer的代碼
public class AgeTableCellRenderer extends DefaultTableCellRenderer {
private static final long serialVersionUID = -334535475639L;
public Component getTableCellRendererComponent(
JTable table,
Object value,
boolean isSelected,
boolean hasFocus,
int row,
int column) {
// 得到單元格
Component cell =
super.getTableCellRendererComponent(
table,
value,
isSelected,
hasFocus,
row,
column);
// 先把所有單元格設置為白色
cell.setBackground(Color.white);
// 進行渲染
if (table.getColumnName(column).equals("年齡") ) { // 如果列名等于“年齡”
// 取得單元格的文字
String strValue=(String)value;
if(Pattern.matches("\\d+", strValue)){
if(Integer.parseInt(strValue)>37){
// 如果是數字且值大于37,將單元格背景設置為紅色
cell.setBackground(Color.red);
}
}
}
return cell;
}
}
posted @ 2008-03-03 23:07 和風細雨 閱讀(1398) | 評論 (0) | 編輯 收藏
樹和節點的基本概念
樹可以用圖形的方式顯示眾多的節點以及它們之間的關系,最常見的樹的例子就是目錄樹。
所有組成樹的元素都成為節點(Node),一棵樹的最頂層的節點稱為根節點,如Program;而沒有子節點的節點成為葉子節點,如domain。在層次結構中,上層的節點是下層節點的父節點,而下層節點是上層節點的子節點,如圖:Program是C# Programs和Programs的父節點;FileBatchRemaer20070801094605是C# Programes的子節點。
有關樹JTree的類和接口
JTree 顯示樹的核心基本類。
TreeModel 定義了樹的數據模型接口
DefaultTreeModel 默認的樹模型接口實現類
TreeModelListener 樹模型的事件監聽器
TreePath 樹路徑。一個路徑就是一個對象數組,對應于樹模型中從根節點到選定節點上的所有節點集合。數組的第一個元素是根節點,按樹的層次關系依次在數組中給出中間節點,最后一個元素是選定的節點。
MutableTreeNode 樹節點接口。對應樹中的節點。樹節點接口定義了與父子節點有關的方法。因此,利用樹節點可以遍歷整棵樹。
DedaultMutableTreeNode 默認的樹節點的實現類。
TreeSelectionModel 定義了在樹上的選擇節點的數據模型接口。樹選擇模型決定了選擇節點的策略以及被選擇節點的信息。
TreeSelectionModelListener 樹選擇模型事件的監聽器。
代碼實例:構建一棵樹
DefaultMutableTreeNode root = new DefaultMutableTreeNode("Java");
DefaultMutableTreeNode j2seNode=new DefaultMutableTreeNode("J2SE(JavaSE)");
DefaultMutableTreeNode swingNode=new DefaultMutableTreeNode("Swing");
DefaultMutableTreeNode socketNode=new DefaultMutableTreeNode("Socket");
DefaultMutableTreeNode threadNode=new DefaultMutableTreeNode("Thread");
j2seNode.add(swingNode);
j2seNode.add(socketNode);
j2seNode.add(threadNode);
DefaultMutableTreeNode j2eeNode=new DefaultMutableTreeNode("J2EE(JavaEE)");
DefaultMutableTreeNode jspservletNode=new DefaultMutableTreeNode("Jsp/Servlet");
DefaultMutableTreeNode jdbcNode=new DefaultMutableTreeNode("JDBC");
DefaultMutableTreeNode javaMailNode=new DefaultMutableTreeNode("Java Mail");
j2eeNode.add(jspservletNode);
j2eeNode.add(jdbcNode);
j2eeNode.add(javaMailNode);
root.add(j2seNode);
root.add(j2eeNode);
tree = new JTree(root);
相關語句解釋
// 創建一個樹節點,文字為J2SE(JavaSE)
DefaultMutableTreeNode j2seNode=new DefaultMutableTreeNode("J2SE(JavaSE)");
// 創建一個文字為“Swing”的節點,添加在節點j2seNode下
DefaultMutableTreeNode swingNode=new DefaultMutableTreeNode("Swing");
j2seNode.add(swingNode);
// 創建一個文字為Java的節點作為根節點,然后以此根節點構建一棵樹。j2seNode,j2eeNode掛在root 下
DefaultMutableTreeNode root = new DefaultMutableTreeNode("Java");
.......
root.add(j2seNode);
root.add(j2eeNode);
tree = new JTree(root);
注意: JTree和JTextArea,JTable一樣,也需要放在一個JScrollPane中。
給樹控件添加監聽
tree.addTreeSelectionListener(new TreeSelectionListener() {
public void valueChanged(TreeSelectionEvent evt) {
// 取得選擇狀態變化的所有路徑
TreePath[] paths = evt.getPaths();
for (int i=0; i<paths.length; i++) {
// 如果處于選擇狀態
if (evt.isAddedPath(i)) {
// 將路徑轉化為節點數組
Object[] nodes=paths[i].getPath();
// 得到最后一個節點,即選擇的節點
DefaultMutableTreeNode node=(DefaultMutableTreeNode)nodes[nodes.length-1];
// 輸出節點名
System.out.println(node.toString());
}
}
}
});
額外的一點美化工作:渲染節點
// 設定葉節點圖標
Icon leafIcon = new ImageIcon(TreePanel.class.getResource("/leaf.gif"));
// 設定關閉狀態節點圖標
Icon closedIcon = new ImageIcon(TreePanel.class.getResource("/close.gif"));
// 設定打開狀態節點圖標
Icon openIcon = new ImageIcon(TreePanel.class.getResource("/open.gif"));
// 取得樹的渲染器
DefaultTreeCellRenderer renderer = (DefaultTreeCellRenderer)tree.getCellRenderer();
renderer.setLeafIcon(leafIcon);// 設定葉節點圖標
renderer.setClosedIcon(closedIcon);// 設定關閉狀態節點圖標
renderer.setOpenIcon(openIcon);// 設定打開狀態節點圖標
posted @ 2008-03-03 23:02 和風細雨 閱讀(2451) | 評論 (6) | 編輯 收藏