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