为了是客户更早的看到效果,提出双方理解有误的地方,明确需求分析。可以首先开发一个原型来发现更多、更详细的功能定义。这就是模型,模型首先要容易开发,速度要快。最好的方法就是只搭建一个界面,提供功能预览。
本例使用html快速搭建软件环境。采用JQuery+html+div/css的方法,用html搭建基本架构,DIV+CSS书写表现,JQuery编写动态效果和Ajava功能。本例中菜单项是使用JS动态下拉效果,点击后用Ajaxa功能导入相应的操作页面给固定ID的DIV元素,实现了动态载入,不刷新的效果。
本例中,html页面:首先连接样式表<linkhref="style/common.css" rel="stylesheet"type="text/css"/>,导入js代码库<script language="javascript"src="My97DatePicker/WdatePicker.js" type="text/javascript"></script>。对页面的布局定义如下:
Banner | |
Left | Fun |
Fun | |
Footer |
在导入的公共JS代码中,使用JQuery建立加载函数$(document).ready(function(){$(".popup").click(popTips);$('#menua').click(clickLeftMenu);})以上代码在页面加载完成后,为.popup类和menu类中的a元素定义了点击方法,分别调用popTips和chickLeftMenu方法。这两个方法实现弹出提示和访问Ajaxa功能。
其中访问Ajaxa功能,解析菜单的href属性,使用Ajax功能动态加载html文件到Fun中去,实现无刷新加载功能。
function clickLeftMenu(){
$(this).css("font-weight","bolder");
$(this).parent().siblings().find("a").css("font-weight","normal");
var obj=$(this).siblings('ul');
varicon=$(this).siblings('img');
if(obj.css("display")=="none")
{
obj.slideDown();
icon.attr("src","images/arrowup.png");
}
else
{
obj.slideUp("fast");
icon.attr("src","images/arrowdown.png");
}
var tourl = $(this).parent().attr("href");
if(tourl!="#"){
var content=$.ajax({
url:tourl,
async:false,
dataType:"html",
error:function(){
$("#content").html("<pclass='windown-error'>加载数据出错...</p>");
},
success:function(html){
$("#content").html(html);
}
});
}
}
以上程序,根据点选项目不同,加载不同页面。DIV+CSS可以快速定义界面,而且复用度高,非常好用。使用SVN工具时,为了在某一项重大改变之后继续开发程序,一般需要设置分支,分支相当于一个程序的拷贝版本,设定好分支后,相当于有了两个不同的程序。