BlogJava-如坐春风-随笔分类-Web开发

按钮按下效果的左侧导航栏实现

如坐春风 — 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://www.blogjava.net/Files/sitinspring/PressButtonMenu20080523130024.rar

以上

如坐春风 2008-05-23 13:16 发表评论

通用化Web表单验证方式的改进方案

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

摘要: 在上文的表单验证解决方案中，有这样几个问题：
1。页面中存在自定义标签，这通不过W3C验证。
2。自定义标签不能写在Struts标签中，造成此解决方案在Struts工程中不适用。
3。验证的方式和页面内容混合在一起，没有分开。
4。原反馈信息span的id必须符合一定规范，这是额外的负担。

为了解决这些问题，我采取了如下步骤：
1。建立一种数据结构，让它容纳文本框id，反馈span的id，验证正则表达式，是否必须输入等四个信息。这样页面就不会混杂自定义标签，w3c验证和struts标签不支持的问题就解决了。
2。建立一个包含多个这种数据结构的数组，其中元素与要验证的文本域一一对应。此数组在需要验证时建立。这里虽然要多些一些JS代码，但验证信息更集中更容易修改了。
3。需要验证时取得数组元素，挨个验证即可，需要的信息都可以从数组元素中取得。整个过程可以库化通用化，页面不需要写验证。

如此做完后，我认为原先的问题基本得到解决了。下面请看具体代码阅读全文

如坐春风 2008-05-21 14:09 发表评论

使用CSS实现滑动菜单栏

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

摘要: 滑动菜单多用于菜单项目较多且菜单可归纳到少数类别的场合,点击类别滑动条会上下滑动以隐藏或显示其下的子菜单.其典型应用便是Visio中滑动菜单样式.本人在Web中实现了类似的控件,拿出来希望和大家一起交流一下. 阅读全文

如坐春风 2008-05-08 14:20 发表评论

Web页面中选项卡Tabview的实现

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

摘要: TabView是许多可视化编程环境提供的常见组件,它通过选项卡将内容分类,因此能在紧凑的空间内显示众多内容,这个特点使得它在可视化编程环境中很常见.
随着Web的发展,Web页面元素也开始了组件化的历程,TabView也不例外.对此Extjs的组件最值得称道,只是似乎需要一定的时间来钻研.
本人闲暇之余也实现了自己的TabView,目前在IE下运行正常和FireFox均运行正常,这里贴出来希望和大家一起探讨. 阅读全文

如坐春风 2008-05-05 16:47 发表评论

使用CSS实现侧边Tab菜单栏

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

摘要: 侧边Tab菜单栏与一般菜单栏的区别在于菜单项与左边内容栏的贯通效果,这样做的好处在于用户通过菜单就能看出当前所在的页面,无需记忆或在页面上查找.Gmail和Google Group都采取了这种直观式的设计.
如果采用表格实现首页的效果比较困难,而使用CSS对DIV和无序列表加以限制就比较容易了,本文将逐步讲述这一过程. 阅读全文

如坐春风 2008-05-05 15:29 发表评论

使用commons-fileupload实现单个和多个文件上传

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

摘要: 对于实现文件上传功能来说，Commons-fileupload组件是一个不错的选择，本文使用它实现了单个文件及多个文件上传，这里将实现过程写出来与大家共享。阅读全文

如坐春风 2008-04-12 14:16 发表评论

JFreeChat四种图表的绘制例程

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

摘要: 本文书写了使用JFreeChart生成平面饼图,3D饼图,折线图和柱状图的示例代码,并附有代码下载. 阅读全文

如坐春风 2008-04-08 13:00 发表评论

表单验证方式的通用化

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

摘要: 在上一篇“Web页面表单域验证方式的改进“中，我们通过把验证法则（正则表达式和是否必填字段）写在表单域中，将验证过程和验证法则成功的分离，从而减少了重复代码，使验证变得简单易行，在实际使用中，我们可以把验证过程放在一个JS文件中，对于全输入验证界面，在页面的表单验证部分只需要调用其中的checkForm函数就能进行有效验证，页面上不再需要书写重复性高的JS验证代码；对于复杂的表单，比如其中含有复选框或是需要两个文本框比较的地方，这种方法也可让你不写通用验证代码而把主要精力放在特殊的验证上。这些能减轻不少工作量，让繁琐的工作变得轻松愉快起来。阅读全文

如坐春风 2008-04-07 21:41 发表评论

Web页面表单域验证方式的改进

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

摘要: 我们对网页表单域验证常采取JS验证的方式，即取得某个表单域的值，然后对它进行正则表达式验证，如果通过则进行下一项验证，否则显示出错文字并置上焦点，这种做法很常见而且很凑效，但这样的页面写多了或者表单字段多了也容易让人烦躁，比如说这些验证除了具体的正则表达式不同，其他代码均高度相似，其中明显有大量的重复内容，而且表现和行为也未完全分离。能否将它改进一下呢？本文将探讨一下新的方法，这种做法的想法是把验证的正则表达式作为表单域属性的一部分，这样取值验证就融合到了一起，另外让提示span的id也和表单域ID关联起来，这样出错时能更快找到它。如此处理后验证的代码可以归纳到一个表单验证实用类中，大大减少了页面的JS代码量同时减轻我们的重复劳动。阅读全文

如坐春风 2008-04-06 16:50 发表评论

使用DOM操作表格

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

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

如坐春风 2008-04-05 16:05 发表评论

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 发表评论

网页表单的制作和验证过程

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

摘要: 在Webapp编程中程序员经常要和前台页面打交道，CSS，HTML和JS等都是经常需要操作的内容，对于直接用户来说，这些就是他们印象中的整个程序，如果前台页面不美观或是使用不便将影响用户对程序的印象，因此程序员应该在前台上投入一些精力学习是值得的，在Web2.0时代来临之后更是如此。

下面就是一个通用网页表单的制作和验证过程。阅读全文

如坐春风 2008-03-23 17:33 发表评论