[Summary view] [Print] [Text view]

   1  <style>
   2  
   3  #divTabs, #divAddTabs {

   4      height:30px;
   5  }
   6  
   7  </style>
   8  
   9  <div id="containerDemo"></div>
  10  
  11  <script type="text/javascript">
  12  
  13      var model = {
  14  
  15          renderAt: '#containerDemo',
  16  
  17          title: 'Tabs Demos',
  18  
  19          demos: [
  20  
  21              {
  22                  title: 'Simple Tabs',
  23                  html: ['<div><ul id="divTabs">',
  24                              '<li><a href="#tabs-fragment-1"><span>One</span></a></li>',
  25                              '<li><a href="#tabs-fragment-2"><span>Two</span></a></li>',
  26                              '<li><a href="#tabs-fragment-3"><span>Three</span></a></li>',
  27                          '</ul>',
  28                          '<div id="tabs-fragment-1">',
  29                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  30                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  31                          '</div>',
  32                          '<div id="tabs-fragment-2">',
  33                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  34                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  35                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  36                          '</div>',
  37                          '<div id="tabs-fragment-3">',
  38                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  39                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  40                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  41                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  42                          '</div></div>'].join(''),
  43                  destroy: '$("#divTabs").tabs("destroy");',
  44  
  45                  options: [
  46                      {    desc: 'Simple Tabs',    source: '$("#divTabs").tabs();' },
  47                      {    desc: 'Simple Cloned Tabs',    source: '$("#divTabs").clone().tabs();' },
  48                      {    desc: 'Simple Empty Tabs',    source: '$("#divTabs").tabs();' },
  49                      {    desc: 'Simple Detached Tabs',    source: '$("<div></div>").tabs();' }
  50                  ]
  51              },
  52              {
  53                  title: 'Add A Tab',
  54                  html: ['<div><ul id="divAddTabs">',
  55                              '<li><a href="#addtabs-fragment-1"><span>One</span></a></li>',
  56                              '<li><a href="#addtabs-fragment-2"><span>Two</span></a></li>',
  57                              '<li><a href="#addtabs-fragment-3"><span>Three</span></a></li>',
  58                          '</ul>',
  59                          '<div id="addtabs-fragment-1">',
  60                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  61                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  62                          '</div>',
  63                          '<div id="addtabs-fragment-2">',
  64                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  65                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  66                          '</div>',
  67                          '<div id="addtabs-fragment-3">',
  68                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  69                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  70                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
  71                          '</div></div>'].join(''),
  72                  destroy: '$("#divAddTabs").tabs("destroy");',
  73  
  74                  options: [
  75                      {    desc: 'Simple Dialog',    source: '$("#divAddTabs").tabs("add", "#", "Added");' }
  76                  ]
  77              },
  78          ]
  79  
  80      };
  81  
  82      $(window).load(function(){
  83  
  84          uiRenderDemo(model);
  85  
  86      });
  87  
  88  </script>