jQuery UI Accordion Embedded Form Rename Header
I want to embed a form in my accordion. I want a user to be able to edit the contents of the accordion. Things work fine for the content section of the accordion, but when I try to edit the header of the accordion I can't insert spaces (and when I do press space the currently selected content panel collapses). I'm guessing this has something to do with the fact that the header is defined by a <a></a> block, but I can't think why pressing space bar matters or how to get around the issue.
function makeAccordion(){
var stop = false;
$("#accordion h3").click(function(event){
if (stop) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});
$("#accordion").accordion({
开发者_JAVA技巧 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>
Thanks!
I found a working solution, but I'm not sure of the consequences.
In 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;
},
Notice the "fall through" from space to enter. I added a break:
_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;
},
You still get the closing behavior on pressing "enter", so feel free to break there if necessary as well. I think the problem is in
this._clickHandler( { target: event.target }, event.target );
but I didn't see it on my first read through. This edit works for me.
Hope that helps
加载中,请稍侯......
精彩评论