Question

我在这里找到了适合我需要的优秀jQuery向导Jerod Santo blog。我在第一步添加了TextBox来测试它。

当我在文本框中添加一些值时，单击下一步然后再返回我失去了价值。

这是我的demo ，这里是源code有没有办法在客户端保留这些值而不用带有ajax调用的服务器。我认为这个问题可能是内容隐藏。你认为有解决方案吗？

更新：我创建了自己的jQuery向导来完成这项工作。我迟早会把它作为答案发布。

Answer 1

在这里，您需要维护向导状态的映射以及该特定状态的某些属性值。我不记得我使用此代码的确切位置。但是这里有一些对你有用的片段。

在JS中映射实现

Map = function(){
  this._dict = [];
}
Map.prototype._get = function(key){
  for(var i=0, couplet; couplet = this._dict[i]; i++){
    if(couplet[0] === key){
      return couplet;
    }
  }
}
Map.prototype.put = function(key, value){
  var couplet = this._get(key);
  if(couplet){
    couplet[1] = value;
  }else{
    this._dict.push([key, value]);
  }
  return this; // for chaining
}
Map.prototype.get = function(key){
  var couplet = this._get(key);
  if(couplet){
    return couplet[1];
  }
}

然后我使用John Resig的Class implementation来编写一个处理所有向导的FlowManager。

var FlowManager = Class.extend({
  init: function(screenList){
    this.screenArray = screenList;
    this._currentIndex = 0;
    this.currentScreen = this.screenArray[this._currentIndex];
    this.map = new Map();
    this.loadFunctionMap = new Map();
  },

  getCurrentScreen: function(){
    return this.currentScreen;
  },
  _onload: function(){    
      //TODO
  },
  loadDefaultScreen: function(){
        this._currentIndex=0;
        this.currentScreen = this.screenArray[this._currentIndex];
        this.render();    
  },
  loadScreen: function(screenName){

  },   
  _next: function(){

  },
  _previous: function(){

  },
  render: function(){
        //  your logic
  },  
  loadNextScreen: function(){
        this._next();
        this.render();    
  },
  loadPrevScreen: function(){
        this._previous();
        this.render();
  }
  // any other utility functions
});

然后我可以调用它，如下所示。

var CreatePackageFlow = FlowManager.extend({
      init: function(screenList){
        this._super(screenList);
        //global map data for screens
        this.map.put("UploadPackageSubtitle","Create New Package : Upload Resources");      
        this.map.put("SummarySubtitle","Create New Package : Summary");
      },
      //onload screen functions TODO: auto-invoke them on screen navigation
      _CreatePackage : function(){
      },
      _UploadPackage : function(){
      },
      _PackageSummary : function(){       
      }
});

和

newPackageFlow = new CreatePackageFlow(["CreatePackage","UploadPackage","PackageSummary"]);
newPackageFlow.render();

我希望您能了解如何使用此代码段。我们的屏幕上有很多向导，所以使用了上面提到的逻辑。它不是理想的，但是模块化的静态向导，你只在最后一页提交。

Answer 2

这是解决方案。我完全改变了代码并创建了自己的向导。 Demo和 source code可用。

如何使用向导下一步和后退按钮在客户端保留TextBox值？

2 个答案: