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-ui-tabs/ 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 jquery...@googlegroups.com. To unsubscribe from this group, send email to jquery-ui+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=.
