Skip to content

Instantly share code, notes, and snippets.

@ywnb

ywnb/protectlist.html

Created December 1, 2016 08:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ywnb/ea1a993e73630477e69967a6018536b4 to your computer and use it in GitHub Desktop.
Save ywnb/ea1a993e73630477e69967a6018536b4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
protectlist.html
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>プロテクトリストメーカー サンプル</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css" media="screen">
label.btn{margin: 0 5px 2px 0;}
th{white-space:nowrap;}
td, th{vertical-align: top;}
.counter{padding:5px; font-size: 18px;}
span.selected{color: red;font-weight: bold;}
</style>
</head>
<body class="container">
<h1 class="heading">プロテクトリスト メーカー(Sample)</h1>
<div id="protectlist" class="btn-group" data-toggle="buttons">
<div class="counter"><span class="selected">0</span> / 28人プロテクト　<button id="listClear" class="btn btn-default btn-sm">クリア</button> <button id="plistShow" class="btn btn-default btn-sm">リストを表示</button></div>
<table class="table" id="protect_sim">
<tr></tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
var players = {
'投手' : ['藤川','藤浪','能見','安藤','岩田','髙橋','榎田','高宮','岩崎','歳内','岩貞','横山','金田','松田','石崎','秋山','桑原','竹安','守屋','青柳',' 島本','山本','伊藤和','望月','田面'],
'捕手' : ['梅野','小宮山','坂本','岡﨑','小豆畑','原口'],
'内野手' : ['鳥谷','西岡','今成','上本','新井','陽川','荒木','北條','森越','植田'],
'外野手' : ['福留','大和','俊介','狩野','伊藤隼','江越','髙山','緒方','横田','板山','中谷']
};
$(function(){
$.each(players, function(pos, plist){
var tr = $("<tr/>");
tr.append('<th>'+pos+'</th>');
var td = $("<td/>");
$.each(plist, function(i, pname){
td.append('<label class="btn btn-default btn-small"><input type="checkbox" value="'+ pname + '">'+ pname +'</label>');
});
td.appendTo(tr);
tr.appendTo($('#protect_sim'));
});
$('#protectlist input:checkbox').on('change', function(){
var count = $('#protectlist input:checkbox:checked').length;
if(count > 28) alert('プロテクト上限を超えています');
$('#protectlist .selected').text(count);
});
$('#listClear').on('click', function(){
$('#protectlist input:checkbox').prop('checked', false);
$('#protectlist label').removeClass('active');
$('#protectlist .selected').text(0);
});
$('#plistShow').popover({
container: 'body',placement: 'bottom',
title: 'あなたのプロテクトリスト',trigger: 'click',html: true,
content: function(){
var protected = [];
var nonprotected = [];
$('#protectlist input:checkbox').each(function(){
if($(this).prop('checked')){protected.push($(this).val());
}else{nonprotected.push($(this).val());}
});
return '【プロテクト】<br>'+protected.join(', ')+'<br>【プロテクト漏れ】<br>'+nonprotected.join(', ');
},
});
});
</script>
</body>
</html>
@ywnb
Copy link
Author

ywnb commented Dec 2, 2016

下のブログ記事用に書いたスクリプトです

オリックス糸井選手がFA移籍したので阪神の人的補償プロテクトリストメーカーを作ってみた | やわなべ.net https://ywnb.net/p/201611/3215

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment