-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
133 lines (120 loc) · 6.3 KB
/
example.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
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
selectrowsJs - General Library
</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!--
Exclude these libraries in the .min.js
-->
<script src="./javascripts/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="./javascripts/1.3.0/adminflare-demo-init.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700" rel="stylesheet" type="text/css">
<link href="./css/1.3.0/black-blue/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" id="bootstrap-css">
<link href="./css/1.3.0/black-blue/adminflare.min.css" media="all" rel="stylesheet" type="text/css" id="adminflare-css">
<script src="./public/selectrowsjs/javascripts/selectrows.min.js" type="text/javascript"></script>
</head>
<body class="default-layout wysihtml5-supported" style>
<section class='row-fluid'>
<img src="https://github.com/leandrosardi/mysaas/blob/main/public/core/images/logo/logo-16-01.png?raw=true" alt='ConnectionSphere' />
<p>SelectRows.js Library</p>
</section>
<br/>
<section class='row-fluid box'>
<h3>Live Example</h3>
<p>Select and unselect rows to see it working.</p> <button class="btn btn-blue" data-rows-group-id='users'>This button is enabled if any row is checked.</button></p>
<table class="table table-striped">
<thead>
<th style='text-align: center; width:15px' >
<input class="checkbox select-all-rows" data-input-id='ids' data-rows-group-id='users' type="checkbox">
</th>
<th style ='width:36px;'>
<!-- picture -->
</th>
<th style ='width:auto;'>
Name
</th>
<th style ='width:auto;'>
Email
</th>
<th style ='width:auto;'>
Phone
</th>
<th style='width:36px;'>
Verified
</th>
<th style='width:36px;'>
<!-- remove button -->
</th>
</thead>
<tbody>
<tr>
<td style='text-align: center; vertical-align: top;'>
<input class="checkbox select-row" data-rows-group-id='users' type="checkbox" id="123" data-id="123" />
</td>
<td>
<img class='avatar' src="https://www.gravatar.com/avatar/123" alt="Leandro Daniel Sardi" />
</td>
<td>
<input class='user-input input-block-level' type='text' id='name' value='Leandro Daniel Sardi' />
</td>
<td>
<input class='user-input input-block-level' type='text' id='email' value='leandro.sardi@expandedventure.com' />
</td>
<td>
<input class='user-input input-block-level' type='text' id='phone' value='' />
</td>
<td style='text-align: center; vertical-align: top;'>
<a class='btn btn-link' style='color:green;' title='Verified' href=#><i class="icon-ok"></i></a>
</td>
<td style='text-align: center; vertical-align: top;'>
<a class='btn btn-link' style='color:red;' title='Remove User' href=#><i class="icon-remove"></i></a>
</td>
</tr>
<tr>
<td style='text-align: center; vertical-align: top;'>
<input class="checkbox select-row" data-rows-group-id='users' type="checkbox" id="456" data-id="456" />
</td>
<td>
<img class='avatar' src="https://www.gravatar.com/avatar/456" alt="Anibal Smith" />
</td>
<td>
<input class='user-input input-block-level' type='text' id='name' value='Anibal Smith' />
</td>
<td>
<input class='user-input input-block-level' type='text' id='email' value='anibal.smith@expandedventure.com' />
</td>
<td>
<input class='user-input input-block-level' type='text' id='phone' value='555-5555' />
</td>
<td style='text-align: center; vertical-align: top;'>
<a class='btn btn-link' style='color:green;' title='Verified' href=#><i class="icon-ok"></i></a>
</td>
<td style='text-align: center; vertical-align: top;'>
<a class='btn btn-link' style='color:red;' title='Remove User' href=#><i class="icon-remove"></i></a>
</td>
</tr>
</tbody>
</table>
</section>
<section class='row-fluid'>
<div class="span6 box">
<h3>Selected Rows</h3>
<p>A comma-separated list of IDs is built on this text field.</p>
<input type='text' name='ids' id='ids' value='' />
</div>
<div class="span6 box">
<h3>Source Code</h3>
<p>Visit our <a href="https://github.com/leandrosardi/selectrowsjs/" target="_window">SelectRowsJs on GitHub</a> to find source code example.</p>
<p><b>Remember to Star It!</b></p>
</div>
</section>
</body>
</html>
<script>
// call the function init when the page is loaded.
selectRowsJs.init();
</script>