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   <script type="text/javascript" src="../../docs/Roo.docs.ViewSource.js"></script>
  20
  21          <script type="text/javascript">
  22             rootURL = '/';
  23          </script>
  24     <!-- test code -->
  25     <script type="text/javascript" src="../bootstrap/popover.js"></script>
  26   </head>
  27
  28   <body id="body">
  29
  30   <H1>Popover Test (auto ajusting if no room..)</H1>
  31
  32   <a  href="#"  onclick="Roo.docs.ViewSource.show({ src: '/roojs1/examples/bootstrap/popover.js'});">popover.js</a>
  33   <a href="#" onclick="Roo.docs.ViewSource.show({ src: '/roojs1/examples/bootstrap4/popover.html'});">popover.html</a>
  34
  35
  36     <div id="right-test"
  37          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 100px;top: 100px;">RIGHT</div>
  38
  39      <div id="right-move-test"
  40          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 100px;top: 600px;">RIGHT</div>
  41
  42      <div id="left-flip-test"
  43          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 100px;top: 400px;">LEFT</div>
  44
  45       <div id="below-test"
  46          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 300px;top: 100px;">BOTTOM</div>
  47
  48       <div id="below-bad-test"
  49          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 300px;top: 500px;">BOTTOM</div>
  50
  51      <div id="above-bad-test"
  52          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 500px;top: 100px;">TOP</div>
  53
  54      <div id="above-test"
  55          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 500px;top: 500px;">TOP</div>
  56
  57
  58     <div id="left-test"
  59          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 1000px;top: 100px;">LEFT</div>
  60
  61      <div id="left-move-test"
  62          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 1000px;top: 600px;">LEFT</div>
  63
  64      <div id="right-flip-test"
  65          style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 1000px;top: 400px;">RIGHT</div>
  66
  67
  68   </body>
  69     <script type="text/javascript">
  70        Roo.onReady(function() {
  71           Roo.get('right-test').on('click', function(e) {
  72             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'right');
  73           });
  74
  75           Roo.get('right-move-test').on('click', function(e) {
  76             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'right');
  77           });
  78
  79           Roo.get('left-flip-test').on('click', function(e) {
  80             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'left');
  81           });
  82
  83           Roo.get('left-test').on('click', function(e) {
  84             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'left');
  85           });
  86
  87           Roo.get('left-move-test').on('click', function(e) {
  88             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'left');
  89           });
  90
  91           Roo.get('right-flip-test').on('click', function(e) {
  92             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'right');
  93           });
  94
  95
  96           Roo.get('below-test').on('click', function(e) {
  97             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'bottom');
  98           });
  99
 100           Roo.get('below-bad-test').on('click', function(e) {
 101             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'bottom');
 102           });
 103
 104           Roo.get('above-test').on('click', function(e) {
 105             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'top');
 106           });
 107           Roo.get('above-bad-test').on('click', function(e) {
 108             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'top');
 109           });
 110
 111           //Pman.Popover.FileTest.show({   });
 112           //Roo.get("bootstrap-body").on('click', function() { Pman.Popover.FileTest.show({ _el : Roo.get("bootstrap-body") }); })
 113       });
 114
 115     </script>
 116 </html>