You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

176 lines
6.2 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  5. <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
  6. <title>demo class2context.js</title>
  7. <!-- Bootstrap -->
  8. <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  9. <link rel="shortcut icon" href="class2context.png">
  10. <link rel='StyleSheet' type='text/css' href='class2context.css'>
  11. <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  12. <style>
  13. body{
  14. font-family: 'Roboto', sans-serif;
  15. /*font-size: 48px;*/
  16. }
  17. .box1{
  18. width: 200px;
  19. height: 300px;
  20. margin: 15px;
  21. display: inline-block;
  22. /*border: 2px solid #000000;*/
  23. border-radius: 5px;
  24. text-align: left;
  25. vertical-align: middle;
  26. padding: 20px;
  27. }
  28. .box1:hover{
  29. box-shadow: 0 5px 10px #BEF7F2;
  30. }
  31. .box2{
  32. width: 600px;
  33. min-height: 300px;
  34. margin: 15px;
  35. margin-left:auto;
  36. margin-right: auto;
  37. display: block;
  38. border-radius: 5px;
  39. text-align: left;
  40. vertical-align: middle;
  41. padding: 20px;
  42. }
  43. .centralBox{
  44. text-align: center;
  45. width: 100%;
  46. margin: 0 auto;
  47. }
  48. .codeFont{
  49. color: #DAE8E8;
  50. }
  51. .heightMainBox{
  52. height: 200px;
  53. }
  54. .mainimg{
  55. width: 100px;
  56. display: inline-block;
  57. transition: all .5s;
  58. top:0;
  59. vertical-align:top;
  60. }
  61. .mainimg:hover{
  62. width:150px;
  63. transition: all .2s;
  64. }
  65. </style>
  66. </head>
  67. <body onload="">
  68. <div class='container'>
  69. <div class="classHeader centralBox">
  70. <h1><img src='class2context.png' width='100px' />class2context.js</div>
  71. </div>
  72. <br><br>
  73. <div class='centralBox heightMainBox'>
  74. <a href="#" data-toggle="tooltip" data-placement="bottom" title="Configurable!">
  75. <img src='http://image.flaticon.com/icons/svg/167/167516.svg' class='mainimg' />
  76. </a>
  77. <a href="#" data-toggle="tooltip" data-placement="bottom" title="High performance!">
  78. <img src='http://image.flaticon.com/icons/svg/167/167479.svg' class='mainimg' />
  79. </a>
  80. <a href="#" data-toggle="tooltip" data-placement="bottom" title="Permits increment functionallities!">
  81. <img src='http://image.flaticon.com/icons/svg/167/167486.svg' class='mainimg' />
  82. </a>
  83. <a href="#" data-toggle="tooltip" data-placement="bottom" title="Multiple platform!">
  84. <img src='http://image.flaticon.com/icons/svg/167/167488.svg' class='mainimg' />
  85. </a>
  86. </div>
  87. <div class='centralBox'>
  88. <div class='class1 box1' style='background: #0FA3B1;'>
  89. <h4>A</h4>
  90. This is a demo
  91. <br>
  92. Just need to include the files:
  93. <ul>
  94. <li>class2context.js</li>
  95. <li>class2context.css</li>
  96. </ul>
  97. </div>
  98. <div class='class2 box1' style='background: #FF9B42;'>
  99. <h4>Get started!</h4>
  100. Right click over me!
  101. <div class='classSub2 box1' style='background: #5797CC; width: 130px; height: 180px!important;'>
  102. element inside element with diferent class
  103. </div>
  104. </div>
  105. <div class='class3 box1' style='background: #8BC34A;'>
  106. <h4>Use</h4>
  107. when html is charged, call the function
  108. </div>
  109. <div class='class4 box2' style='background: #9375A3;'>
  110. <h4>Use</h4>
  111. when html is charged, call the function:<br>
  112. <div class='codeFont'>
  113. <b>class2context</b>(
  114. <br> 'className',
  115. <br> "title",
  116. <br> [["option1", "functionoption1()"], ["option 2","functionoption2()"]]
  117. <br>);
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <br><br><br><br>
  123. <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  124. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  125. <!-- Include all compiled plugins (below), or include individual files as needed -->
  126. <script src="bootstrap/js/bootstrap.min.js"></script>
  127. <script src='class2context.js'></script>
  128. <script>
  129. array=[["<img src='http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png' width='25px' /> A1", "function1()"], ["<img src='http://icons.iconarchive.com/icons/dakirby309/simply-styled/32/Autodesk-Alias-Design-icon.png' width='25px' /> A2","function2()"]];
  130. class2context('class1', "titleA", array);
  131. class2context('class3', "titleC", [["<img src='http://icons.iconarchive.com/icons/iynque/flurry-extras-8/32/123D-Design-icon.png' width='25px' /> C1", "function1()"], ["<img src='http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-draw-brush-icon.png' width='25px' /> C3","function3()"]]);
  132. class2context('class2', "titleB", [["<img src='http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/32/3d-material-drop-tool-icon.png' width='25px' /> B2", "function2()"], ["<img src='http://icons.iconarchive.com/icons/iynque/ios7-style/32/Design-Briefs-icon.png' width='25px' /> B3","function3()"]]);
  133. class2context("classHeader", "titleTableMenu", [["header function 1", "function1()"], ["header function 2", "function2()"]]);
  134. class2context('class4',"title",[["option1", "function1()"], ["option 2","function2()"]]);
  135. class2context('mainimg', "Image context menu", [["<img src='http://icons.iconarchive.com/icons/iynque/flurry-extras-8/32/123D-Design-icon.png' width='25px' /> C1", "function1()"], ["<img src='http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-draw-brush-icon.png' width='25px' /> C3","function3()"]]);
  136. class2context('classSub2', "sub element context inside other element", [["<img src='http://icons.iconarchive.com/icons/iynque/flurry-extras-8/32/123D-Design-icon.png' width='25px' /> C1", "function1()"]]);
  137. function function1(){
  138. alert("function 1 clicked");
  139. }
  140. function function2(){
  141. alert("function 2 clicked");
  142. }
  143. function function3(){
  144. alert("function 3 clicked");
  145. }
  146. function ContextMenus(){
  147. console.log("context menu called");
  148. }
  149. $(document).ready(function(){
  150. $('[data-toggle="tooltip"]').tooltip();
  151. });
  152. </script>
  153. </body>
  154. </html>