+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: CI & JQuery UI (/showthread.php?tid=32334)
CI & JQuery UI - El Forum - 07-20-2010
[eluser]evstevemd[/eluser]
Hi guys,
I want to make a tabbed app with JQuery and JQuery UI.
I know this is not strictly CI question but a lot of guys here plays with CI & JQUi.
So how can I make a tabbed app with the two?
Thanks
CI & JQuery UI - El Forum - 07-20-2010
[eluser]gigas10[/eluser]
Start here
http://jqueryui.com/demos/tabs/
Shouldn't be too hard, I've done it a few times.
CI & JQuery UI - El Forum - 07-20-2010
[eluser]pickupman[/eluser]
Should be the exact same as in php/html. Depending on the context of the tabs, but you may find it useful to create views for each of the tabs. You could have master tab view with the jQueryUI tab markup, and load each view into each tab.
Code:
//Controller
$data['tab1'] = $this->load->view('tab1', $data, TRUE);
$data['tab2'] = $this->load->view('tab2', $data, TRUE);
$data['tab3'] = $this->load->view('tab3', $data, TRUE);
$this->load->view('master_tab_view', $data);
//Master tab view
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<?php echo $tab1;?>
</div>
<div id="tabs-2">
<?php echo $tab2;?>
</div>
<div id="tabs-3">
<?php echo $tab3;?>
</div>
</div>The reason for doing is this is because if go to implement ajax, you could re-render one of the tabs, and update the tab(DOM).