��6�́@�u�e�[�u���\�[�g�����v

jQuery UI�ɂ̓e�[�u�����\�[�g���邽�߂̃��\�b�h���p�ӂ���Ă��܂��B��ʓI�Ƀe�[�u���̓��e���\�[�g���邽�߂̃��C�u�����͂����‚�����܂� (Yahoo UI Library�ɂ�����܂�)�B�܂��A�T�[�o�[���Ń\�[�g���Č��ʂ��o�͂���ꍇ������܂��B jQuery�̏ꍇ�A�e�[�u���^�O�ɑ΂���tablesorter()���w�肷�邾���Ŏ����I�Ƀ\�[�g�@�\���lj�����܂��B�����A����ȏ�ȒP�Ȃ��̂͂Ȃ��ł��傤�B�e�[�u���^�O�ɃN���X���Ȃǂ��w�肷��K�v������܂���B
�T���v��1�͍ł��V���v���ȃe�[�u���\�[�g�̗�ł��B�e�[�u���w�b�_�[���N���b�N����Ə����A�~�����؂�ւ��܂��B �i�T���v��1�����s�����j

�yHTML�z
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/ui.tablesorter.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQuery�T���v��</h1>
<p>jQuery UI�̏���</p>
<table border="1" id="myTable">
<thead>
<tr><th>�ԍ�</th><th>���O</th><th>�N��</th></tr>
</thead>
<tbody>
<tr><td>5</td><td>�X</td><td>22</td></tr>
<tr><td>1</td><td>����</td><td>49</td></tr>
<tr><td>2</td><td>����</td><td>35</td></tr>
<tr><td>3</td><td>�R�c</td><td>29</td></tr>
<tr><td>4</td><td>���X��</td><td>62</td></tr>
</tbody>
</table>
</body>
</html>


�yCSS�z
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


�yJavaScript�z
$(function(){
$("#myTable").tablesorter();
});


�T���v��1�͂�����ƌ��h�����悭����܂��񂪁AjQuery UI�ł͕W���Ńe�[�u���\�[�g�p�̃X�^�C���V�[�g���p�ӂ���Ă��܂��B�T���v��2�ł͗p�ӂ���Ă���X�^�C���V�[�g��ǂݍ��܂��Ă��܂��B
�܂��A���炩���ߓ���̗���\�[�g���ĕ\�����邱�Ƃ��ł��܂��B���̏ꍇ�ɂ�tablesorter()�̃I�v�V�����p�����[�^��sortList���w�肵�A�\�[�g�Ώۂɂ����ԍ��Ə���/�~�������w�肵�܂��B��ԍ���0����J�n�ԍ��ɂȂ�̂ň�ԍ����̗�0�A���̉E���̗�1�ɂȂ�܂��B����/�~����0�܂���1�Ŏw�肵�܂��B0���w�肷��Ə����A1���w�肷��ƍ~���ɂȂ�܂��B�����̃p�����[�^��z��`���Ŏw�肷�邱�ƂɂȂ�܂��B
�T���v��2�ł͍ŏ�����ԍ����~���ɂ��ĕ\������悤�ɂ��Ă��܂��B�i�T���v��2�����s�����j

�yHTML�z
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/flora/flora.all.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/ui.tablesorter.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQuery�T���v��</h1>
<p>jQuery UI�̏���</p>
<table border="1" id="myTable" class="tablesorter">
<thead>
<tr><th>�ԍ�</th><th>���O</th><th>�N��</th></tr>
</thead>
<tbody>
<tr><td>5</td><td>�X</td><td>22</td></tr>
<tr><td>1</td><td>����</td><td>49</td></tr>
<tr><td>2</td><td>����</td><td>35</td></tr>
<tr><td>3</td><td>�R�c</td><td>29</td></tr>
<tr><td>4</td><td>���X��</td><td>62</td></tr>
</tbody>
</table>
</body>
</html>


�yCSS�z
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


�yJavaScript�z
$(function(){
$("#myTable").tablesorter({ sortList:[[0,1]] });
});

[�ڎ���]