日本の苗字七千傑

ofk

2011-11-11 19:16:58

License: MIT License

Fork: 0

Fav: 0

View: 304

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 104 lines
HTML 31 lines
CSS 47 lines

なぜかしばしば見る、日本の苗字7000傑（ http://www.myj7000.jp-biz.net/ ）がIE以外で動作しないための代替UI。検索とかついています。

日本の苗字七千傑
jQuery v1.6.2

$(document).delegate('div.nav a', 'click', function () {
	if (this.rel) {
		var num,
		    rank = $('#rank').val(),
		    count = $('#count').val();
		rank = +rank || 1; rank <= 0 && (rank = 1);
		count = +count || 1; count <= 0 && (count = 1);

if (this.rel === 'next') {
			num = +$('table tbody tr:last-child td.number').text() || 0;
			++num;
			if (num < rank + count) {
				num = rank + count;
			}
		}
		else {
			num = rank - count;
		}

if (num > 0) {
			$('#rank').val(num);
			load();
		}

return false;
	}
});

$('div.nav p input').bind('input', load);

var data = [], lastId = 0;

$('body').css('opacity', '1');

load();

function load() {
	var q = $('#q').val(),
	    rank = $('#rank').val(),
	    count = $('#count').val();

q = q.replace(/^\s+|\s+$/g, '');
	rank = +rank || 1; rank <= 0 && (rank = 1);
	count = +count || 1; count <= 0 && (count = 1);

$('tbody').empty();
	$('table').css('opacity', '0.5');
	++lastId;
	var id = lastId,
	    c = 0, i = rank - 1;

(function render() {
		if (lastId !== id) {
			return;
		}

var start = +new Date;
		do {
			var datum = data[i];

if (!datum) {
				var n, m, pad;
				if (i < 7000) {
					pad = ~~(i / 1000);
					n = m = (1 + ~~(i / 1000)) * 1000;
					m = '0' + m;
				}
				else {
					pad = 7;
					n = 9999;
					m = 10000;
				}
				$.getJSON('http://query.yahooapis.com/v1/public/yql?callback=?', {
					format: 'json',
					q: 'select * from csv where url="http://www.myj7000.jp-biz.net/' + n + '/s' + m + '.csv" and columns="number,surname,population,comment" and charset="Shift_JIS"'
				}, function (json) {
					var row = json.query.results.row;
					row.shift();
					pad *= 1000;
					for (var i = 0, iz = row.length; i < iz; ++i) {
						row[i].number = +row[i].number;
						data[i + pad] = row[i];
					}
					render();
				});
				return;
			}

if (!q || datum.surname.indexOf(q) !== -1 /*|| datum.comment.indexOf(q) !== -1*/) {
				var $tr = $('<tr>').appendTo('tbody');
				$.each([ 'number', 'surname', 'population', 'comment' ], function (_, key) {
					$('<td>').text(datum[key]).addClass(key).appendTo($tr);
				});
				++c;
			}
			if (c >= count || datum.number === 9999) {
				$('table').css('opacity', '');
				return;
			}
			++i;
		} while (new Date - start < 13);
		setTimeout(render, 0);
	}());
}

日本の苗字七千傑
bm-all (2011-11-29)

なぜかしばしば見る、日本の苗字7000傑（ http://www.myj7000.jp-biz.net/ ）がIE以外で動作しないための代替UI。検索とかついています。$(document).delegate('div.nav a', 'click', function () { if (this.rel) { var num, rank = $('#rank').val(), count = $('#count').val(); rank = +rank || 1; rank <= 0 && (rank = 1); count = +count || 1; count <= 0 && (count = 1); if (this.rel === 'next') { num = +$('table tbody tr:last-child td.number').text() || 0; ++num; if (num < rank + count) { num = rank + count; } } else { num = rank - count; } if (num > 0) { $('#rank').val(num); load(); } return false; } }); $('div.nav p input').bind('input', load); var data = [], lastId = 0; $('body').css('opacity', '1'); load(); function load() { var q = $('#q').val(), rank = $('#rank').val(), count = $('#count').val(); q = q.replace(/^\s+|\s+$/g, ''); rank = +rank || 1; rank <= 0 && (rank = 1); count = +count || 1; count <= 0 && (count = 1); $('tbody').empty(); $('table').css('opacity', '0.5'); ++lastId; var id = lastId, c = 0, i = rank - 1; (function render() { if (lastId !== id) { return; } var start = +new Date; do { var datum = data[i]; if (!datum) { var n, m, pad; if (i < 7000) { pad = ~~(i / 1000); n = m = (1 + ~~(i / 1000)) * 1000; m = '0' + m; } else { pad = 7; n = 9999; m = 10000; } $.getJSON('http://query.yahooapis.com/v1/public/yql?callback=?', { format: 'json', q: 'select * from csv where url="http://www.myj7000.jp-biz.net/' + n + '/s' + m + '.csv" and columns="number,surname,population,comment" and charset="Shift_JIS"' }, function (json) { var row = json.query.results.row; row.shift(); pad *= 1000; for (var i = 0, iz = row.length; i < iz; ++i) { row[i].number = +row[i].number; data[i + pad] = row[i]; } render(); }); return; } if (!q || datum.surname.indexOf(q) !== -1 /*|| datum.comment.indexOf(q) !== -1*/) { var $tr = $('<tr>').appendTo('tbody'); $.each([ 'number', 'surname', 'population', 'comment' ], function (_, key) { $('<td>').text(datum[key]).addClass(key).appendTo($tr); }); ++c; } if (c >= count || datum.number === 9999) { $('table').css('opacity', ''); return; } ++i; } while (new Date - start < 13); setTimeout(render, 0); }()); }<h1>日本の苗字七千傑</h1> <p><a href="http://www.myj7000.jp-biz.net/">日本の苗字7000傑</a>がIE以外で動作しないために作った代替UIです。</p> <div class="nav"> <p class="search"> <label>検索 <input type="text" id="q" value="" /></label> </p> <p> <input type="text" id="rank" value="1" /> 位から <input type="text" id="count" value="30" /> 件を表示 <a href="#" rel="prev">◄</a> <a href="#" rel="next">►</a> </p> </div> <table border="1"> <thead> <tr> <th class="number">順位</th> <th class="surname">苗字</th> <th class="population">人口</th> <th class="comment">備考</th> </tr> </thead> <tbody></tbody> </table> <div class="nav"> <p> <a href="#" rel="prev">◄</a> <a href="#" rel="next">►</a> </p> </div>body { font-family: serif; opacity: 0.5; } .nav:before, .nav:after { content: ""; display: table; } .nav:after { clear: both; } .nav { *zoom: 1; } .nav p { float: right; } .nav p.search { float: left; } #rank, #count { width: 4em; text-align: right; } .nav a { padding: .25em .4em .35em; border: 1px solid #ccc; display: inline-block; text-decoration: none; font-family: Arial; line-height: 1; color: #333; background-color: #eee; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .nav a:hover, .nav a:active { border-color: #999; } table { width: 100%; } th, .number, .surname, .population { white-space: nowrap; } td.number, td.population { text-align: right; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/mPaS/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/ofk/myj7000" title="日本の苗字七千傑">日本の苗字七千傑 - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code

日本の苗字七千傑

Description どんなゲームですか？

Control Device

Fullscreen

style

code

Tweet

twitter