mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-11 11:18:39 +00:00
Fix styles
This commit is contained in:
parent
4ec4224256
commit
045fca3171
61
image.scss
61
image.scss
|
|
@ -105,3 +105,64 @@ div.slider-1 {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.icon-cards {
|
||||
position: relative;
|
||||
width: 60vw;
|
||||
height: 40vw;
|
||||
max-width: 380px;
|
||||
max-height: 250px;
|
||||
margin: 0;
|
||||
perspective: 1000px;
|
||||
|
||||
|
||||
|
||||
&-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(-30vw) rotateY(0);
|
||||
animation: carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 60vw;
|
||||
height: 40vw;
|
||||
max-width: 380px;
|
||||
max-height: 250px;
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: rotateY(0) translateZ(35vw);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
transform: rotateY(120deg) translateZ(35vw);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: rotateY(240deg) translateZ(35vw);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes carousel {
|
||||
0%, 17.5% { transform: translateZ(-35vw) rotateY(0); }
|
||||
27.5%, 45% { transform: translateZ(-35vw) rotateY(-120deg); }
|
||||
55%, 72.5% { transform: translateZ(-35vw) rotateY(-240deg); }
|
||||
82.5%, 100% { transform: translateZ(-35vw) rotateY(-360deg); }
|
||||
}
|
||||
|
|
@ -14,8 +14,8 @@ table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
|
|||
display: none;
|
||||
}
|
||||
|
||||
table .sort-asc, table .sort-desc {
|
||||
padding-left: 5px;
|
||||
table .sort-asc, table .sort-desc, table .filter {
|
||||
padding: 0 5px 0 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -116,194 +116,4 @@
|
|||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="box wf-100">
|
||||
<header><h1>Custom</h1></header>
|
||||
<div class="inner">
|
||||
<form>
|
||||
<table class="layout wf-100">
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge+Remote</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input1">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
|
||||
<div id="input1-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input1-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="input1-tags" class="tags" data-limit="1" data-active="true">
|
||||
<template id="input1-tagTemplate">
|
||||
<span data-tpl-value="/id" data-value="" data-uuid="" class="tag red">
|
||||
<i class="fa fa-times" data-remove=""></i>
|
||||
<i data-tpl-text="/name/0"></i>,
|
||||
<i data-tpl-text="/email"></i>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge+Local</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Table+Remote</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input2">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId2" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId2}">
|
||||
<div id="input2-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input2-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody id="input2-tags" class="tags" data-limit="0" data-active="true">
|
||||
<template id="input2-tagTemplate">
|
||||
<tr data-tpl-value="/id" data-value="" data-uuid="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Multiple Input+Autocomplete+External Table</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input4">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="input4-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input4-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody id="input4-tags" class="tags" data-limit="0" data-active="true">
|
||||
<template id="input4-tagTemplate">
|
||||
<tr data-tpl-value="/id" data-value="" data-uuid="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
<tr>
|
||||
<td colspan="2"><label>Simple remote autocomplete</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input3">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
|
||||
<div id="input3-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input3-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="input3-tags" class="tags" data-limit="1" data-active="false"></div>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Multiple Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Calendar</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Time</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Range Start/End</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Range End</label></td>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const loginRequest = new jsOMS.Message.Request.Request('http://127.0.0.1/en/api/login', 'POST', 'json');
|
||||
loginRequest.setData({user: 'admin', pass: 'orange'});
|
||||
loginRequest.send();
|
||||
</script>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="box wf-100">
|
||||
<header><h1>Custom</h1></header>
|
||||
<div class="inner">
|
||||
<form>
|
||||
<table class="layout wf-100">
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge+Remote</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input1">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
|
||||
<div id="input1-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input1-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="input1-tags" class="tags" data-limit="1" data-active="true">
|
||||
<template id="input1-tagTemplate">
|
||||
<span data-tpl-value="/id" data-value="" data-uuid="" class="tag red">
|
||||
<i class="fa fa-times" data-remove=""></i>
|
||||
<i data-tpl-text="/name/0"></i>,
|
||||
<i data-tpl-text="/email"></i>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge+Local</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Table+Remote</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input2">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId2" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId2}">
|
||||
<div id="input2-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input2-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody id="input2-tags" class="tags" data-limit="0" data-active="true">
|
||||
<template id="input2-tagTemplate">
|
||||
<tr data-tpl-value="/id" data-value="" data-uuid="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Multiple Input+Autocomplete+External Table</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input4">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="input4-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input4-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody id="input4-tags" class="tags" data-limit="0" data-active="true">
|
||||
<template id="input4-tagTemplate">
|
||||
<tr data-tpl-value="/id" data-value="" data-uuid="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
<tr>
|
||||
<td colspan="2"><label>Simple remote autocomplete</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input3">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
|
||||
<div id="input3-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input3-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="input3-tags" class="tags" data-limit="1" data-active="false"></div>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Multiple Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Calendar</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Time</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Range Start/End</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Range End</label></td>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const loginRequest = new jsOMS.Message.Request.Request('http://127.0.0.1/en/api/login', 'POST', 'json');
|
||||
loginRequest.setData({user: 'admin', pass: 'orange'});
|
||||
loginRequest.send();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<table class="table green" id="table1" data-table-form="fSample">
|
||||
<caption>Form Add</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<td>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col5 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col6 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template>
|
||||
<tr>
|
||||
<td><form id="fRemoveX" method="DELETE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value=""></td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value=""></td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value=""></td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value=""></td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value=""></td>
|
||||
<td>
|
||||
<span data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox/r" data-tpl-value="/checkbox/r" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox/u" data-tpl-value="/checkbox/u" data-value=""><span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr>
|
||||
<td><form id="fRemoveX1" method="DELETE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col2</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col1</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col4</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col3</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><form id="fRemoveX2" method="DELETE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col4</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col1</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col2</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col3</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><form id="fRemoveX3" method="DELETE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col1</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col2</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col3</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col4</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<form id="fSample" action="api/test" method="put">
|
||||
<table class="layout wf-100">
|
||||
<tbody>
|
||||
<tr><td><label for="iInput">Input</label>
|
||||
<tr><td><input id="iInput" name="input" type="text" data-tpl-text="/input" data-tpl-value="/input">
|
||||
<tr><td><label for="iSelect">Select</label>
|
||||
<tr><td><select id="iSelect" name="select" type="text" data-tpl-text="/select" data-tpl-value="/select">
|
||||
<option value="o1">Options1</option>
|
||||
<option value="o2">Options2</option>
|
||||
<option value="o3">Options3</option>
|
||||
</select>
|
||||
<tr><td><label for="iText">Text</label>
|
||||
<tr><td><textarea id="iText" name="text" type="text" data-tpl-text="/text" data-tpl-value="/text"></textarea>
|
||||
<tr><td><label for="iDate">Date</label>
|
||||
<tr><td><input id="iDate" name="date" type="date" data-tpl-text="/date" data-tpl-value="/date">
|
||||
<tr><td><label for="iRadio">Radio</label>
|
||||
<tr><td>
|
||||
<input type="radio" id="iRadio1" name="radio" value="r1" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio1">Radio1</label>
|
||||
<input type="radio" id="iRadio2" name="radio" value="r2" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio2">Radio2</label>
|
||||
<input type="radio" id="iRadio3" name="radio" value="r3" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio3">Radio3</label>
|
||||
<tr><td><label>Checkbox</label>
|
||||
<tr><td>
|
||||
<span class="checkbox">
|
||||
<input id="iPermissionCreate" name="permissioncreate" type="checkbox" value="CREATE" data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c">
|
||||
<label for="iPermissionCreate">Create</label>
|
||||
</span>
|
||||
<span class="checkbox">
|
||||
<input id="iPermissionRead" name="permissionread" type="checkbox" value="READ" data-tpl-text="/checkbox/r" data-tpl-value="/checkbox/r">
|
||||
<label for="iPermissionRead">Read</label>
|
||||
</span>
|
||||
<span class="checkbox">
|
||||
<input id="iPermissionUpdate" name="permissionupdate" type="checkbox" value="MODIFY" data-tpl-text="/checkbox/u" data-tpl-value="/checkbox/u">
|
||||
<label for="iPermissionUpdate">Update</label>
|
||||
</span>
|
||||
<tr><td>
|
||||
<input type="submit" value="Add">
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<table class="table green" id="table2" data-table-add="addButton" data-table-form="fInside">
|
||||
<caption>Inline Add</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<td>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col5 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col6 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template>
|
||||
<tr>
|
||||
<td><form id="fRemoveY" method="DELETE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value=""></td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value=""></td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value=""></td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value=""></td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value=""></td>
|
||||
<td>
|
||||
<span data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox/r" data-tpl-value="/checkbox/r" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox/u" data-tpl-value="/checkbox/u" data-value=""><span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template>
|
||||
<tr>
|
||||
<td><form id="fRemoveYY" method="DELETE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td><input data-form="fInside" data-tpl-text="/input" data-tpl-value="/input" data-value="" type="text"></td>
|
||||
<td>
|
||||
<select data-form="fInside" data-tpl-text="/select" data-tpl-value="/select" data-value="">
|
||||
<option value="o1">Option1</option>
|
||||
<option value="o2">Option2</option>
|
||||
<option value="o3">Option3</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<textarea data-form="fInside" data-tpl-text="/text" data-tpl-value="/text" data-value=""></textarea>
|
||||
</td>
|
||||
<td><input data-form="fInside" type="date" data-tpl-text="/date" data-tpl-value="/date" data-value=""></td>
|
||||
<td>
|
||||
<input data-form="fInside" type="radio" id="iRadio1" name="radio" value="r1" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio1">Radio1</label>
|
||||
<input data-form="fInside" type="radio" id="iRadio2" name="radio" value="r2" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio2">Radio2</label>
|
||||
<input data-form="fInside" type="radio" id="iRadio3" name="radio" value="r3" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio3">Radio3</label>
|
||||
</td>
|
||||
<td>
|
||||
<span class="checkbox">
|
||||
<input data-form="fInside" id="iPermissionCreate" name="permissioncreate" type="checkbox" value="CREATE" data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c">
|
||||
<label for="iPermissionCreate">Create</label>
|
||||
</span>
|
||||
<span class="checkbox">
|
||||
<input data-form="fInside" id="iPermissionRead" name="permissionread" type="checkbox" value="READ" data-tpl-text="/checkbox/r" data-tpl-value="/checkbox/r">
|
||||
<label for="iPermissionRead">Read</label>
|
||||
</span>
|
||||
<span class="checkbox">
|
||||
<input data-form="fInside" id="iPermissionUpdate" name="permissionupdate" type="checkbox" value="MODIFY" data-tpl-text="/checkbox/u" data-tpl-value="/checkbox/u">
|
||||
<label for="iPermissionUpdate">Update</label>
|
||||
</span>
|
||||
<form id="fInside" action="api/test" method="post"><input id="addRowInline" type="submit" value="Add"></form>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr>
|
||||
<td><form id="fRemoveY1" method="DELETE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col2</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col1</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col4</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col3</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><form id="fRemoveY2" method="DELETE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col4</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col1</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col2</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col3</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><form id="fRemoveY3" method="DELETE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col1</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col2</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col3</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col4</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
<button id="addButton">Add</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,4 +43,26 @@
|
|||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<section class="box">
|
||||
<div class="slider-3">
|
||||
<figure class="icon-cards">
|
||||
<div class="icon-cards-content">
|
||||
<div class="icon-cards-item">
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
||||
</div>
|
||||
<div class="icon-cards-item">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" alt="">
|
||||
</div>
|
||||
<div class="icon-cards-item">
|
||||
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,10 +5,10 @@
|
|||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td><i class="filter fa fa-filter" data-filter=""></i>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td><i class="filter fa fa-filter"></i>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td><i class="filter fa fa-filter"></i>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td><i class="filter fa fa-filter"></i>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -129,10 +129,12 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<table class="table darkred">
|
||||
<table id="tRemovable" class="table darkred">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Col1 Title</td>
|
||||
<td>Col2 Title</td>
|
||||
<td>Col3 Title</td>
|
||||
|
|
@ -141,25 +143,33 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><form id="fR1" method="NONE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td><form id="fR2" method="NONE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td>Col2</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td><form id="fR3" method="NONE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td>Col3</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td><form id="fR4" method="NONE"><i class="fa fa-times btn remove submit"></i></form>
|
||||
<td><i class="fa fa-cogs btn update submit"></i>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
|
|
@ -191,10 +201,38 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<table class="table green" id="table3" data-src="http://127.0.0.1/en/api/admin/find/account?search=do">
|
||||
<caption>Remote Data</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<td>
|
||||
<td data-name=""><i class="filter fa fa-filter"></i>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td data-name=""><i class="filter fa fa-filter"></i>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td data-name=""><i class="filter fa fa-filter"></i>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<tbody>
|
||||
<template id="input2-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td><form id="fRemove" method="NONE"><i class="fa fa-times btn remove"></i></form>
|
||||
<td><form id="fUpdate" method="NONE"><i class="fa fa-cogs btn update"></i></form>
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table purple" id="table1">
|
||||
<table class="table darkgreen" id="table5">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -257,7 +295,7 @@
|
|||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table lightblue" id="table2">
|
||||
<table class="table darkblue" id="table6">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -322,7 +360,7 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table darkgreen" id="table1">
|
||||
<table class="table orange" id="table7">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -385,7 +423,7 @@
|
|||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table darkblue" id="table2">
|
||||
<table class="table yellow" id="table8">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -447,130 +485,49 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table orange" id="table1">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<template id="table-filter-tpl">
|
||||
<section id="table-filter" class="box">
|
||||
<div class="inner">
|
||||
<form>
|
||||
<table class="layout wf-100">
|
||||
<tr><td colspan="2"><label>Column Name</label>
|
||||
<tr><td>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
<option>=
|
||||
<option>in
|
||||
<option>>
|
||||
<option>>=
|
||||
<option><
|
||||
<option><=
|
||||
<option>*
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<td><input type="text">
|
||||
<tr><td colspan="2"><select>
|
||||
<option>OR
|
||||
<option>AND
|
||||
</select>
|
||||
<tr><td>
|
||||
<select>
|
||||
<option>=
|
||||
<option>in
|
||||
<option>>
|
||||
<option>>=
|
||||
<option><
|
||||
<option><=
|
||||
<option>*
|
||||
</select>
|
||||
<td><input type="text">
|
||||
<tr><td colspan="2"><button type="submit">Filter</button><button type="reset">Cancel</button>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table yellow" id="table2">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const loginRequest = new jsOMS.Message.Request.Request('http://127.0.0.1/en/api/login', 'POST', 'json');
|
||||
loginRequest.setData({user: 'admin', pass: 'orange'});
|
||||
loginRequest.send();
|
||||
|
||||
jsOMS.UI.Component.Table.getRemoteData(document.getElementById('table3'));
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user