|
|
| Line 4: |
Line 4: |
| | <head> | | <head> |
| | <style> | | <style> |
| − | .list-group-item{
| + | |
| − | font-size:12px;
| + | |
| − | }
| + | |
| | </style> | | </style> |
| − | <script>
| |
| − | $(function () {
| |
| − | $('.list-group.checked-list-box .list-group-item').each(function () {
| |
| − |
| |
| − | // Settings
| |
| − | var $widget = $(this),
| |
| − | $checkbox = $('<input type="checkbox" class="hidden" />'),
| |
| − | color = ($widget.data('color') ? $widget.data('color') : "primary"),
| |
| − | style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
| |
| − | settings = {
| |
| − | on: {
| |
| − | icon: 'glyphicon glyphicon-check'
| |
| − | },
| |
| − | off: {
| |
| − | icon: 'glyphicon glyphicon-unchecked'
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | $widget.css('cursor', 'pointer')
| |
| − | $widget.append($checkbox);
| |
| | | | |
| − | // Event Handlers
| + | <script type="text/javascript" language="JavaScript"> |
| − | $widget.on('click', function () {
| + | |
| − | $checkbox.prop('checked', !$checkbox.is(':checked'));
| + | |
| − | $checkbox.triggerHandler('change');
| + | |
| − | updateDisplay();
| + | |
| − | });
| + | |
| − | $checkbox.on('change', function () {
| + | |
| − | updateDisplay();
| + | |
| − | });
| + | |
| − |
| + | |
| | | | |
| − | // Actions
| + | function checkBox(id){ |
| − | function updateDisplay() {
| + | var list = document.getElementById(id); |
| − | var isChecked = $checkbox.is(':checked');
| + | |
| | + | if (list.className == "fas fa-check-square"){ |
| | + | list.className = "far fa-square"; |
| | + | } |
| | + | else{ |
| | + | list.className = "fas fa-check-square"; |
| | + | } |
| | | | |
| − | // Set the button's state | + | } |
| − | $widget.data('state', (isChecked) ? "on" : "off");
| + | |
| | | | |
| − | // Set the button's icon
| + | </script> |
| − | $widget.find('.state-icon')
| + | |
| − | .removeClass()
| + | |
| − | .addClass('state-icon ' + settings[$widget.data('state')].icon);
| + | |
| | | | |
| − | // Update the button's color
| + | <style> |
| − | if (isChecked) {
| + | |
| − | $widget.addClass(style + color + ' active');
| + | i{ |
| − | } else { | + | font-size:30px; |
| − | $widget.removeClass(style + color + ' active');
| + | margin-left:10%; |
| − | } | + | margin-top:10%; |
| | + | cursor:pointer; |
| | } | | } |
| | | | |
| − | // Initialization
| |
| − | function init() {
| |
| − |
| |
| − | if ($widget.data('checked') == true) {
| |
| − | $checkbox.prop('checked', !$checkbox.is(':checked'));
| |
| − | }
| |
| − |
| |
| − | updateDisplay();
| |
| | | | |
| − | // Inject the icon if applicable
| + | </style> |
| − | if ($widget.find('.state-icon').length == 0) {
| + | |
| − | $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>');
| + | |
| − | }
| + | |
| − | }
| + | |
| − | init();
| + | |
| − | });
| + | |
| − |
| + | |
| − | $('#get-checked-data').on('click', function(event) {
| + | |
| − | event.preventDefault();
| + | |
| − | var checkedItems = {}, counter = 0;
| + | |
| − | $("#check-list-box li.active").each(function(idx, li) {
| + | |
| − | checkedItems[counter] = $(li).text();
| + | |
| − | counter++;
| + | |
| − | });
| + | |
| − | $('#display-json').html(JSON.stringify(checkedItems, null, '\t')); | + | |
| − | });
| + | |
| − | });</script>
| + | |
| | | | |
| − |
| + | </head> |
| − | </head> | + | |
| | | | |
| − | <body> | + | <body> |
| − | | + | <div class="container"> |
| | <div class="content"> | | <div class="content"> |
| | <div class="titleimg"> | | <div class="titleimg"> |
| | <br/> | | <br/> |
| − | <h1>For Judges</h1>
| + | <h1>For Judges</h1> |
| − | <br/>
| + | <br/> |
| − | <br/>
| + | <br/> |
| − | <img src="" alt="" width=" 20%"; > | + | <img src="" alt="" width=" 30%"; > |
| − | </div>
| + | </div> |
| | | | |
| − |
| |
| − | <div class="row">
| |
| − | <div class="col-xs-6">
| |
| − | <h3 class="text-center">WET LAB</h3>
| |
| − | <div class="well" style="max-height: 300px;overflow: auto;">
| |
| − | <ul class="list-group checked-list-box">
| |
| − | <li class="list-group-item">Cras justo odio</li>
| |
| − | <li class="list-group-item" data-checked="true">Dapibus ac facilisis in</li>
| |
| − | <li class="list-group-item">Morbi leo risus</li>
| |
| − | <li class="list-group-item">Porta ac consectetur ac</li>
| |
| − | <li class="list-group-item">Vestibulum at eros</li>
| |
| − | <li class="list-group-item">Cras justo odio</li>
| |
| − | <li class="list-group-item">Dapibus ac facilisis in</li>
| |
| − | <li class="list-group-item">Morbi leo risus</li>
| |
| − | <li class="list-group-item">Porta ac consectetur ac</li>
| |
| − | <li class="list-group-item">Vestibulum at eros</li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="col-xs-6">
| |
| − | <h3 class="text-center">DRY LAB</h3>
| |
| − | <div class="well" style="max-height: 300px;overflow: auto;">
| |
| − | <ul class="list-group checked-list-box">
| |
| − | <li class="list-group-item" data-style="button">Cras justo odio</li>
| |
| − | <li class="list-group-item" data-style="button" data-color="success">Dapibus ac facilisis in</li>
| |
| − | <li class="list-group-item" data-style="button" data-color="info">Morbi leo risus</li>
| |
| − | <li class="list-group-item" data-style="button" data-color="warning">Porta ac consectetur ac</li>
| |
| − | <li class="list-group-item" data-style="button" data-color="danger">Vestibulum at eros</li>
| |
| − | <li class="list-group-item">Cras justo odio</li>
| |
| − | <li class="list-group-item">Dapibus ac facilisis in</li>
| |
| − | <li class="list-group-item">Morbi leo risus</li>
| |
| − | <li class="list-group-item">Porta ac consectetur ac</li>
| |
| − | <li class="list-group-item">Vestibulum at eros</li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-xs-6">
| |
| − | <h3 class="text-center">HUMAN PRACTICES</h3>
| |
| − | <div class="well" style="max-height: 300px;overflow: auto;">
| |
| − | <ul class="list-group checked-list-box">
| |
| − | <li class="list-group-item" data-style="button">Cras justo odio</li>
| |
| − | <li class="list-group-item" data-color="success">Dapibus ac facilisis in</li>
| |
| − | <li class="list-group-item" data-style="button" data-color="info">Morbi leo risus</li>
| |
| − | <li class="list-group-item" data-color="warning">Porta ac consectetur ac</li>
| |
| − | <li class="list-group-item" data-style="button" data-color="danger">Vestibulum at eros</li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-xs-6">
| |
| − | <h3 class="text-center">PEOPLE</h3>
| |
| − | <div class="well" style="max-height: 300px;overflow: auto;">
| |
| − | <ul class="list-group checked-list-box">
| |
| − | <li class="list-group-item" data-style="button">Cras justo odio</li>
| |
| − | <li class="list-group-item" data-color="success">Dapibus ac facilisis in</li>
| |
| − | <li class="list-group-item" data-style="button" data-color="info">Morbi leo risus</li>
| |
| − | <li class="list-group-item" data-color="warning">Porta ac consectetur ac</li>
| |
| − | <li class="list-group-item" data-style="button" data-color="danger">Vestibulum at eros</li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| | + | <a href="https://2018.igem.org/Team:Imperial_College/Judges" target="_blank"><i onclick="checkBox('box1')" id="box1" class="far fa-square"> Check this box 1</i></a><br> |
| | + | <a href="https://2018.igem.org/Team:Imperial_College/Judges" target="_blank"><i onclick="checkBox('box2')" id="box2" class="far fa-square"> Check this box 1</i></a><br> |
| | + | <a href="https://2018.igem.org/Team:Imperial_College/Judges" target="_blank"><i onclick="checkBox('box3')" id="box3" class="far fa-square"> Check this box 1</i></a><br> |
| | + | <a href="https://2018.igem.org/Team:Imperial_College/Judges" target="_blank"><i onclick="checkBox('box4')" id="box4" class="far fa-square"> Check this box 1</i></a><br> |
| | + | <a href="https://2018.igem.org/Team:Imperial_College/Judges" target="_blank"><i onclick="checkBox('box5')" id="box7" class="far fa-square"> Check this box 1</i></a><br> |
| | + | <a href="https://2018.igem.org/Team:Imperial_College/Judges" target="_blank"><i onclick="checkBox('box6')" id="box6" class="far fa-square"> Check this box 1</i></a><br> |
| | + | |
| | | | |
| | | | |
