체크 박스 옵션이 많아져서 원하는 걸 찾기 어려울 때 사용하시면 됩니다.
몇 번 언급한 적이 있는 CoffeeScript를 사용했습니다.
[index.html]
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Checkbox Filter</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript"></script>
<script src="application.coffee" type="text/coffeescript"></script>
</head>
<body>
<div id="container">
<form method="post" action="/">
<label for="input-filter">Filter:</label>
<input id="input-filter" type="text" name="filter" />
<ul>
<li>
<input id="id_1" type="checkbox" name="ids[]" value="1" />
<label for="id_1">#1 - AA</label>
</li>
<li>
<input id="id_2" type="checkbox" name="ids[]" value="2" />
<label for="id_2">#2 - BA</label>
</li>
<li>
<input id="id_3" type="checkbox" name="ids[]" value="3" />
<label for="id_3">#3 - AB</label>
</li>
<li>
<input id="id_4" type="checkbox" name="ids[]" value="4" />
<label for="id_4">#4 - BB</label>
</li>
<li>
<input id="id_5" type="checkbox" name="ids[]" value="5" />
<label for="id_5">#5 - ABC</label>
</li>
</ul>
</form>
</div>
</body>
</html>
[stylesheet.css]
body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}
#container {
margin: 10px auto;
width: 600px;
padding: 10px;
}
[application,coffee]
$ ->
$('form').submit ->
false
$('input[name=filter]').live 'keyup', ->
query = $(this).val().toLowerCase()
if $(query).is(':blank')
$('form li').show()
else
$('form li').each (i, item) ->
text = $(item).find('label').text().toLowerCase()
if text.search(query) < 0
$(item).hide()
else
$(item).show()
몇 번 언급한 적이 있는 CoffeeScript를 사용했습니다.
[index.html]
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Checkbox Filter</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript"></script>
<script src="application.coffee" type="text/coffeescript"></script>
</head>
<body>
<div id="container">
<form method="post" action="/">
<label for="input-filter">Filter:</label>
<input id="input-filter" type="text" name="filter" />
<ul>
<li>
<input id="id_1" type="checkbox" name="ids[]" value="1" />
<label for="id_1">#1 - AA</label>
</li>
<li>
<input id="id_2" type="checkbox" name="ids[]" value="2" />
<label for="id_2">#2 - BA</label>
</li>
<li>
<input id="id_3" type="checkbox" name="ids[]" value="3" />
<label for="id_3">#3 - AB</label>
</li>
<li>
<input id="id_4" type="checkbox" name="ids[]" value="4" />
<label for="id_4">#4 - BB</label>
</li>
<li>
<input id="id_5" type="checkbox" name="ids[]" value="5" />
<label for="id_5">#5 - ABC</label>
</li>
</ul>
</form>
</div>
</body>
</html>
[stylesheet.css]
body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}
#container {
margin: 10px auto;
width: 600px;
padding: 10px;
}
[application,coffee]
$ ->
$('form').submit ->
false
$('input[name=filter]').live 'keyup', ->
query = $(this).val().toLowerCase()
if $(query).is(':blank')
$('form li').show()
else
$('form li').each (i, item) ->
text = $(item).find('label').text().toLowerCase()
if text.search(query) < 0
$(item).hide()
else
$(item).show()
댓글 2개
14년 전
[application,coffee] 여기서 , 는 . 이게 맞는거죠?
유용하게 쓰이겠네요 감사합니다.
유용하게 쓰이겠네요 감사합니다.
14년 전
헉, 마침표가 맞습니다!
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 4230 |
 미스코리아 |
14년 전 | 1558 | |
| 4229 | 14년 전 | 1117 | ||
| 4228 | 14년 전 | 2113 | ||
| 4227 | 14년 전 | 800 | ||
| 4226 |
 Terrorboy |
14년 전 | 820 | |
| 4225 |
천국의눈믈
|
14년 전 | 638 | |
| 4224 |
visualp
|
14년 전 | 1437 | |
| 4223 |
visualp
|
14년 전 | 1050 | |
| 4222 |
visualp
|
14년 전 | 773 | |
| 4221 |
visualp
|
14년 전 | 5304 | |
| 4220 | 14년 전 | 1907 | ||
| 4219 | 14년 전 | 1152 | ||
| 4218 | 14년 전 | 645 | ||
| 4217 | 14년 전 | 9443 | ||
| 4216 | 14년 전 | 1558 | ||
| 4215 |
 CrazySnoopy |
14년 전 | 575 | |
| 4214 | 14년 전 | 564 | ||
| 4213 | 14년 전 | 1434 | ||
| 4212 |
visualp
|
14년 전 | 2014 | |
| 4211 | 14년 전 | 1558 | ||
| 4210 | 14년 전 | 827 | ||
| 4209 |
 미운오리스키 |
14년 전 | 2053 | |
| 4208 | 14년 전 | 2054 | ||
| 4207 | 14년 전 | 3006 | ||
| 4206 | 14년 전 | 1101 | ||
| 4205 |
SGFlash
|
14년 전 | 1287 | |
| 4204 | 14년 전 | 816 | ||
| 4203 | 14년 전 | 896 | ||
| 4202 | 14년 전 | 2116 | ||
| 4201 | 14년 전 | 910 | ||
| 4200 | 14년 전 | 2381 | ||
| 4199 | 14년 전 | 632 | ||
| 4198 |
visualp
|
14년 전 | 3509 | |
| 4197 |
visualp
|
14년 전 | 733 | |
| 4196 | 14년 전 | 2091 | ||
| 4195 |
미사카10777호
|
14년 전 | 3470 | |
| 4194 |
senseme
|
14년 전 | 777 | |
| 4193 | 14년 전 | 955 | ||
| 4192 | 14년 전 | 1309 | ||
| 4191 |
DreamT
|
14년 전 | 802 | |
| 4190 |
onlymilk74
|
14년 전 | 1316 | |
| 4189 | 14년 전 | 1251 | ||
| 4188 | 14년 전 | 1374 | ||
| 4187 | 14년 전 | 1108 | ||
| 4186 |
CrazySnoopy |
14년 전 | 734 | |
| 4185 | 14년 전 | 1196 | ||
| 4184 | 14년 전 | 1176 | ||
| 4183 |
visualp
|
14년 전 | 1050 | |
| 4182 |
visualp
|
14년 전 | 627 | |
| 4181 |
 Sunys |
14년 전 | 622 | |
| 4180 |
techer
|
14년 전 | 955 | |
| 4179 | 14년 전 | 526 | ||
| 4178 | 14년 전 | 3080 | ||
| 4177 | 14년 전 | 601 | ||
| 4176 | 14년 전 | 947 | ||
| 4175 | 14년 전 | 599 | ||
| 4174 |
 WEBUS |
14년 전 | 632 | |
| 4173 |
WEBUS |
14년 전 | 1860 | |
| 4172 |
WEBUS |
14년 전 | 907 | |
| 4171 | 14년 전 | 1396 | ||
| 4170 | 14년 전 | 665 | ||
| 4169 | 14년 전 | 1294 | ||
| 4168 | 14년 전 | 1775 | ||
| 4167 | 14년 전 | 818 | ||
| 4166 | 14년 전 | 1324 | ||
| 4165 |
visualp
|
14년 전 | 814 | |
| 4164 | 14년 전 | 1179 | ||
| 4163 | 14년 전 | 2606 | ||
| 4162 | 14년 전 | 660 | ||
| 4161 |
onlymilk74
|
14년 전 | 4798 | |
| 4160 | 14년 전 | 685 | ||
| 4159 | 14년 전 | 872 | ||
| 4158 | 14년 전 | 711 | ||
| 4157 | 14년 전 | 3391 | ||
| 4156 | 14년 전 | 505 | ||
| 4155 | 14년 전 | 840 | ||
| 4154 | 14년 전 | 1141 | ||
| 4153 | 14년 전 | 1144 | ||
| 4152 | 14년 전 | 636 | ||
| 4151 | 14년 전 | 1247 | ||
| 4150 | 14년 전 | 724 | ||
| 4149 | 14년 전 | 628 | ||
| 4148 |
쉽다zzz
|
14년 전 | 2265 | |
| 4147 | 14년 전 | 955 | ||
| 4146 | 14년 전 | 580 | ||
| 4145 | 14년 전 | 579 | ||
| 4144 | 14년 전 | 1619 | ||
| 4143 | 14년 전 | 772 | ||
| 4142 | 14년 전 | 1178 | ||
| 4141 | 14년 전 | 1166 | ||
| 4140 |
미운오리스키 |
14년 전 | 1774 | |
| 4139 |
visualp
|
14년 전 | 1849 | |
| 4138 |
visualp
|
14년 전 | 1115 | |
| 4137 | 14년 전 | 770 | ||
| 4136 | 14년 전 | 712 | ||
| 4135 | 14년 전 | 961 | ||
| 4134 | 14년 전 | 1118 | ||
| 4133 | 14년 전 | 2532 | ||
| 4132 | 14년 전 | 580 | ||
| 4131 | 14년 전 | 896 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기