jQuery Tabs Help
Permalink
Hello (sorry in advance for the long post),
I am looking to a way to use jQuery tabs on my site, without having to mess with the C5 core. (The end goal is to make a tab-builder block, but need tabs to work first). However, it appears that the "tabs" feature of the jQuery UI is not implemented in the jQuery UI build included with C5 5.3.1.
It works alright if I just include another Jquery UI out of edit mode, but I do need the user to see the tabs correctly in edit mode.
It seems to mess up the dialogs that pop up when you click on a block to edit/delete/move it. At first I thought it was because I was trying to include a jQuery UI theme, but even after removing the theme, the tabs still bork the C5 edit stuff. I have also tried including another jQuery UI build that only had the minimum tabs functionality, but it was a NO GO!
I have read a few thread on the forums, but I am not sure they really apply to my situation:
http://www.concrete5.org/index.php?cID=4437...
http://www.concrete5.org/community/forums/usage/js_includes_workaro...
Would it be possible to use a different jQuery UI build than the one Concrete is using, or is there some other way I can achieve this functionality?
Any help would be greatly appreciated.
Also, nice work on Concrete5! This is the CMS I have been dreaming about for years.
I am looking to a way to use jQuery tabs on my site, without having to mess with the C5 core. (The end goal is to make a tab-builder block, but need tabs to work first). However, it appears that the "tabs" feature of the jQuery UI is not implemented in the jQuery UI build included with C5 5.3.1.
It works alright if I just include another Jquery UI out of edit mode, but I do need the user to see the tabs correctly in edit mode.
It seems to mess up the dialogs that pop up when you click on a block to edit/delete/move it. At first I thought it was because I was trying to include a jQuery UI theme, but even after removing the theme, the tabs still bork the C5 edit stuff. I have also tried including another jQuery UI build that only had the minimum tabs functionality, but it was a NO GO!
I have read a few thread on the forums, but I am not sure they really apply to my situation:
http://www.concrete5.org/index.php?cID=4437...
http://www.concrete5.org/community/forums/usage/js_includes_workaro...
Would it be possible to use a different jQuery UI build than the one Concrete is using, or is there some other way I can achieve this functionality?
Any help would be greatly appreciated.
Also, nice work on Concrete5! This is the CMS I have been dreaming about for years.
Yep that worked. I wasn't aware it would automatically override the C5 js. That's really cool.
Also, this is a little off topic, but I want to put all the Jquery UI css in the ~/css folder, what would be the best practice for referencing it in my custom C5 theme?
Again thanks a bunch for your help.
-Kayla Rose
Also, this is a little off topic, but I want to put all the Jquery UI css in the ~/css folder, what would be the best practice for referencing it in my custom C5 theme?
Again thanks a bunch for your help.
-Kayla Rose
<b>SOLVED:</b>
Just got a jQuery UI build without the Dialog component. Replaced the full jQuery.ui.js I had in ~/js. It seems there is some dependencies w/ the dialog that C5 uses.
---------------------
I spoke too soon before. Although the tabs are working now in edit mode (thanks ScottC), but in admin/dashboard mode all the dialogs are screwy (see attached screen shot from the sitemap page of the dashboard). Everything else in the dashboard looked normal during a brief run-through.
I think this may be related to this issue:
http://www.concrete5.org/community/forums/usage/js_includes_workaro...
But I tried the solution recommended in that thread, but it had no effect.
Is there a way I can say "default to the C5 jQuery UI" in that dashboard? Or any other solution to this problem? I looked through the API, but didn't see much.
Thanks again,
Kayla
Just got a jQuery UI build without the Dialog component. Replaced the full jQuery.ui.js I had in ~/js. It seems there is some dependencies w/ the dialog that C5 uses.
---------------------
I spoke too soon before. Although the tabs are working now in edit mode (thanks ScottC), but in admin/dashboard mode all the dialogs are screwy (see attached screen shot from the sitemap page of the dashboard). Everything else in the dashboard looked normal during a brief run-through.
I think this may be related to this issue:
http://www.concrete5.org/community/forums/usage/js_includes_workaro...
But I tried the solution recommended in that thread, but it had no effect.
Is there a way I can say "default to the C5 jQuery UI" in that dashboard? Or any other solution to this problem? I looked through the API, but didn't see much.
Thanks again,
Kayla
The dashboard is its own beast.
What you can do is load the standard version of the jquery.ui by modifying this file:
~/concrete/themes/core/dashboard.php
and placing it in:
~/themes/core/dashboard.php you need to create the folder for core
you will need to change around line 24 here:
to load say jquery.ui.dashboard.js that you created by renaming the old jquery.ui
This works because the dashboard doesn't use header_required since the dashboard isn't meant to be changed around like the rest of the site.
I haven't personally tested this or anything but it should work fine.
What you can do is load the standard version of the jquery.ui by modifying this file:
~/concrete/themes/core/dashboard.php
and placing it in:
~/themes/core/dashboard.php you need to create the folder for core
you will need to change around line 24 here:
$v->addHeaderItem($html->javascript('jquery.ui.js'));
This works because the dashboard doesn't use header_required since the dashboard isn't meant to be changed around like the rest of the site.
I haven't personally tested this or anything but it should work fine.
I've made two tabs templates for navigation block. One that highlights the path to current page and one without the highlight. Use theme without the highlight on pages that are not listed on any of the tabs. I've also included ui.tabs.js which is for jquery 1.7.1 (used in c5), if the tabs don't work put it in /js folder, although tabs work for me just fine after I removed it from /js folder. And I didn't have to create alternate jquery for dashboard.
@ ZOKI. Thanks for this but my question is how/where would I put these files.
you have to put them in (your_concrete_root)/blocks/autonav/templates/. You'll have to create autonav/templates folders if you didn't by now. You can put the ui.tabs.js in /js folder if the templates don't work. "Tabs With Active Highlite" will highlight the path to current page in autonav block if the current page is under autonav root, if it's not, use the "Tabs" template...
This is the easiest way to provide the functionality you desire.