-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (112 loc) · 4.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html lang="en">
<head>
<title>Grid-King test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="gridking.css">
<!--
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
-->
<script defer src="http://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script defer src="http://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script defer src="jquery.gridking.js"></script>
</head>
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="container">
<div id="grid-container">
<div class ="gk-toolbar gk-main-toolbar">
<div class="gk-toolbar-item-container">
<div class="gk-toolbar-item fa fa-cog">
</div>
</div>
<a class="btn btn-xs btn-primary" title="Add row 6-6">
<span class="glyphicon glyphicon-plus-sign"></span>
<div class="row ge-row-icon">
<div class="column col-6"></div>
<div class="column col-6"></div>
</div>
</a>
</div>
<div class="row" >
<div class="col-6" >
<p>A col goes here</p>
</div>
<div class="col-6" >
<p>Another col goes here</p>
</div>
</div>
<div class="row" >
<div class="col-6" >
<p>A col goes here</p>
</div>
<div class="col-3" >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus consectetur, rhoncus felis id, molestie est. Curabitur nisl mi, cursus ac est sit amet, maximus hendrerit erat. Ut vehicula, ligula vel dignissim sodales, turpis velit imperdiet leo, quis posuere massa est quis elit. Etiam diam augue, congue eleifend odio vel, condimentum tincidunt turpis. Mauris sem felis, pellentesque at facilisis in, aliquam finibus est. Praesent in venenatis risus, non aliquet lectus. Curabitur convallis consequat varius. Integer tellus orci, sagittis nec mi eu, rutrum dictum tortor.</p>
</div>
<div class="col-3">
another col
</div>
</div>
<div class="row" >
<div class="col" >
<p>Another one</p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#grid-container").gridKing();
/*
$("[class*=col][data-selectable]").hover(
function(){
$(this).addClass("gk-hover");
},
function(){
$(this).removeClass("gk-hover");
});
$("[class*=col][data-selectable]").click(function(){
deselect();
selectElement(this);
});
$(".gk-grid-container").focusout(function(event){
deselect();
});
*/
});
/*
function selectElement(elem){
$(elem).addClass("gk-selected gk-selected-col")
.parent(".row")
.addClass("gk-selected-row");
attachColToolBar(elem);
attachRowToolBar($(elem).parent());
}
function deselect(){
$(".gk-grid-container div").removeClass("gk-selected gk-selected-row gk-selected-col");
$(".gk-col-toolbar").hide();
$(".gk-row-toolbar").hide();
}
function attachColToolBar(element){
var p = $(element).position();
var h = $(".gk-col-toolbar").height();
$(".gk-col-toolbar").css("top",p.top-h)
.css("left",p.left - 1)
.show();
}
function attachRowToolBar(element){
var p = $(element).position();
var ew = $(element).outerWidth();
var eh = $(element).height();
var h = $(".gk-col-toolbar").height();
$(".gk-row-toolbar").css("top", p.top + eh + 1)
.css("left",p.left + (ew - $(".gk-row-toolbar").outerWidth()) - 11)
.show();
}*/
</script>
</body>
</html>