HTML5 tabbed extension panel

[nemanjag6185418]

Hi guys,

I'm learning about html5 extension panels, since... you know - with Configurator life was easy.... anyway, I was trying to find example and how-to make panel which allows me to have several tabs in it. With Configurator 4 that was very easy thing to make. Can someone give me simple example of html to get any result with tabs. I'm not that skillful programmer but I can catch few things.

Thanks in advance.

[Chuck Uebele]

I would explore DavideBarranca‌,'s github site. He's got a lot of good examples.

undavide (Davide Barranca) · GitHub

[DavideBarranca]

Thanks for the mention Chuck Uebele‌, I would also suggest to look at the HTML Panels Tips series‌ too.

Davide

[Chuck Uebele]

Moving post to scripting forum.

[matias.kiviniemi]

+1 On Davides site and motivational wish that once you get over the initial problems, HTML really does offer so much that it is worth the effort.

[nemanjag6185418]

I already visited all links suggested, before making this post... saw the tips, visit github... searched and searched but there isn't single example for tabbed panel. Adobe's Kuler has tabs and I ended up downloading as package and extracting to study it. However, code is too complicated for me while index.html and css have just few lines of code.

I'm hoping for some clean, simple example how to code this thing. I get advantages of html5, but creating panels and extensions was sooo easy with Configurator. I dont get why Adobe dont want something similar for html5 version. I read that Adobe Extension Manager useful for exchange is also gonna be dead. Somehow, writing in html makes me feel like we are back 10-15 years in past... it feels so primitive. Although, again - I see advantage having html5 based panels. Just some friendly UI for making them would be nice. I had so much trouble installing Adobe Extension Builder 3 and Eclipse + connecting with Java, and making them work. There isn't any decent tutorial for that. Every post related to html5 starts from middle, or it covers bare basic without look at whole story. If I want to adjust panel to work with CC,CC2014 and CC2015 - I have to manually open manifest and change version numbers and CEP... which was hard to find out! Why like that? and not with some simple button/option?

Anyway.... common guys - give some good example with tabs (or what's proper code for it)

[matias.kiviniemi]

Once you get everything going and your HTML panel running in Photoshop, you can basically Google any HTML/CSS tutorial for creating a tabbed interface.

My solution was to define CSS classes "tab" and "hidden" (basically 'display: none') and then in tab buttons remove that class from chosen add to others. Basically add an onClick="showTab('#this_tab_id')" and using jQuery

function showTabs(tab_id_array) {

  $('.tab:not('+tab_id_array+')').addClass("hidden");

  $('.tab'+tab_id_array).removeClass("hidden");

}

One issue is supporting all Photoshop UI color modes, but Davide had a good tutorial for that.

[Chuck Uebele]

I agree with you about how hard this seems, and how Adobe is changing everything all the time. I use Brackets for the few panels I made. It seems much easier than the other stuff. I was going to mention that you should be able to use any jquery code for widgets like a panel, as Matias stated.