[Summary view] [Print] [Text view]

   1  <script type="text/javascript">
   2  
   3      var model = {
   4  
   5          renderAt: '#containerDemo',
   6  
   7          title: 'Tabs Demos',
   8  
   9          demos: [
  10  
  11              {
  12                  title: 'Simple Tabs',
  13                  desc: 'With few lines of code you could make tabs. You can try more options on the fly!',
  14                  html: { url: 'templates/ui.tabs.ex1.html' },
  15                  destroy: '$("tabsEx1 > ul").tabs("destroy");',
  16                  options: [
  17                      {
  18                          desc: 'First tab active by default',
  19                          source: '$("#tabsEx1 > ul").tabs();'
  20                      },
  21                      {
  22                          desc: 'Start With Custom Tab',
  23                          source: '$("#tabsEx1 > ul").tabs({selected:1});'
  24                      },
  25                      {
  26                          desc: 'Use a slide effect to switch tabs',
  27                          source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle" } });'
  28                      },
  29                      {
  30                          desc: 'Use a fade effect to switch tabs',
  31                          source: '$("#tabsEx1 > ul").tabs({ fx: { opacity: "toggle" } });'
  32                      },
  33                      {
  34                          desc: 'Use a combined slide and fade effect to switch tabs',
  35                          source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle", opacity: "toggle" } });'
  36                      },
  37                      {
  38                          desc: 'Define event to switch tabs (mouseover)',
  39                          source: '$("#tabsEx1 > ul").tabs({  event: "mouseover" });'
  40                      }
  41                  ]
  42              }
  43  
  44          ]
  45  
  46      };
  47  
  48      $(function(){
  49  
  50          uiRenderDemo(model);
  51  
  52      });
  53  
  54  </script>