#53 added custom checkboxes, added selection of all conferences
This commit is contained in:
parent
9182a71015
commit
50dbe8cb8f
@ -21,11 +21,29 @@
|
||||
}
|
||||
|
||||
.form-check {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 31px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.form-check input {
|
||||
margin: 10px 5px;
|
||||
.checkbox {
|
||||
position: relative;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 15%;
|
||||
background: #fff;
|
||||
border: 1px solid #aaa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selected:before {
|
||||
content: '✔';
|
||||
position: absolute;
|
||||
line-height: 0.8;
|
||||
color: #09ad7e;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.circle {
|
||||
|
@ -1,10 +1,25 @@
|
||||
$(document).ready(function () {
|
||||
|
||||
$('.conference-info').click( function() {
|
||||
$('.data-href-js').click( function() {
|
||||
window.location = $(this).attr('data-href');
|
||||
});
|
||||
|
||||
$('.circle').parent().click( function() {
|
||||
$(this).children(".circle").toggleClass('circle-active');
|
||||
$(this).children('.circle').toggleClass('circle-active');
|
||||
});
|
||||
|
||||
$('.checkbox').parent().click( function() {
|
||||
$(this).children('.checkbox').toggleClass('selected');
|
||||
});
|
||||
|
||||
$('#select-all-js').click( function() {
|
||||
var childNodes = $('.conference-item .form-check .checkbox')
|
||||
.each(function(i, elem) {
|
||||
if ($(this).hasClass('selected') && $('#select-all-js').hasClass('selected')) {
|
||||
$(this).toggleClass('selected');
|
||||
} else if (!$(this).hasClass('selected') && !$('#select-all-js').hasClass('selected')){
|
||||
$(this).toggleClass('selected');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -20,12 +20,12 @@
|
||||
<div class="col-lg-12">
|
||||
<div class="d-flex bd-highlight">
|
||||
<div class="form-check p-1 bd-highlight">
|
||||
<input class="" type="checkbox"/>
|
||||
<div class="checkbox" id="select-all-js"></div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger">Удалить</button>
|
||||
<button type="button" class="btn btn-success">Добавить</button>
|
||||
<button type="button" class="btn btn-success data-href-js" data-href="./conference">Добавить
|
||||
</button>
|
||||
<div class="p-1 flex-grow-1 bd-highlight">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,12 +35,26 @@
|
||||
<div class="conference-list-body list-group">
|
||||
<div class="conference-item d-flex bd-highlight list-group-item">
|
||||
<div class="form-check p-1 bd-highlight">
|
||||
<input class="" type="checkbox" disabled="disabled"/>
|
||||
<div class="checkbox"></div>
|
||||
</div>
|
||||
<div class="form-check p-1 bd-highlight">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="conference-info p-1 flex-grow-1 bd-highlight d-flex" data-href="./conference">
|
||||
<div class="conference-info p-1 flex-grow-1 bd-highlight d-flex data-href-js"
|
||||
data-href="./conference">
|
||||
<div class="conference-name p-1 flex-grow-1 bd-highlight">Конференция 1</div>
|
||||
<div class="conference-date p-1 bd-highlight">01.01.1990</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conference-item d-flex bd-highlight list-group-item">
|
||||
<div class="form-check p-1 bd-highlight">
|
||||
<div class="checkbox"></div>
|
||||
</div>
|
||||
<div class="form-check p-1 bd-highlight">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="conference-info p-1 flex-grow-1 bd-highlight d-flex data-href-js"
|
||||
data-href="./conference">
|
||||
<div class="conference-name p-1 flex-grow-1 bd-highlight">Конференция 1</div>
|
||||
<div class="conference-date p-1 bd-highlight">01.01.1990</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user