"Easy Table Filter"
Bootstrap 3.3.0 Snippet by xrozix

Post to Facebook Tweet this

<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"> <!-- TEMP DISABLE HEADER TO MAKE PLACE FOR VARIABLE --> <!-- TEMP DISABLE HEADER TO MAKE PLACE FOR VARIABLE <div class="page-header"> <h1>Abuse Reporter <small>Generate, log and send a report for an abuse incident. Press F1 for help.</small></h1> </div> --> <!-- Registration form - START --> <div class="container"> <div class="row"> <form role="form"> <div class="col-lg-6"> <br> <div class="well well-sm"> <strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong> </div> <div class="row"> <div class="form-group col-lg-5"> <label for="InputCategory">Incident type</label> <div class="input-group col-md-12" id="InputCategoryDiv"> <select class="form-control" id="InputCategorySelect" required="" autofocus> <option value="an abuse" disabled selected style="display:none;"> Choose an abuse type </option> <option id="OptionCopyright" value="a copyright infringement" id="OptionCopyright"> Copyright infringement </option> <option id="OptionTrademark" value="a trademark infringement"> Trademark infringement </option> <option id="OptionPhishing" value="a phishing" onclick='document.getElementById("InputDetailsLabel").innerHTML = "URL(s)";$("#InputDetails").attr("placeholder","Enter URL(s), one per line");'> Phishing </option> <option id="OptionMalware" value="a malware"> Malware </option> <option id="OptionHacking" value="a hacking" onclick='document.getElementById("InputDetailsLabel").innerHTML = "Logs";$("#InputDetails").attr("placeholder","Enter logs, if the logs are large a 10 line snippet will suffice");'> Hacking </option> <option id="OptionHacking" value="a spam" onclick='document.getElementById("InputDetailsLabel").innerHTML = "Headers";$("#InputDetails").attr("placeholder","Insert email headers");'> Spam </option> <option id="OptionPrivacy" value="a privacy violation"> Privacy violation </option> <option id="OptionChildAbuse" value="a child abuse" onclick='document.getElementById("InputDetailsLabel").innerHTML = "URL(s)";$("#InputDetails").attr("placeholder","Enter URL(s), one per line");'> Child abuse </option> </select> <!-- <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span> --> </div> </div> <div class="form-group col-lg-5"> <label for="butthon"></label> <div class="input"> <a id="butthon" class="form-control btn btn-info">Save report</a> </div> </div> <div class="form-group col-lg-2"> <label for="InputID">Incident ID</label> <div class="input-group"> <input class="form-control" id="InputID" name="InputID" placeholder="Enter optional incident ID" type="text" readonly> <a class= "input-group-addon" href="#"><i class="fa fa-question"></i></a> </div> </div> </div> <div class="row"> <div class="form-group col-lg-7"> <label for="InputDomain">Domain</label> <div class="input-group"> <input class="form-control" id="InputDomain" name="InputDomain" placeholder="Enter domain to be reported" required="" type="text" readonly> <span class= "input-group-addon"><span class= "glyphicon glyphicon-asterisk"></span></span> </div> </div> <div class="form-group col-lg-5"> <label for="InputIP">IP address</label> <div class="input-group"> <input class="form-control" id="InputIP" name="InputIP" placeholder="IP address" type="text" required readonly> <span class= "input-group-addon"><i class="fa fa-sitemap"></i></span> </div> </div> </div> <div class="row"> <div class="form-group col-lg-7"> <label for="InputISP">Hosting provider</label> <div class="input-group"> <input class="form-control" readonly id="InputISP" name="InputISP" placeholder="Retrieved automatically" required="" type="text"> <span class="input-group-addon" id="InputISPFlag"><i class= "fa fa-lock"></i></span> </div> </div> <div class="form-group col-lg-5"> <label for="InputAbuseAddress">ISP email address</label> <div class="input-group col-lg-12"> <input class="form-control" readonly id="InputAbuseAddress" name="InputAbuseAddress" placeholder="Enter ISP email address" required="" type="text"> </div> </div> </div> <div class="form-group"> <label for="InputDetails" id="InputDetailsLabel">Details</label> <div class="input-group"> <textarea class="form-control" id="InputDetails" name="InputDetails" placeholder="Enter incident details" required="" rows= "5" readonly></textarea> <span class="input-group-addon"><i class= "fa fa-link"></i></span> </div> </div> <hr> <div class="form-group"> <label for="InputName">Name</label> <div class="input-group"> <input class="form-control" id="InputName" name="InputName" placeholder="Enter your name" required="" type="text"> <span class= "input-group-addon"><span class= "glyphicon glyphicon-asterisk"></span></span> </div> </div> <div class="form-group"> <label for="InputEmail">Reporter's email address</label> <div class="input-group"> <input class="form-control" id="InputEmail" name="InputEmail" placeholder="Your email address" required="" type="email"> <span class= "input-group-addon"><span class= "glyphicon glyphicon-asterisk"></span></span> </div> </div> <div class="form-group"> <label for="InputClient">Client</label> <div class="input-group"> <input class="form-control" id="InputClient" name="InputClient" placeholder="Enter client name" required="" type="text"> <span class= "input-group-addon"><span class= "glyphicon glyphicon-asterisk"></span></span> </div> </div> <!-- <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right"> --> </div> </form> <div class="col-lg-6"> <br> <div class="well well-sm"> <strong><span class="glyphicon glyphicon-asterisk"></span>Output text</strong> </div> <div class="form-group"> <label for="OutputSubject">Report subject</label> <div class="input-group col-md-12"> <input class="form-control" readonly id="OutputSubject" name= "OutputSubject" placeholder="Your subject will appear here" required="" type="text"> <a class="input-group-addon" href="#"><i class= "fa fa-pencil-square-o"></i></a> </div> </div> <div class="form-group"> <label for="OutputMessage">Report text</label> <div class="input-group col-md-12"> <textarea class="form-control" readonly id="OutputMessage" name= "OutputMessage" placeholder="Your report text will appear here" required="" rows="21"></textarea> </div> </div> <div class="form-group"> <label for="MailgunAPIKey">Mailgun API key</label> <div class="input-group col-md-12"> <input class="form-control" id="APIKey" name="APIKey" placeholder= "API Key" type="text"> <span class="input-group-addon"><i class= "fa fa-key fa-fw"></i></span> </div> </div> <br> <a class="btn btn-info">Save report</a> <a class= "btn btn-success" href=mailto:abuse@host.com?subject=abuse%20subject&body=Dear%20ISP,%0D%0A%0D%0AThe%20following%20IP%20address%20killed%20my%20family:%208.8.8.8%0D%0A%0D%0APlz%20fix.%0D%0A%0D%0AThx"> Send with email client</a> <input class="btn btn-success pull-right" id= "submit" name="submit" type="submit" value="Send using Mailgun API"> <!-- <br /><br /> <div class="alert alert-success"> <strong><span class="glyphicon glyphicon-ok"></span> Success! Message sent.</strong> </div> <div class="alert alert-danger"> <span class="glyphicon glyphicon-remove"></span><strong> Error! Please check all page inputs.</strong> </div> --> </div> </div> </div> <!-- Registration form - END --> </div>
/* -------------------------------------------------- :: General -------------------------------------------------- */ body { font-family: 'Open Sans', sans-serif; color: #353535; } .content h1 { text-align: center; } .content .content-footer p { color: #6d6d6d; font-size: 12px; text-align: center; } .content .content-footer p a { color: inherit; font-weight: bold; } /* -------------------------------------------------- :: Table Filter -------------------------------------------------- */ .panel { border: 1px solid #ddd; background-color: #fcfcfc; } .panel .btn-group { margin: 15px 0 30px; } .panel .btn-group .btn { transition: background-color .3s ease; } .table-filter { background-color: #fff; border-bottom: 1px solid #eee; } .table-filter tbody tr:hover { cursor: pointer; background-color: #eee; } .table-filter tbody tr td { padding: 10px; vertical-align: middle; border-top-color: #eee; } .table-filter tbody tr.selected td { background-color: #eee; } .table-filter tr td:first-child { width: 38px; } .table-filter tr td:nth-child(2) { width: 35px; } .ckbox { position: relative; } .ckbox input[type="checkbox"] { opacity: 0; } .ckbox label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ckbox label:before { content: ''; top: 1px; left: 0; width: 18px; height: 18px; display: block; position: absolute; border-radius: 2px; border: 1px solid #bbb; background-color: #fff; } .ckbox input[type="checkbox"]:checked + label:before { border-color: #2BBCDE; background-color: #2BBCDE; } .ckbox input[type="checkbox"]:checked + label:after { top: 3px; left: 3.5px; content: '\e013'; color: #fff; font-size: 11px; font-family: 'Glyphicons Halflings'; position: absolute; } .table-filter .star { color: #ccc; text-align: center; display: block; } .table-filter .star.star-checked { color: #F0AD4E; } .table-filter .star:hover { color: #ccc; } .table-filter .star.star-checked:hover { color: #F0AD4E; } .table-filter .media-photo { width: 35px; } .table-filter .media-body { display: block; /* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */ } .table-filter .media-meta { font-size: 11px; color: #999; } .table-filter .media .title { color: #2BBCDE; font-size: 14px; font-weight: bold; line-height: normal; margin: 0; } .table-filter .media .title span { font-size: .8em; margin-right: 20px; } .table-filter .media .title span.pagado { color: #5cb85c; } .table-filter .media .title span.pendiente { color: #f0ad4e; } .table-filter .media .title span.cancelado { color: #d9534f; } .table-filter .media .summary { font-size: 14px; }
$(document).ready(function () { $( "#butthon" ).click(function() { alert( "Handler for .click() called." ); }); function toCelsius(fahrenheit) { switchElement(fahrenheit); } function switchElement(id) { } });

Questions / Comments: