All you need is an event to cancel. You can already do this by preventing the default action in tabs' select event. So we need to bring accordion and tabs in line with each other. Feel free to create a ticket for this.
On Nov 21, 12:18 am, "\"Cowboy\" Ben Alman" <[email protected]> wrote: > So, I'm looking for a generalized method of decoupling event and > action in the current 1.7.2 jQuery UI Tabs and Accordion widgets. > > What do I mean by "decoupling event and action" ? > > First, let me say that I may have the terminology wrong. Please > correct me if there is a better way to describe what I'm trying to do! > > Anyways.. by default, when you click a tab or accordion header, the > content is immediately changed to the new content. The event is the > "click" and the action is the "showing content". They are tied > together very tightly, meaning that separating them is not completely > intuitive (but It is possible, and I'll illustrate this below). > > So, what happens when we want to use some kind of hash history plugin > to "keep track" of widget state changes? Well, you need to decouple > these two things. > > Instead of Event -> Action, you'd want something like: > Event -> set the location.hash (window.onhashchange fires) get the > location.hash -> Action > > And because a change in the location.hash is what causes the "action", > browser history can be used to effectively navigate back + forward to > change the state of the widget in question. > > So, I've written a highly generalized window.onhashchange plugin > called jQuery BBQ that functions as the "mustard" in this "decoupled > event + action" sandwich, and my jQuery UI Tabs example works great.. > but now that I've tried to apply the same approach to jQuery UI > Accordion, I've run into some snags. > > Just like with tabs, it looks like I can do what I need to do with > accordion, but it's not particularly pretty. The code I need to use to > decouple event and action in accordion is quite different than the > tabs code, and it seems like they should be very similar.. or even the > same. > > Take a look at this > example:http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery... > > Because I couldn't find any built-in "do this instead of changing the > content" method for clicking tabs, I needed to bind a jQuery click > event to override the default behavior of some widget-specific > internals ( ul.ui-tabs-nav a ) which feels awkward and hackish. > > And since accordion also seems to lack a built-in "do this instead of > changing the content" method, and since the underlying code structure > is different, I'd need a whole different set of code to handle that. > The click handler would probably be similar.. but the jQuery selector > to find the clickable elements and compute their index would be > different enough to be problematic. > > Also, even though the .tabs( 'select', idx ); and .accordion > ( 'activate', idx ) methods work perfectly for the "action" part, > because they are named inconsistently, it is hard to write generalized > code to handle changing state across both widgets. > > So let's say I want a generic handler for jQuery UI Tabs and Accordion > widgets (and maybe others), to convert a state object into actual > selected states for those widgets. > > The example page I'm thinking of contains #my_accordion and #my_tabs > elements. The names would, in practice, be quite different, but for > the example's sake I'll keep it simple. > > Ok, so given that, let's say that I have an object that represents the > selected state of all current page jQuery UI widgets: { my_accordion: > 1, my_tabs: 2 } which means "the selected index of #my_accordion is 1 > and #my_tabs is 2. Now, let's say we somehow manage to reset the state > of the widgets (via page reload or the like) but then want to apply > the states in our state object to all relevant widgets. > > Can anyone think of an elegant, simple way to write some generalized > code that allows the state of both widgets on the page to be set with > just that data object? How about an elegant, simple way to specify "do > this instead of changing the content" for both widgets? Note that you > can't rely on the word "accordion" or "tabs" in the name of the key, > and it's impractical to test "if this_key or that_key then accordion > else tabs" because it's just not generalized... so, ideas? > > I think we need two things: > 1) A generalized "do this instead of changing the content" handler > that can figure out the proper index-to-clickable-element matrix, that > can be bound to the correct elements. > 2) A generalized "set the selected index of widget #foo to N" handler > that can figure out which type of widget is being referenced, so it > knows what method to call to set the index. > > My purpose for this very long, complex question is simple: > I want to create a simple example that anyone can learn from, and I > want to show how event and action can be decoupled in jQuery UI > widgets, allowing anyone who understands the concept to use any > "history enabling" or "state changing" plugin or controller to manage > one or more jQuery UI Tabs / Accordion / ??? widgets in a page. > > Thanks for any suggestions you might have, guys! > > - Ben -- You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=.
