Explore our sites

Stack Exchange
tour help
Take the tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 6 down vote favorite

I'm working on a site that has a few site design specific widgets like tabs, alerts, messages, autocomplete etc. Unfortunately they're either global functions:

customAlert("message", "buttontext", callback);

or jquery ui widgets:

$(".tabs").customTabs();

I've started on rewriting these in the following format: 

sitename.ui.alert(settings, callback);
sitename.ui.message(message);

but I'm stuck on how to do this for UI widgets. I want the API to be simple and straightforward and discover-able with Google Chromes console.

The following example works, however I don't like the idea of having function names as string literals. Also it mixes DOM related code with my API code.

$(".tabs").customTabs("hideByIndex", 3);

So the tabs API call should look something like this:

sitename.ui.tabs($selector); // init 
sitename.ui.tabs($selector).hideByIndex(3); // call function

or this:

sitename.ui.tabs.create($selector); // init
sitename.ui.tabs.hideByIndex($selector, index); //call function

Or is there another way? Please leave your thoughts on what path I should take.

share|improve this question
1  
This question belongs in code review, not stackoverflow. –  jfriend00 Dec 19 '11 at 17:12
add comment

migrated from stackoverflow.com Dec 19 '11 at 19:52

This question came from our site for professional and enthusiast programmers.

2 Answers

up vote 2 down vote

here's my two cents:

sitename.ui.tabs.create(name, $selector);
sitename.ui.tabs.get(name).hideByIndex(index);

Basically you give the tab set a name when you create it, then you access it by that name rather than a selector.

share|improve this answer
add comment
up vote 2 down vote accepted

This answer was provided by Munter from #javascript on Quakenet. 

var tab = sitename.ui.tabs.create($selector, options); // Creating the tab and return the instanse
tab.hideByIndex(1); // calling the function on the instanse
sitename.refrences.tabs.tabName = tab; // store it in a namespace for later use if required


var tab = sitename.refrences.tabs.tabName; // load from namespace
tab.showByIndex(1); // call functions on it
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.