jQuery UI Accordion Embedded Form Rename Header

我想在手風琴中嵌入一個表單。我希望用戶能夠編輯手風琴的內容。事情對手風琴的內容部分工作正常，但是當我嘗試編輯手風琴的標題時，我無法插入空格（當我按空格鍵時當前選定的內容面板會摺疊）。我猜這與這個事實有關，頭部由<a></a>塊定義，但我不明白爲什麼按空格鍵很重要或者如何解決這個問題。jQuery UI Accordion Embedded Form Rename Header

function makeAccordion(){ 
      var stop = false; 
      $("#accordion h3").click(function(event){ 
       if (stop) { 
        event.stopImmediatePropagation(); 
        event.preventDefault(); 
        stop = false; 

       } 
      }); 
      $("#accordion").accordion({ 
       header: "h3" 
      }).sortable({ 
       axis: "y", 
       handle: "h3", 
       stop: function(event, ui){ 
        stop = true; 
       } 
      }); 
     } 

<body> 
    <div id="accordion"> 
     <form action="" method="post"> 
      <div id ="1"> 
       <h3 id ="h3_1"><a href="#">Step Name: <input type="text" name="stepName"></a></h3> 
       <div id ="content_1"> 
        Step: <input type="text" name="content"> 
       </div> 
      </div> 
     </form> 
    </div> 
</body>

謝謝！

來源

2011-04-20 Tyler DeWitt

我找到了一個工作解決方案，但我不確定後果。

在jquery.ui.accordion.js：

_keydown: function(event) { 
    if (this.options.disabled || event.altKey || event.ctrlKey) { 
     return; 
    } 

    var keyCode = $.ui.keyCode, 
     length = this.headers.length, 
     currentIndex = this.headers.index(event.target), 
     toFocus = false; 

    switch (event.keyCode) { 
     case keyCode.RIGHT: 
     case keyCode.DOWN: 
      toFocus = this.headers[ (currentIndex + 1) % length ]; 
      break; 
     case keyCode.LEFT: 
     case keyCode.UP: 
      toFocus = this.headers[ (currentIndex - 1 + length) % length ]; 
      break; 
     case keyCode.SPACE: 
     case keyCode.ENTER: 
      this._clickHandler({ target: event.target }, event.target); 
      event.preventDefault(); 
    } 

    if (toFocus) { 
     $(event.target).attr("tabIndex", -1); 
     $(toFocus).attr("tabIndex", 0); 
     toFocus.focus(); 
     return false; 
    } 

    return true; 
},

的通知從太空進入「落空」。我添加了一個突破：

_keydown: function(event) { 
    if (this.options.disabled || event.altKey || event.ctrlKey) { 
     return; 
    } 

    var keyCode = $.ui.keyCode, 
     length = this.headers.length, 
     currentIndex = this.headers.index(event.target), 
     toFocus = false; 

    switch (event.keyCode) { 
     case keyCode.RIGHT: 
     case keyCode.DOWN: 
      toFocus = this.headers[ (currentIndex + 1) % length ]; 
      break; 
     case keyCode.LEFT: 
     case keyCode.UP: 
      toFocus = this.headers[ (currentIndex - 1 + length) % length ]; 
      break; 
     case keyCode.SPACE: 
      break; 
     case keyCode.ENTER: 
      this._clickHandler({ target: event.target }, event.target); 
      event.preventDefault(); 
    } 

    if (toFocus) { 
     $(event.target).attr("tabIndex", -1); 
     $(toFocus).attr("tabIndex", 0); 
     toFocus.focus(); 
     return false; 
    } 

    return true; 
},

你仍然可以按住「進入」關閉表現，所以覺得免費的，如果必要的，也是打破那裏。我認爲問題出在

this._clickHandler({ target: event.target }, event.target);

但我在第一次通讀時沒有看到它。這個編輯適合我。

希望可以幫到

來源

2011-04-21 16:55:38

jQuery UI Accordion Embedded Form Rename Header

回答

相關問題