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