Simple jquery tabs


(Warwick Smith) #1

Hi,

 

I'm trying to use jquery to create two tabs on a standard page. One of the tabs will contain a nested content div from another asset. If you're wondering why I'm not using an Asset list or Multipage asset. Long story ...

 

After hunting around for some jquery script I keep hitting dead ends with implementing it into Matrix.

 

If anyone has any tips, tricks or recyclable script/ideas let me know!

 

Thanks.


(Talk) #2

Hi Warwick, have you considered jQuery UI? You could simply output your code like:

<ul id="this">
<li><a href="#tabs-1">An item</a></li>
<li><a href="#tabs-2">Another item</a></li>
</ul>

<div id=“tabs-1”>Hello</div>
<div id=“tabs-2”>Hello</div>

<script>
$(’#this’).tabs();
</script>


(Warwick Smith) #3

Cool thanks, I'll give it a go.

 

I explored jQuery UI, but nothing seemed to happen on screen. I may have had the div ID in the wrong place for the embedded nested content on reading over some old posts from other users.

 

W.


(Nic Hubbard) #4

Cool thanks, I'll give it a go.

 

I explored jQuery UI, but nothing seemed to happen on screen. I may have had the div ID in the wrong place for the embedded nested content on reading over some old posts from other users.

 

W.

 

Are you making sure to take a look at your error console for any JS errors?


(Aleks Bochniak) #5

Here is a page (generated by matrix) with tabbed content on it.

 

http://www.aqa.org.uk/exams-administration/about-results

 

copy the js if you want


(Anthony) #6

I have jQuery UI working on my site OK, and am using tabs fine. I think I did it the hard (wrong) way because I created Squiz assets for all the associated files (bitmaps etc) that it needs and had to get everything patched up so the paths to find everything worked as it expected. I've since been told that if I knew how to play around with Apache config files I could dump all the jQuery stuff in real folders on my server and have them served up outside Squiz but still within the same root URL. I haven't changed it yet but I will when I get a chance and I'm sure it will make getting other external libraries working much easier too.

 

Also on my site there are some bespoke tabs knocked up with hand crafted CSS and a few bits of javascript or (non-UI) jQuery. That was done by the guys who first built it. Having worked with both approaches I would say the jQuery UI stuff is easier to understand, but perhaps harder to re-style to look exactly how you want unless you're way better at CSS than I am.

 

Good luck.


(Talk) #7

I have jQuery UI working on my site OK, and am using tabs fine. I think I did it the hard (wrong) way because I created Squiz assets for all the associated files (bitmaps etc) that it needs and had to get everything patched up so the paths to find everything worked as it expected. I've since been told that if I knew how to play around with Apache config files I could dump all the jQuery stuff in real folders on my server and have them served up outside Squiz but still within the same root URL. I haven't changed it yet but I will when I get a chance and I'm sure it will make getting other external libraries working much easier too.

 

Also on my site there are some bespoke tabs knocked up with hand crafted CSS and a few bits of javascript or (non-UI) jQuery. That was done by the guys who first built it. Having worked with both approaches I would say the jQuery UI stuff is easier to understand, but perhaps harder to re-style to look exactly how you want unless you're way better at CSS than I am.

 

Good luck.

 

Hi Anthony, I thikn it makes more sense to host the data in Squiz and allow unrestricted access to the files. You could put them in a system folder with all site URLs applied. You can also link to the files hosted remotely by Google.

 

In regards to UI CSS, you can download a predesigned theme, or design your own at jqueryui.com/themeroller - grabbing the CSS from there makes it dead easy to customise until you're happy.


(Nic Hubbard) #8

 

I thikn it makes more sense to host the data in Squiz and allow unrestricted access to the files.

 

In this case he would need to turn allow unrestricted to No so that the file paths would stay correct instead of turning to __data URLs.


(Talk) #9

 

In this case he would need to turn allow unrestricted to No so that the file paths would stay correct instead of turning to __data URLs.

 

I would have thought that __data URLs would have allowed for higher/snappier performance, particularly under load - but it's probably a non-issue for most sites. Either way, I still think it's more practical to maintain the information in Matrix and/or link to it remotely.


(Nic Hubbard) #10

 

I would have thought that __data URLs would have allowed for higher/snappier performance, particularly under load - but it's probably a non-issue for most sites. Either way, I still think it's more practical to maintain the information in Matrix and/or link to it remotely.

 

Yes they would. But the problem he described seems to be because the .js files expected other .js files or images to be at specific paths, which doesn't work with __data URLs.


(Talk) #11

As far as I know jQuery UI is independent, and CSS is a necessary but non-core addon. Creating a CSS design file and changing the paths to mysource_files/path.png is an easy implementation - this makes it easy to add and change images, and tweak CSS on the fly.


(Nic Hubbard) #12

As far as I know jQuery UI is independent, and CSS is a necessary but non-core addon. Creating a CSS design file and changing the paths to mysource_files/path.png is an easy implementation - this makes it easy to add and change images, and tweak CSS on the fly.

 

I realize that. Was just trying to help with the original posters issue.


(Talk) #13

 

I realize that. Was just trying to help with the original posters issue.

 

No worries mate, hopefully the quickest way works for him.

 

Warwick/Anthony, a CSS design file will find and print unrestricted images when using mysource_files/path.png. Good luck guys!