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

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Bootstrap 101 Template</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     <div id="right-test"
  30          style="width: 100px;height: 100px;display: block;background-color: red;position: relative;left: 100px;top: 100px;"></div>
  31
  32      <div id="right-move-test"
  33          style="width: 100px;height: 100px;display: block;background-color: red;position: relative;left: 100px;top: 600px;"></div>
  34
  35      <div id="left-flip-test"
  36          style="width: 100px;height: 100px;display: block;background-color: red;position: relative;left: 100px;top: 400px;"></div>
  37
  38       <div id="below-test"
  39          style="width: 100px;height: 100px;display: block;background-color: red;position: relative;left: 400px;top: 100px;"></div>
  40
  41       <div id="below-bad-test"
  42          style="width: 100px;height: 100px;display: block;background-color: red;position: relative;left: 400px;top: 500px;"></div>
  43
  44      <div id="above-bad-test"
  45          style="width: 100px;height: 100px;display: block;background-color: red;position: relative;left: 400px;top: 100px;"></div>
  46
  47      <div id="above-test"
  48          style="width: 100px;height: 100px;display: block;background-color: red;position: relative;left: 400px;top: 500px;"></div>
  49
  50   </body>
  51     <script type="text/javascript">
  52        Roo.onReady(function() {
  53           Roo.get('right-test').on('click', function(e) {
  54
  55             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'right');
  56           });
  57           Roo.get('below-test').on('click', function(e) {
  58             Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'bottom');
  59           });
  60
  61
  62           //Pman.Popover.FileTest.show({   });
  63           //Roo.get("bootstrap-body").on('click', function() { Pman.Popover.FileTest.show({ _el : Roo.get("bootstrap-body") }); })
  64       });
  65
  66     </script>
  67 </html>