<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class=" well col-xs-6 col-md-3"> RM234567</br> <b>Permata Sari</b></br> 29 tahun / 23 Jan 1986 <hr> <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span> Dashboard</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> Rekam Medis</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Diagnosis</a></li> <li role="presentation" class="active"><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Tindakan Medis</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> Hasil Radiologi</a></li> </ul> </div> <div class=" col-xs-12 col-sm-6 col-md-9"> <h3><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Tindakan Medis</h3> <div class="panel panel-default"> <div class="panel-heading"> <div class="row"> <div class="col-md-3"> <h4>Daftar kode ICD-10</h4> </div> <div class="col-md-7 pull-right"> <div class="input-group"> <input type="search" id="search" class="form-control" placeholder="Cari..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </span> </div><!-- /input-group --> </div> </div> </div> <div style="height: 200px; overflow: auto"> <table class="table" id="table"> <thead> <tr> <th>Kode</th> <th>Deskripsi tindakan</th> <th></th> </tr> </thead> <tbody> <tr> <td>0210093</td> <td>Bypass Coronary Artery, One Site from Coronary Artery with Autologous Venous Tissue, Open Approach</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> <tr> <td>2W20X4Z</td> <td>Dressing of Head using Bandage</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> <tr> <td>4A0204Z</td> <td>Measurement of Cardiac Electrical Activity, Open Approach</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> <tr> <td>83.8</td> <td>Other plastic operations on muscle, tendon, and fascia</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> <tr> <td>90.5</td> <td>Microscopic Examination Of Blood</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> <tr> <td>99.04</td> <td>Transfusion of packed cells</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> </tbody> </table> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4>Tindakan Medis</h4> </div> <table class="table"> <thead> <tr> <th>Tanggal - Jam</th> <th>Kode ICD-10</th> <th>Deskripsi tindakan</th> </tr> </thead> <tbody> <tr> <td>23/Feb/15 - 11:15</td> <td>90.5</td> <td>Microscopic Examination Of Blood</td> </tr> <tr> <td>23/Feb/15 - 15:06</td> <td>99.04</td> <td>Transfusion of packed cells</td> </tr> <tr> <td>23/Feb/15 - 17:54</td> <td>83.8</td> <td>Other plastic operations on muscle, tendon, and fascia</td> </tr> </tbody> </table> </div> <div class="panel panel-default"> <div class="panel-heading"> <div class="row"> <div class="col-md-10"> <h4>Daftar Informed Consent</h4> </div> <div> <button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Buat Baru</button> </div> </div> </div> <table class="table"> <thead> <tr> <th>Tanggal - Jam</th> <th>Keterangan</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>23/Feb/15 - 18:42</td> <td>Inf. consent untuk plastic operations on muscle, tendon, and fascia</td> <td><a href="#" data-toggle="modal" data-target="#informedConsentModal"> Belum ditandatangani</td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="informedConsentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Informed Consent - Plastic operations on muscle, tendon, and fascia</h4> </div> <div class="modal-body"> <p> Saya yang bertanda tangan dibawah ini: </br> </p> <p> <b>Nama</b>: Susilo Santoso </br> <b>TTL</b>: Semarang, 08 Jan 1973 </br> <b>Alamat</b>: Jl. Surakarta 23, Semarang </br> </p> <p> Bersama ini menyatakan kesediannya untuk dilakukan tindakan dan prosedur <i>plastic operations on muscle, tendon, and fascia</i> pada diri saya. Persetujuan ini saya berikan setelah mendapat penjelasan oleh <i>dr. Silvia Nurahman</i>. Dengan demikian terjadi kesepahaman diantara pasien dan dokter tentang upaya serta tujuan tindakan, untuk mencegah terjadinya masalah hukum dikemudian hari. </p> <p> Demikian surat persetujuan ini saya buat tanpa ada paksaan dari pihak manapun dan agar dapat dipergunakan sebagaimana mestinya. </p> <p class="text-right"> Semarang, 23/Feb/2015 - 18:46 </p> <form> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label for="doctorSignature">Dokter</label> <textarea class="form-control" id="doctorSignature" placeholder="Tanda tangan dokter" rows="3"></textarea> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="witnessSignature">Saksi</label> <textarea class="form-control" id="witnessSignature" placeholder="Tanda tangan saksi" rows="3"></textarea> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="patientSignature">Pasien/Wali</label> <textarea class="form-control" id="patientSignature" placeholder="Tanda tangan pasien/wali" rows="3"></textarea> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button> <button type="button" class="btn btn-primary">Simpan</button> </div> </div> </div> </div> <script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>

hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; }

$(function () { $( '#table' ).searchable({ striped: true, searchType: 'fuzzy' }); $( '#searchable-container' ).searchable({ searchField: '#container-search', selector: '.row', childSelector: '.col-xs-4', show: function( elem ) { elem.slideDown(100); }, hide: function( elem ) { elem.slideUp( 100 ); } }) });