git.roojs.org Git - roojs1/blob - examples/bootstrap4/popover.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Popover Examples</title>
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6
   7     <!-- Bootstrap -->
   8     <link rel="stylesheet" href="../../css-bootstrap4/sb-admin-2.min.css">
   9     <link rel="stylesheet" href="../../css-bootstrap4/roojs-bootstrap.css">
  10      <link rel="stylesheet" href="../../fonts/font-awesome.css">
  11
  12
  13
  14
  15
  16     <script type="text/javascript" src="../../roojs-core-debug.js"></script>
  17     <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
  18     <script type="text/javascript" src="../../Roo/bootstrap/Popover.js"></script>
  19
  20          <script type="text/javascript">
  21             rootURL = '/';
  22          </script>
  23     <!-- test code -->
  24     <script type="text/javascript" src="../bootstrap/popover.js"></script>
  25   </head>
  26
  27   <body id="body">
  28
  29   <H1>Popover Test (auto ajusting if no room..)</H1>
  30
  31     <div id="right-test"
  32          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 100px;top: 100px;">RIGHT</div>
  33
  34      <div id="right-move-test"
  35          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 100px;top: 600px;">RIGHT</div>
  36
  37      <div id="left-flip-test"
  38          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 100px;top: 400px;">LEFT</div>
  39
  40       <div id="below-test"
  41          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 300px;top: 100px;">BOTTOM</div>
  42
  43       <div id="below-bad-test"
  44          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 300px;top: 500px;">BOTTOM</div>
  45
  46      <div id="above-bad-test"
  47          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 500px;top: 100px;">TOP</div>
  48
  49      <div id="above-test"
  50          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 500px;top: 500px;">TOP</div>
  51
  52
  53     <div id="left-test"
  54          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 1000px;top: 100px;">LEFT</div>
  55
  56      <div id="left-move-test"
  57          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 1000px;top: 600px;">LEFT</div>
  58
  59      <div id="right-flip-test"
  60          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 1000px;top: 400px;">RIGHT</div>
  61
  62
  63   </body>
  64     <script type="text/javascript">
  65        Roo.onReady(function() {
  66           Roo.get('right-test').on('click', function(e) {
  67             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'right');
  68           });
  69
  70           Roo.get('right-move-test').on('click', function(e) {
  71             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'right');
  72           });
  73
  74           Roo.get('left-flip-test').on('click', function(e) {
  75             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'left');
  76           });
  77
  78           Roo.get('left-test').on('click', function(e) {
  79             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'left');
  80           });
  81
  82           Roo.get('left-move-test').on('click', function(e) {
  83             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'left');
  84           });
  85
  86           Roo.get('right-flip-test').on('click', function(e) {
  87             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'right');
  88           });
  89
  90
  91           Roo.get('below-test').on('click', function(e) {
  92             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'bottom');
  93           });
  94
  95           Roo.get('below-bad-test').on('click', function(e) {
  96             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'bottom');
  97           });
  98
  99           Roo.get('above-test').on('click', function(e) {
 100             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'top');
 101           });
 102           Roo.get('above-bad-test').on('click', function(e) {
 103             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'top');
 104           });
 105
 106           //Pman.Popover.FileTest.show({   });
 107           //Roo.get("bootstrap-body").on('click', function() { Pman.Popover.FileTest.show({ _el : Roo.get("bootstrap-body") }); })
 108       });
 109
 110     </script>
 111 </html>