[ Index ]

PHP Cross Reference of Drupal 6 (yi-drupal)

title

Body

[close]

/sites/all/libraries/jquery.ui/tests/static/ -> overlay.html (source)

   1  <!doctype html>
   2  <html>
   3  <head>
   4      <title>jQuery UI Dialog Static Markup Test Page</title>
   5      <link rel="stylesheet" href="../../themes/base/ui.base.css" type="text/css" />
   6      <link rel="stylesheet" href="../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
   7      <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
   8      <script type="text/javascript" src="static.js"></script>
   9      <script type="text/javascript">
  10  
  11          //overlay sample plugin ( to become part of positionTo )

  12          $.fn.overlay = function(){
  13              var that = this;
  14              //overlay widget markup

  15              var overlay = $('<div class="ui-overlay">'+
  16                      '<iframe class="ui-helper-zfix" src="#" frameborder="0"></iframe>'+
  17                      '<div class="ui-widget-overlay"></div>'+
  18                      '<div class="ui-widget-shadow ui-corner-all"></div>'+
  19                  '</div>');
  20              //ui-widget-shadow gets set to exact widget dims and offset (TL). Shadow appearance/thickness is handled in ui.theme.css through margins and padding

  21              overlay.find('.ui-widget-shadow')
  22                  .width( $(that)[0].offsetWidth )
  23                  .height( $(that)[0].offsetHeight )
  24                  .css({ 
  25                      position: 'absolute',
  26                      left: $(that)[0].offsetLeft,
  27                      top: $(that)[0].offsetTop
  28                  });
  29              $(that).before(overlay);
  30              return this;
  31          };
  32          
  33          //call overlay

  34          $(function(){
  35              $('.ui-dialog').overlay();
  36          });
  37  
  38      </script>
  39  </head>
  40  <body style="font-size: 62.5%;">
  41  
  42  
  43  
  44  
  45  <!-- ui-dialog -->
  46  <div class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="position: absolute; left: 40px; top: 40px; ">
  47      <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
  48          <span class="ui-dialog-title">Dialog Title</span>
  49          <a href="#" class="ui-dialog-titlebar-close ui-corner-all" title="Close"><span class="ui-icon ui-icon-closethick">Close</span></a>
  50      </div>
  51      <div class="ui-dialog-content ui-widget-content" style="height: 13em;">
  52          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  53      </div>
  54      <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
  55          <button class="ui-state-default ui-priority-primary ui-corner-all">Primary</button>
  56          <button class="ui-state-default ui-priority-secondary ui-corner-all">Secondary</button>
  57          <button class="ui-state-default ui-state-disabled ui-corner-all">Disabled</button>
  58      </div>
  59      <div class="ui-resizable-n ui-resizable-handle"></div>
  60      <div class="ui-resizable-s ui-resizable-handle"></div>
  61      <div class="ui-resizable-e ui-resizable-handle"></div>
  62      <div class="ui-resizable-w ui-resizable-handle"></div>
  63      <div class="ui-resizable-ne ui-resizable-handle"></div>
  64      <div class="ui-resizable-se ui-resizable-handle ui-icon ui-icon-grip-diagonal-se"></div>
  65      <div class="ui-resizable-sw ui-resizable-handle"></div>
  66      <div class="ui-resizable-nw ui-resizable-handle"></div>
  67  </div>
  68  
  69  </body>
  70  </html>


Generated: Mon Jul 9 18:01:44 2012 Cross-referenced by PHPXref 0.7