欧美精品乱码久久久久久,日漫免费在线观看网站,亚洲高清国产精品

按鈕按下效果的左側(cè)導(dǎo)航欄實(shí)現(xiàn)

如坐春風(fēng) — Fri, 23 May 2008 05:16:00 GMT

在“http://neic.usgs.gov/neis/qed/”看到了一個(gè)不錯(cuò)的按鈕按下效果的左側(cè)導(dǎo)航欄，自己模擬實(shí)現(xiàn)了一個(gè)，效果如下，目前在ie下效果可以，但FireFox下走形，以后再調(diào)吧：

一。左菜單右內(nèi)容的實(shí)現(xiàn)。
本例中使用一個(gè)虛表格實(shí)現(xiàn)了左右兩列的效果，代碼如下：

<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">
                            內(nèi)容。。。。
                        div>
                    td>
                tr>
            table>
        div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        div>
    div>
body>

二。CSS部分設(shè)置代碼。

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://www.aygfsteel.com/Files/sitinspring/PressButtonMenu20080523130024.rar

以上

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

通用化Web表單驗(yàn)證方式的改進(jìn)方案

如坐春風(fēng) — Wed, 21 May 2008 06:09:00 GMT

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

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

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

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

使用CSS實(shí)現(xiàn)滑動(dòng)菜單欄

如坐春風(fēng) — Thu, 08 May 2008 06:20:00 GMT

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

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

Web頁(yè)面中選項(xiàng)卡Tabview的實(shí)現(xiàn)

如坐春風(fēng) — Mon, 05 May 2008 08:47:00 GMT

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

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

使用CSS實(shí)現(xiàn)側(cè)邊Tab菜單欄

如坐春風(fēng) — Mon, 05 May 2008 07:29:00 GMT

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

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

使用commons-fileupload實(shí)現(xiàn)單個(gè)和多個(gè)文件上傳

如坐春風(fēng) — Sat, 12 Apr 2008 06:16:00 GMT

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

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

JFreeChat四種圖表的繪制例程

如坐春風(fēng) — Tue, 08 Apr 2008 05:00:00 GMT

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

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

表單驗(yàn)證方式的通用化

如坐春風(fēng) — Mon, 07 Apr 2008 13:41:00 GMT

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

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

Web頁(yè)面表單域驗(yàn)證方式的改進(jìn)

如坐春風(fēng) — Sun, 06 Apr 2008 08:50:00 GMT

摘要: 我們對(duì)網(wǎng)頁(yè)表單域驗(yàn)證常采取JS驗(yàn)證的方式，即取得某個(gè)表單域的值，然后對(duì)它進(jìn)行正則表達(dá)式驗(yàn)證，如果通過則進(jìn)行下一項(xiàng)驗(yàn)證，否則顯示出錯(cuò)文字并置上焦點(diǎn)，這種做法很常見而且很湊效，但這樣的頁(yè)面寫多了或者表單字段多了也容易讓人煩躁，比如說這些驗(yàn)證除了具體的正則表達(dá)式不同，其他代碼均高度相似，其中明顯有大量的重復(fù)內(nèi)容，而且表現(xiàn)和行為也未完全分離。能否將它改進(jìn)一下呢？本文將探討一下新的方法，這種做法的想法是把驗(yàn)證的正則表達(dá)式作為表單域?qū)傩缘囊徊糠郑@樣取值驗(yàn)證就融合到了一起，另外讓提示span的id也和表單域ID關(guān)聯(lián)起來，這樣出錯(cuò)時(shí)能更快找到它。如此處理后驗(yàn)證的代碼可以歸納到一個(gè)表單驗(yàn)證實(shí)用類中，大大減少了頁(yè)面的JS代碼量同時(shí)減輕我們的重復(fù)勞動(dòng)。閱讀全文

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

使用DOM操作表格

如坐春風(fēng) — 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"%> 閱讀全文

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

JavaScript常見效果及對(duì)DOM的一些操作。

如坐春風(fēng) — Sat, 05 Apr 2008 07:44:00 GMT

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

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

網(wǎng)頁(yè)表單的制作和驗(yàn)證過程

如坐春風(fēng) — Sun, 23 Mar 2008 09:33:00 GMT

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

下面就是一個(gè)通用網(wǎng)頁(yè)表單的制作和驗(yàn)證過程。閱讀全文

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