如何設置狀態高亮上primefaces嚮導

我不知道它是如何可能改變primefaces嚮導的默認行爲如何設置狀態高亮上primefaces嚮導

<p:wizard />

我的意思是用戶點擊下一步按鈕高亮步驟（片）後，僅當前步驟。不是他之前的步驟。在我執行primefaces wizzard的過程中，我會得到在當前步驟之前繪製步驟的行爲。要做到這一點，我只需要在當前選項卡前面的選項卡上添加「ui-state-highlight」類。當然，機制應該在用戶點擊後退按鈕時起作用

我試過使用'onnext'和'onback'客戶端事件，但沒有結果。這些事件在下一步呈現之前執行。實際上這是由函數onnext和onback的變化被primefaces scirpt覆蓋。

有人可以幫助解決這個問題嗎？我會爲幫助

來源

2016-12-16 Michał Ziembiński

該組件具有AJAX事件處理程序。那些你可以激發你喜歡的任何javascript的'oncomplete'，包括使用一些jquery來查找活動標籤並將類添加到標籤之前。另一個選擇是下載組件的源代碼，對其進行調整並使其突出顯示更多內容。 – Kukeltje

我找到解決方案表示感謝。

我們需要從

//update step status 
if($this.cfg.showStepStatus) { 
    $this.stepControls.removeClass('ui-state-highlight'); 
    $($this.stepControls.get(currentStepIndex)).addClass('ui-state-highlight'); 
}

覆蓋loadStep的功能PrimeFaces.widget.Wizard.prototype

我改變oryginal一段代碼

到

//update step status 
if ($this.cfg.showStepStatus) { 
    var stepsCon = $this.stepControls; 
    stepsCon.removeClass('ui-state-highlight'); 
    stepsCon.each(function (index) { 
     if (currentStepIndex >= index) { 
      $(this).addClass("ui-state-highlight"); 
     } 
    }); 
}

，並開始按我的預期工作。

所有的JavaScript覆蓋看起來像

PrimeFaces.widget.Wizard.prototype.loadStep = function (stepToGo, isBack) { 
var $this = this, 
     options = { 
      source: this.id, 
      process: this.id, 
      update: this.id, 
      formId: this.cfg.formId, 
      params: [ 
       {name: this.id + '_wizardRequest', value: true}, 
       {name: this.id + '_stepToGo', value: stepToGo} 
      ], 
      onsuccess: function (responseXML, status, xhr) { 
       PrimeFaces.ajax.Response.handle(responseXML, status, xhr, { 
        widget: $this, 
        handle: function (content) { 
         this.content.html(content); 
        } 
       }); 

       return true; 
      }, 
      oncomplete: function (xhr, status, args) { 
       $this.currentStep = args.currentStep; 

       if (!args.validationFailed) { 
        var currentStepIndex = $this.getStepIndex($this.currentStep); 

        if ($this.cfg.showNavBar) { 
         if (currentStepIndex === $this.cfg.steps.length - 1) { 
          $this.hideNextNav(); 
          $this.showBackNav(); 
         } else if (currentStepIndex === 0) { 
          $this.hideBackNav(); 
          $this.showNextNav(); 
         } else { 
          $this.showBackNav(); 
          $this.showNextNav(); 
         } 
        } 

        //update step status 
        if ($this.cfg.showStepStatus) { 
         var stepsCon = $this.stepControls; 
         stepsCon.removeClass('ui-state-highlight'); 
         stepsCon.each(function (index) { 
          if (currentStepIndex >= index) { 
           $(this).addClass("ui-state-highlight"); 
          } 
         }); 
        } 
       } 
      } 
     }; 

     if (isBack) { 
      options.params.push({name: this.id + '_backRequest', value: true}); 
     } 

     PrimeFaces.ajax.Request.handle(options); 
};

來源

2016-12-17 13:40:04

如何設置狀態高亮上primefaces嚮導

回答

相關問題