mirror of
https://github.com/arnaucube/class2context.git
synced 2026-02-07 11:16:43 +01:00
update
This commit is contained in:
arnaucode
194
demo/index.html
Executable file
194
demo/index.html
Executable file
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
|
||||
<title>demo class2context.js</title>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
|
||||
<link rel="shortcut icon" href="class2context.png">
|
||||
|
||||
<link rel='StyleSheet' type='text/css' href='class2context.css'>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
body{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
/*font-size: 48px;*/
|
||||
}
|
||||
.box1{
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
margin: 15px;
|
||||
display: inline-block;
|
||||
/*border: 2px solid #000000;*/
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
.box1:hover{
|
||||
box-shadow: 0 5px 10px #BEF7F2;
|
||||
}
|
||||
.box2{
|
||||
width: 600px;
|
||||
min-height: 300px;
|
||||
margin: 15px;
|
||||
margin-left:auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
.box3{
|
||||
width: 600px;
|
||||
margin: 15px;
|
||||
margin-left:auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
padding: 20px;
|
||||
}
|
||||
.centralBox{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.codeFont{
|
||||
color: #DAE8E8;
|
||||
}
|
||||
.heightMainBox{
|
||||
height: 200px;
|
||||
}
|
||||
.mainimg{
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
transition: all .5s;
|
||||
top:0;
|
||||
vertical-align:top;
|
||||
}
|
||||
.mainimg:hover{
|
||||
width:150px;
|
||||
transition: all .2s;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
<body onload="">
|
||||
|
||||
<div class='container'>
|
||||
<div class="classHeader centralBox">
|
||||
<h1><img src='class2context.png' width='100px' />class2context.js</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class='centralBox heightMainBox'>
|
||||
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Configurable!">
|
||||
<img src='http://image.flaticon.com/icons/svg/167/167516.svg' class='mainimg' />
|
||||
</a>
|
||||
<a href="#" data-toggle="tooltip" data-placement="bottom" title="High performance!">
|
||||
<img src='http://image.flaticon.com/icons/svg/167/167479.svg' class='mainimg' />
|
||||
</a>
|
||||
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Permits increment functionallities!">
|
||||
<img src='http://image.flaticon.com/icons/svg/167/167486.svg' class='mainimg' />
|
||||
</a>
|
||||
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Multiple platform!">
|
||||
<img src='http://image.flaticon.com/icons/svg/167/167488.svg' class='mainimg' />
|
||||
</a>
|
||||
</div>
|
||||
<div class='centralBox'>
|
||||
<div class='class1 box3' style='background: #769ba3;' >
|
||||
- github: <a href="https://github.com/arnaucode/class2context" target="_blank">- Github repo</a><br>
|
||||
- install: 'bower install class2context --save'<br>
|
||||
- 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>
|
||||
</div>
|
||||
<div class='class1 box1' style='background: #0FA3B1;'>
|
||||
<h4>A</h4>
|
||||
This is a demo
|
||||
<br>
|
||||
Just need to include the files:
|
||||
<ul>
|
||||
<li>class2context.js</li>
|
||||
<li>class2context.css</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='class2 box1' style='background: #FF9B42;'>
|
||||
<h4>Get started!</h4>
|
||||
Right click over me!
|
||||
<div class='classSub2 box1' style='background: #5797CC; width: 130px; height: 180px!important;'>
|
||||
element inside element with diferent class
|
||||
</div>
|
||||
</div>
|
||||
<div class='class3 box1' style='background: #8BC34A;'>
|
||||
<h4>Use</h4>
|
||||
when html is charged, call the function
|
||||
</div>
|
||||
<div class='class4 box2' style='background: #9375A3;'>
|
||||
<h4>Usage</h4>
|
||||
when html is charged, call the function:<br>
|
||||
<div class='codeFont'>
|
||||
<b>class2context</b>(
|
||||
<br> 'className',
|
||||
<br> "title",
|
||||
<br> [["option1", "functionoption1()"], ["option 2","functionoption2()"]]
|
||||
<br>);
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<br><br><br><br>
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src='class2context.js'></script>
|
||||
|
||||
<script>
|
||||
|
||||
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()"]];
|
||||
class2context('class1', "titleA", array);
|
||||
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()"]]);
|
||||
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()"]]);
|
||||
|
||||
class2context("classHeader", "titleTableMenu", [["header function 1", "function1()"], ["header function 2", "function2()"]]);
|
||||
|
||||
class2context('class4',"title",[["option1", "function1()"], ["option 2","function2()"]]);
|
||||
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()"]]);
|
||||
|
||||
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()"]]);
|
||||
|
||||
function function1(){
|
||||
alert("function 1 clicked");
|
||||
}
|
||||
function function2(){
|
||||
alert("function 2 clicked");
|
||||
}
|
||||
function function3(){
|
||||
alert("function 3 clicked");
|
||||
}
|
||||
function ContextMenus(){
|
||||
console.log("context menu called");
|
||||
}
|
||||
$(document).ready(function(){
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user