Struts2如何實現頁面分步驟滑動

Struts2如何實現頁面分步驟滑動

1.在css文件中加入這兩個元素：

.fcwindow
{
 width:990px;
 position:relative;
 min-height:400px;
 overflow-x:hidden
}

#fccontent
{
 position:relative;
 width:3960px;
 overflow-x:hidden;
}

2.在js文件中加入代碼：
 
fcnext是下一步！

fcup是上一步！

然後fcpArray裡面的函數，就是各個步驟觸發的函數，自行填寫即可。在測試階段可以：

a = function(){
    alert("function a");
}
b = function(){
    alert("function b");
}
c = function(){
    alert("function c");
}

var fcprocess = 0;// 當前步驟
var fcmaxprocess = 4;// 最大步驟數
var baseMoveLength = 990;// 步驟移動距離
var moveSpeed = 1000;//
var fcpArray = new Array();// 步驟切換時，觸發函數

//切換函數
fcpArray.push(a);
fcpArray.push(b);
fcpArray.push(c);

this.fcnext = function(index) {
 var left = $("#fccontent").css("left");
 
 var movedis = 0;
 if (left == "auto") {
  movedis = -baseMoveLength;
 } else {
  var l = left.length;
  var d = left.substr(0, l - 2);
  // alert(d+"-"+left);
  movedis = new Number(d);
  movedis -= baseMoveLength;
  // alert(moveid+"ds"+d);
 }
 
 $("#fccontent").animate({
  left : movedis
 }, moveSpeed, function() {
  if (index >= 0) {
  fcpArray[index]();
  }

 });
};
this.fcup = function(index) {
 var movedis = 0;
 var left = $("#fccontent").css("left");
 if (left == "auto") {
  movedis = 0;
 } else {
  var l = left.length;
  var d = left.substr(0, l - 2);
  movedis = new Number(d);
  movedis += baseMoveLength;

 }

 $("#fccontent").animate({
  left : movedis
 }, moveSpeed, function() {
  if (index >= 0) {
  fcpArray[index]();
  }
 });
};

3.效果展示：

struts2文件上傳(保存為BLOB格式) http://www.linuxidc.com/Linux/2014-06/102905.htm

Struts2的入門實例 http://www.linuxidc.com/Linux/2013-05/84618.htm

Struts2實現ModelDriven接口 http://www.linuxidc.com/Linux/2014-04/99466.htm

遇到的Struts2文件下載亂碼問題 http://www.linuxidc.com/Linux/2014-03/98990.htm

Struts2整合Spring方法及原理 http://www.linuxidc.com/Linux/2013-12/93692.htm

Struts2 注解模式的幾個知識點 http://www.linuxidc.com/Linux/2013-06/85830.htm

Struts 的詳細介紹：請點這裡
Struts 的下載地址：請點這裡