<link rel="stylesheet" type="text/css" media="screen" href="http://maplia.jp/script/tablesorter/theme/style.css" charset="Shift_JIS" />
 <style type="text/css">
   tbody tr th {
     padding: 0 5px;
   }
   tbody tr td.number {
     text-align: center;
   }
   tbody tr td.mark {
     text-align: center;
   }
   tbody tr td.text {
     text-align: left;
   }
   tbody tr.std td {
     background-color: #ccffcc;
   }
   tbody tr.hrd td {
     background-color: #ffffcc;
   }
   tbody tr.mas td {
     background-color: #ffcccc;
   }
 </style>
 <script type="text/javascript" src="http://maplia.jp/script/jquery.tablesorter.min.js"></script>
 <script type="text/javascript" src="http://maplia.jp/script/jquery.json2table.js"></script>
 <script type="text/javascript">
   var musics;
   var table;
   var level_min = 0;
   var level_max = 99;
   var level_delta = 10;
   var notes_min = 0;
   var notes_max = 899;
   var notes_delta = 100;
 
   $(document).ready(function() {
     $.getJSON('http://cxbrank.maplia.jp/api/musics?callback=?', function(data) {
       musics = data;
       table = $('#table_musics');
 
       select_level = $('#select_level');
       select_level.append($('<option/>', {
         value: -1, text: 'すべて'
       }));
       for (var i = level_min; i < level_max; i += level_delta) {
         select_level.append($('<option/>', {
           value: i, text: i + '~' + (i + level_delta - 1)
         }));
       }
 
       select_notes = $('#select_notes');
       select_notes.append($('<option/>', {
         value: -1, text: 'すべて'
       }));
       for (var i = notes_min; i < notes_max; i += notes_delta) {
         select_notes.append($('<option/>', {
           value: i, text: i + '~' + (i + notes_delta - 1)
         }));
       }
 
       createMusicTable();
       filterMusicTable();
     });
   });
 
   function createMusicTable() {
     var table_data = {};
     table_data.thead_column_classes = [
       'style_th', 'style_th', 'style_th', 'style_th', 'style_th'
     ];
     table_data.tbody_column_classes = [
       'style_th', 'text', 'mark', 'number', 'number'
     ];
     table_data.thead = [];
     table_data.tbody = [];
     table_data.thead[0] = {
       values: ['#', 'タイトル', '難易度', 'レベル', 'ノート数']
     };
 
     $.each(musics, function(i, music) {
       table_data.tbody[table_data.tbody.length] = {
         id: music.text_id + '_std',
         class_name: 'std',
         values: [
           music.number, music.full_title, 'STD',
           new Number(music.std.level).toFixed(1), music.std.notes
         ]
       };
       table_data.tbody[table_data.tbody.length] = {
         id: music.text_id + '_hrd',
         class_name: 'hrd',
         values: [
           music.number, music.full_title, 'HRD',
           new Number(music.hrd.level).toFixed(1), music.hrd.notes
         ]
       };
       table_data.tbody[table_data.tbody.length] = {
         id: music.text_id + '_mas',
         class_name: 'mas',
         values: [
           music.number, music.full_title, 'MAS',
           new Number(music.mas.level).toFixed(1), music.mas.notes
         ]
       };
       if (!music.deleted) {
         table_data.tbody[table_data.tbody.length] = {
           id: music.text_id + '_std',
           class_name: 'std',
           values: [
             music.number, music.full_title, 'STD',
             new Number(music.std.level).toFixed(1), music.std.notes
           ]
         };
         table_data.tbody[table_data.tbody.length] = {
           id: music.text_id + '_hrd',
           class_name: 'hrd',
           values: [
             music.number, music.full_title, 'HRD',
             new Number(music.hrd.level).toFixed(1), music.hrd.notes
           ]
         };
         table_data.tbody[table_data.tbody.length] = {
           id: music.text_id + '_mas',
           class_name: 'mas',
           values: [
             music.number, music.full_title, 'MAS',
             new Number(music.mas.level).toFixed(1), music.mas.notes
           ]
         };
       }
     });
 
     table.json2table(table_data);
     table.tablesorter({sortList: [[3, 1]]});
   }
 
   function filterMusicTable() {
     diff = parseInt($(':radio[name="diff"]:checked').val());
     level = parseInt($('select[name="level"]').val());
     notes = parseInt($('select[name="notes"]').val());
 
     $.each(musics, function (i, music) {
       if ((diff == 0) || (diff == 1)) {
         $('#' + music.text_id + '_std').show();
       } else {
         $('#' + music.text_id + '_std').hide();
       }
       if ((diff == 0) || (diff == 2)) {
         $('#' + music.text_id + '_hrd').show();
       } else {
         $('#' + music.text_id + '_hrd').hide();
       }
       if ((diff == 0) || (diff == 3)) {
         $('#' + music.text_id + '_mas').show();
       } else {
         $('#' + music.text_id + '_mas').hide();
       }
 
       if (level != -1) {
         if ((music.std.level < level) || (music.std.level >= level + level_delta)) {
           $('#' + music.text_id + '_std').hide();
         }
         if ((music.hrd.level < level) || (music.hrd.level >= level + level_delta)) {
           $('#' + music.text_id + '_hrd').hide();
         }
         if ((music.mas.level < level) || (music.mas.level >= level + level_delta)) {
           $('#' + music.text_id + '_mas').hide();
         }
       }

 
       if (notes != -1) {
         if ((music.std.notes < notes) || (music.std.notes >= notes + notes_delta)) {
           $('#' + music.text_id + '_std').hide();
         }
         if ((music.hrd.notes < notes) || (music.hrd.notes >= notes + notes_delta)) {
           $('#' + music.text_id + '_hrd').hide();
         }
         if ((music.mas.notes < notes) || (music.mas.notes >= notes + notes_delta)) {
           $('#' + music.text_id + '_mas').hide();
         }
       }
     });
   }
 </script>
 <p>
   難易度フィルター: 
   <label><input type="radio" name="diff" value="0" onchange="filterMusicTable()" checked="checked"> 全譜面</label>
   <label><input type="radio" name="diff" value="1" onchange="filterMusicTable()"> STANDARD</label>
   <label><input type="radio" name="diff" value="2" onchange="filterMusicTable()"> HARD</label>
   <label><input type="radio" name="diff" value="3" onchange="filterMusicTable()"> MASTER</label>
 </p>
 <p>
   レベルフィルター: <select id="select_level" name="level" onchange="filterMusicTable()"></select>
   / 
   ノート数フィルター: <select id="select_notes" name="notes" onchange="filterMusicTable()"/></select>
 </p>
 <table id="table_musics" class="tablesorter style_table" cellspacing="1" border="0"></table>


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS