Creating jQuery UI Tabs - support needed...

[Witold Szczerba]

Hi there,
I was trying to create a jQuery UI Tabs widget. It went smoothly at
the beginning, but things became complicated.
Little introduction of jQuery Tabs:
- DOM structure:
<div>
<ul>
<li><a href="#tab-id">tab header</a></li>
...more tab headers
</ul>
<div id="tab-id"> ...markup ... </div>
...more tab markups
</div>

- converting DOM into jQuery Tab:
$('selector').tabs();

From now on, adding or removing tabs should be performed by Tabs API:
- adding a tab: $('...').tabs('add','#tab-id', 'tab title');
- removing: $('...').tabs('remove', tabIndex);
Complete documentation: http://jqueryui.com/demos/tabs/

I have forked angular-seed and created a jquery-tabs branch:
https://github.com/witoldsz/angular-testfield/tree/jquery-tabs

As of now it works like this:
one has to provide a markup:
<div my:tabs="someArray">
<div class="template"> ...markup... </div>
</div>
example:
https://github.com/witoldsz/angular-testfield/blob/jquery-tabs/app/index.html

And this is how widget's source code looks like:
https://github.com/witoldsz/angular-testfield/blob/jquery-tabs/app/js/widgets.js

Controller is, of course, not aware of all that "tabs case":
https://github.com/witoldsz/angular-testfield/blob/jquery-tabs/app/js/controllers.js

My widget works like this:
- at the very beginning it:
-- adds empty: <ul></ul> node,
-- hides a template div,
-- applies $(...).tabs() to make it a jQuery UI Tabs component,
- then it applies a watch on the size of the provided array:
-- first time it iterates over all the array's elements to create tabs,
-- each time the array changes it size, it adds or removes the tabs.

That was easy. Here comes the problems - for full functionality, I
should create a sub-scope for every tab, so the template markup could
be resolved and notified on content changes - this is how ng:repeat
works. I was trying to transfer ng:repeat's solutions into my widget,
but it seems to be too much complicated for me (the "compiler" is yet
to be tamed by me :). I think the other problem is that, I don't know
why, the Angular's internat API is totally different from SPI. Why it
is like this? How would the ng:repeat widget look like if it was
created using documentation of widgets and scopes? I think, creating
new widgets would be easier if built-in widgets looked the same as
custom ones.

Can you help me finishing the Tabs? I think it would be very helpful,
for the community, to have a solution for the complex widget like this
:) :)

Thanks,
Witold Szczerba

[Misko Hevery]

Hi Witold,

First, i think it is great that you are doing this. I have started something similar here: https://github.com/angular/angular-jquery-ui but I have not attacked the tab problem. Perhaps we could merge them in the future.

Why is the api different? This has to do with compression. Calling internal function createScope() will compress better angular.scope() since the minifier can rename createScope but not angular.scope. That is the reason why we don't use the same API.

Now to answer your question. 

What you need to do is to create a child scope like this

var childTabScope = parentScope.$new();

You will need to keep track of the childTabScopes and call $eval on them (this will change soon with the release of https://github.com/mhevery/angular.js/tree/scope branch which cleans up a lot of mess around scopes)

To compile the child scope you should do:

var tabTemplate = angular.compile(tabElement) // you should do this only once

var childInstance = tabTempale(childTabScope, function(childTabElement){

  // attach the childTabElement back to the DOM

});

Give this a try, and let me know where you need further help.

-- misko

--
You received this message because you are subscribed to the Google Groups "angular" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Witold Szczerba]

Thank you Misko!
I was almost supposed to run my code when I saw your tips, and now I
see I did it wrong. Will update my repository once it works. Then you
could pull the code into angular-jquery-ui, or should I push my code
there - git is still new to me, so please advise.

Thanks again,
Witold Szczerba

2011/5/16 Misko Hevery <mi...@hevery.com>:

[Witold Szczerba]

Hello, hello, hello...
I have got that component working. I have updated my repository, so
everyone can see how does it look like now.
This is, of course, just a prototype, kind of a template for creating
tabs or tabs-like components. I do not need such a component right
now, but I would consider making it more flexible. The friend of mine
told me he would like to use a tab component to build a form where two
first tabs are for loan details, then comes the persons. One tab for
each person participating in a loan. The more people are involved the
more tabs are to be added...

So I was thinking about something like this:
<my:tabs> <!-- tabs' container -->
<my:tab title="first title expression"> first tab...</my:tab>
<my:tab title="second title..."> second tab... </my:tab>
<my:tab controller="ThisIsOptionalCtrl" loop="for p in persons"
title="{{p.firstName}} {{p.lastName}}">...</my:tab>
<my:tab title="last title..."> final tab... </my:tab>
</my:tabs>
The loop expression could be more flexible, eg.:
- "for p in persons"
- "persons" (shortcut for the above)
- "for (key, value) in someObject" (works like in ng:repeat)
That all would be awesome! :)
Maybe I could persuade my friend to create such a component and give
it community.

Oh, I have forgot: Misko, you have said:
> You will need to keep track of the childTabScopes and call $eval on them

what does it means exactly in my case?

Thanks,
Witold Szczerba

2011/5/16 Misko Hevery <mi...@hevery.com>:

[Misko Hevery]

This looks great! So do you have any code which you could share with us? Perhaps we could provide some feedback.

-- Misko

[Witold Szczerba]

Yes - I have pushed all the code which implements my initial approach.
The locations are the same:

https://github.com/witoldsz/angular-testfield/blob/jquery-tabs/app/index.html
https://github.com/witoldsz/angular-testfield/blob/jquery-tabs/app/js/widgets.js
https://github.com/witoldsz/angular-testfield/blob/jquery-tabs/app/js/controllers.js

Fell free to use/modify/adopt it, but this is a prototype-quality code
and it does not implement the cool features I have mentioned before -
like mixing constant and dynamic tabs or allowing some or all tabs to
be loaded just-in-time, so invisible tabs would not occupy DOM and CPU
time (many controllers watching and tracking invisible tabs).

By the way - is this possible to somehow temporarily "freeze"
controllers or selected DOM elements, so we could keep invisible tabs
in DOM, but in a way they would not take CPU time for 2-way data
binding?

Regards,
Witold Szczerba

2011/5/17 Misko Hevery <mi...@hevery.com>:

[Raj]

Misko,
Is the code in this location for jQueryUI usable? I see that the last commit was a while ago.
https://github.com/mhevery/angular.js/tree/scope

Regards,
Raj

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

[ProLoser]

Wanted to direct you guys to this project: https://github.com/angular-ui We're looking for more contributors and your additions might be awesome to integrate.

Our codebase is very up to date and we have a small handful of members who seem to be very motivated at moving it forward. We even started a new group for the project's development discussions: https://groups.google.com/forum/?fromgroups#!forum/angular-ui

I have personally developed a tabbing solution that integrates with the Router, however I have not tackled using jQuery UI for too much (yet). We have a pass-through directive that we tend to recommend to most people looking to port jQuery UI functionality over instead of manually creating a new directive for each and every UI plugin.

https://github.com/angular-ui/angular-ui/blob/master/src/js/directives/jq.js

[Tami Wright]

Hey,

Is there an example any where of using Angular-UI to create Jquery UI tabs via the passthrough?

Thanks,

Tami

[Pawel Kozlowski]

Or just use tabs from http://angular-ui.github.com/bootstrap/ .....

Cheers,
Pawel

On Mon, Feb 18, 2013 at 10:01 PM, Dean Sofer <dean...@gmail.com> wrote:
> Sorry I'm too busy running around to create a demo.
>
> Just make sure you have the lib and CSS included, create the necessary HTML
> according to their docs, and then do `ui-jq="tabs"` on the container. In
> their demo (http://jqueryui.com/tabs/) this would be the `<div id="tabs">`
> element.
>
> --
> Dean Sofer
> DeanSofer.com
> 714.900.2254

> --
> You received this message because you are subscribed to the Google Groups

> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.

> To post to this group, send email to ang...@googlegroups.com.

> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.

>
>
>
>
> --
> You received this message because you are subscribed to the Google Groups

> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.

> To post to this group, send email to ang...@googlegroups.com.

> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>



--
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/