亚洲成a人片在线不卡一二三区 ,亚洲高清中文字幕综合网,亚洲欧洲日产专区

按鈕按下效果的左側導航欄實現

如坐春風 — Fri, 23 May 2008 05:16:00 GMT

在“http://neic.usgs.gov/neis/qed/”看到了一個不錯的按鈕按下效果的左側導航欄，自己模擬實現了一個，效果如下，目前在ie下效果可以，但FireFox下走形，以后再調吧：

一。左菜單右內容的實現。
本例中使用一個虛表格實現了左右兩列的效果，代碼如下：

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        div>
        <div id="content">
            <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
                <tr>
                    <td width="200" valign="top" bgcolor="#d4e4f0">
                        <div id="leftMenu">
                            <jsp:include page="/web/page/branch/menubar.jsp"/>
                        div>
                    td>
                    <td>
                        <div id="rightContent">
                            內容。。。。
                        div>
                    td>
                tr>
            table>
        div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        div>
    div>
body>

二。CSS部分設置代碼。

body{
    margin:2px;
    text-align:center;
    background:#7b869a;
}

#bodyDiv{
    margin:0 auto;
    text-align:left;
    background:#ffffff;
}

#header{
    height:100px;
}

#content{
    height:500px;
}

#rightContent{
    height:500px;
    padding:20px;
}

#leftMenu{
    height:500px;
    background:#d4e4f0;
    border-bottom:0px solid #000000;
    border-left:0px solid #000000;
    border-right:0px solid #000000;
    border-top:0px solid #bad5e8;
}

#footer{
    clear:both;
    background:#7b869a;
}

ul.pressEffectUl{
    color: #000000;
    margin:0px;
    padding:0px;
    list-style-type:none;
    background:#d4e4f0;
}

ul.pressEffectUl a{
    padding-left:20px;
    text-decoration:none;
    color:#8d4f10;
    width:200px;
    border-left:0px solid #000000;
    border-right:0px solid #000000;
    border-top:1px solid #ffffff;
    border-bottom:1px solid #bad5e8;
}

ul.pressEffectUl a.currentLink{
    padding:2px;
    padding-left:20px;
    text-decoration:none;
    color:#000000;
    background:#ffffff;
    width:200px;
    border-left:0px solid #000000;
    border-right:0px solid #000000;
    border-top:1px solid #ffffff;
    border-bottom:0px solid #bad5e8;
}

ul.pressEffectUl a:hover{
    color:#000033;
    background:#e1effa;
    border-left:0px solid #000000;
    border-right:0px solid #000000;
    border-top:1px solid #e1effa;
    border-bottom:1px solid #e1effa;
}

h1 {
    font-size: 18px;
    margin: 10px 0px 5px;
    color: #eeeeee;
    text-align: center;
}

h2 {
    font-size: 24px;
    margin: 10px 0px 5px;
    color: #000000;
    text-align: center;
}

.feedbackShow{
visibility: visible;
}

.feedbackHide{
visibility: hidden;
}

三。代碼下載；
http://m.tkk7.com/Files/sitinspring/PressButtonMenu20080523130024.rar

以上

如坐春風 2008-05-23 13:16 發(fā)表評論

通用化Web表單驗證方式的改進方案

如坐春風 — Wed, 21 May 2008 06:09:00 GMT

摘要: 在上文的表單驗證解決方案中，有這樣幾個問題：
1。頁面中存在自定義標簽，這通不過W3C驗證。
2。自定義標簽不能寫在Struts標簽中，造成此解決方案在Struts工程中不適用。
3。驗證的方式和頁面內容混合在一起，沒有分開。
4。原反饋信息span的id必須符合一定規(guī)范，這是額外的負擔。

為了解決這些問題，我采取了如下步驟：
1。建立一種數據結構，讓它容納文本框id，反饋span的id，驗證正則表達式，是否必須輸入等四個信息。這樣頁面就不會混雜自定義標簽，w3c驗證和struts標簽不支持的問題就解決了。
2。建立一個包含多個這種數據結構的數組，其中元素與要驗證的文本域一一對應。此數組在需要驗證時建立。這里雖然要多些一些JS代碼，但驗證信息更集中更容易修改了。
3。需要驗證時取得數組元素，挨個驗證即可，需要的信息都可以從數組元素中取得。整個過程可以庫化通用化，頁面不需要寫驗證。

如此做完后，我認為原先的問題基本得到解決了。下面請看具體代碼閱讀全文

如坐春風 2008-05-21 14:09 發(fā)表評論

使用CSS實現滑動菜單欄

如坐春風 — Thu, 08 May 2008 06:20:00 GMT

摘要: 滑動菜單多用于菜單項目較多且菜單可歸納到少數類別的場合,點擊類別滑動條會上下滑動以隱藏或顯示其下的子菜單.其典型應用便是Visio中滑動菜單樣式.本人在Web中實現了類似的控件,拿出來希望和大家一起交流一下. 閱讀全文

如坐春風 2008-05-08 14:20 發(fā)表評論

Web頁面中選項卡Tabview的實現

如坐春風 — Mon, 05 May 2008 08:47:00 GMT

摘要: TabView是許多可視化編程環(huán)境提供的常見組件,它通過選項卡將內容分類,因此能在緊湊的空間內顯示眾多內容,這個特點使得它在可視化編程環(huán)境中很常見.
隨著Web的發(fā)展,Web頁面元素也開始了組件化的歷程,TabView也不例外.對此Extjs的組件最值得稱道,只是似乎需要一定的時間來鉆研.
本人閑暇之余也實現了自己的TabView,目前在IE下運行正常和FireFox均運行正常,這里貼出來希望和大家一起探討. 閱讀全文

如坐春風 2008-05-05 16:47 發(fā)表評論

使用CSS實現側邊Tab菜單欄

如坐春風 — Mon, 05 May 2008 07:29:00 GMT

摘要: 側邊Tab菜單欄與一般菜單欄的區(qū)別在于菜單項與左邊內容欄的貫通效果,這樣做的好處在于用戶通過菜單就能看出當前所在的頁面,無需記憶或在頁面上查找.Gmail和Google Group都采取了這種直觀式的設計.
如果采用表格實現首頁的效果比較困難,而使用CSS對DIV和無序列表加以限制就比較容易了,本文將逐步講述這一過程. 閱讀全文

如坐春風 2008-05-05 15:29 發(fā)表評論

使用commons-fileupload實現單個和多個文件上傳

如坐春風 — Sat, 12 Apr 2008 06:16:00 GMT

摘要: 對于實現文件上傳功能來說，Commons-fileupload組件是一個不錯的選擇，本文使用它實現了單個文件及多個文件上傳，這里將實現過程寫出來與大家共享。閱讀全文

如坐春風 2008-04-12 14:16 發(fā)表評論

JFreeChat四種圖表的繪制例程

如坐春風 — Tue, 08 Apr 2008 05:00:00 GMT

摘要: 本文書寫了使用JFreeChart生成平面餅圖,3D餅圖,折線圖和柱狀圖的示例代碼,并附有代碼下載. 閱讀全文

如坐春風 2008-04-08 13:00 發(fā)表評論

表單驗證方式的通用化

如坐春風 — Mon, 07 Apr 2008 13:41:00 GMT

摘要: 在上一篇“Web頁面表單域驗證方式的改進“中，我們通過把驗證法則（正則表達式和是否必填字段）寫在表單域中，將驗證過程和驗證法則成功的分離，從而減少了重復代碼，使驗證變得簡單易行，在實際使用中，我們可以把驗證過程放在一個JS文件中，對于全輸入驗證界面，在頁面的表單驗證部分只需要調用其中的checkForm函數就能進行有效驗證，頁面上不再需要書寫重復性高的JS驗證代碼；對于復雜的表單，比如其中含有復選框或是需要兩個文本框比較的地方，這種方法也可讓你不寫通用驗證代碼而把主要精力放在特殊的驗證上。這些能減輕不少工作量，讓繁瑣的工作變得輕松愉快起來。閱讀全文

如坐春風 2008-04-07 21:41 發(fā)表評論

Web頁面表單域驗證方式的改進

如坐春風 — Sun, 06 Apr 2008 08:50:00 GMT

摘要: 我們對網頁表單域驗證常采取JS驗證的方式，即取得某個表單域的值，然后對它進行正則表達式驗證，如果通過則進行下一項驗證，否則顯示出錯文字并置上焦點，這種做法很常見而且很湊效，但這樣的頁面寫多了或者表單字段多了也容易讓人煩躁，比如說這些驗證除了具體的正則表達式不同，其他代碼均高度相似，其中明顯有大量的重復內容，而且表現和行為也未完全分離。能否將它改進一下呢？本文將探討一下新的方法，這種做法的想法是把驗證的正則表達式作為表單域屬性的一部分，這樣取值驗證就融合到了一起，另外讓提示span的id也和表單域ID關聯起來，這樣出錯時能更快找到它。如此處理后驗證的代碼可以歸納到一個表單驗證實用類中，大大減少了頁面的JS代碼量同時減輕我們的重復勞動。閱讀全文

如坐春風 2008-04-06 16:50 發(fā)表評論

使用DOM操作表格

如坐春風 — Sat, 05 Apr 2008 08:05:00 GMT

摘要: 創(chuàng)建表格 Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><%@ page contentType="text/html; charset=UTF-8"%> 閱讀全文

如坐春風 2008-04-05 16:05 發(fā)表評論

JavaScript常見效果及對DOM的一些操作。

如坐春風 — Sat, 05 Apr 2008 07:44:00 GMT

摘要: 表單鼠標掠過特效 Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 閱讀全文

如坐春風 2008-04-05 15:44 發(fā)表評論

網頁表單的制作和驗證過程

如坐春風 — Sun, 23 Mar 2008 09:33:00 GMT

摘要: 在Webapp編程中程序員經常要和前臺頁面打交道，CSS，HTML和JS等都是經常需要操作的內容，對于直接用戶來說，這些就是他們印象中的整個程序，如果前臺頁面不美觀或是使用不便將影響用戶對程序的印象，因此程序員應該在前臺上投入一些精力學習是值得的，在Web2.0時代來臨之后更是如此。

下面就是一個通用網頁表單的制作和驗證過程。閱讀全文

如坐春風 2008-03-23 17:33 發(fā)表評論