"Pesquisa de Pacotes"
Bootstrap 3.2.0 Snippet by samanthasilva

Post to Facebook Tweet this

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="todolist not-done">
<h1>Pacotes</h1>
<input type="text" class="form-control add-todo" placeholder="Pesquisar Pacotes">
<button id="checkAll" class="btn btn-success">Selecionar todos</button>
<hr>
<ul id="sortable" class="list-unstyled">
<li class="ui-state-default">
<div class="checkbox">
<label>
<input type="checkbox" value="" />Pacote de Histerossalpingografia</label>
</div>
</li>
<li class="ui-state-default">
<div class="checkbox">
<label>
<input type="checkbox" value="" />Pacote cirurgia parto</label>
</div>
</li>
<li class="ui-state-default">
<div class="checkbox">
<label>
<input type="checkbox" value="" />Pacote de crirugia ortopédica</label>
</div>
</li>
</ul>
<div class="todo-footer">
<strong><span class="count-todos"></span></strong>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
body{
background-color:#EEEEEE;
}
.todolist{
background-color:#FFF;
padding:20px 20px 10px 20px;
margin-top:30px;
}
.todolist h1{
margin:0;
padding-bottom:20px;
text-align:center;
}
.form-control{
border-radius:0;
}
li.ui-state-default{
background:#fff;
border:none;
border-bottom:1px solid #ddd;
}
li.ui-state-default:last-child{
border-bottom:none;
}
.todo-footer{
background-color:#F4FCE8;
margin:0 -20px -10px -20px;
padding: 10px 20px;
}
#done-items li{
padding:10px 0;
border-bottom:1px solid #ddd;
text-decoration:line-through;
}
#done-items li:last-child{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
$("#sortable").sortable();
$("#sortable").disableSelection();
countTodos();
// all done btn
$("#checkAll").click(function(){
AllDone();
});
//create todo
$('.add-todo').on('keypress',function (e) {
e.preventDefault
if (e.which == 13) {
if($(this).val() != ''){
var todo = $(this).val();
createTodo(todo);
countTodos();
}else{
// some validation
}
}
});
// mark task as done
$('.todolist').on('change','#sortable li input[type="checkbox"]',function(){
if($(this).prop('checked')){
var doneItem = $(this).parent().parent().find('label').text();
$(this).parent().parent().parent().addClass('remove');
done(doneItem);
countTodos();
}
});
//delete done task from "already done"
$('.todolist').on('click','.remove-item',function(){
removeItem(this);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro

Questions / Comments: