gitgub Url : https://github.com/customd/jquery-number
숫자형 처리를 위한 플러그인으로 주요 처리 포맷은 아래와 같습니다.
정수 형
$.number( 5020.2364 ); // Outputs 5,020
소수점 둘째 자리 까지
$.number( 5020.2364, 2 ); // Outputs: 5,020.24
상세 옵션에 대해서는
https://github.com/customd/jquery-number
Select box 간 Option 값 이동, 삭제 , 추가 하는 샘플코드 입니다.
Test Url : http://www.uhoon.co.kr/test/5237.html
<!DOCTYPE html>
<html>
<head>
<title>append option / remove option</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
<table>
<tr>
<td>
<select id="sel" name="sel" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
</select>
<input type="button" value="Delete" id="btnRemoveLeft"/>
<input type="button" value="Selected Value " id="getValue"/>
<input type="button" value="All Value " id="getSelectedValue"/>
<input type="text" id="addOption" style="width:183px;"/>
<input type="button" value="Add" id="btnAdd"/>
</td>
<td>
<input type="button" value="Move=>" id="btnMoveRight"/>
<input type="button" value="<=Move" id="btnMoveLeft"/>
<input type="button" value="Copy=>" id="btnCopyLeft"/>
<input type="button" value="<=Copy" id="btnCopyLeft2"/>
</td>
<td>
<select id="sel2" name="sel2" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
</select>
<input type="button" value="Delete" id="btnRemoveRight"/>
<input type="button" value="Selected Value " id="getValue2"/>
<input type="button" value="All Value" id="getSelectedValue2"/>
<input type="text" id="addOption2" style="width:183px;"/>
<input type="button" value="Add" id="btnAdd2"/>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
<!--
$(function(){
$("#btnRemoveLeft").on("click",function(){
$('#sel option:selected').each( function() {
$(this).remove();
});
});
$("#btnRemoveRight").on("click",function(){
$('#sel2 option:selected').each( function() {
$(this).remove();
});
});
$("#btnMoveRight").on("click",function(){
$('#sel option:selected').each( function() {
$(this).remove().appendTo('#sel2');
});
});
$("#btnMoveLeft").on("click",function(){
$('#sel2 option:selected').each( function() {
$(this).remove().appendTo('#sel');
});
});
$("#getValue").on("click",function(){
var values = "";
$('#sel option').each( function() {
values= values + "/" + $(this).val();
});
alert(values);
});
$("#getValue2").on("click",function(){
var values = "";
$('#sel2 option').each( function() {
values= values + "/" + $(this).val();
});
alert(values);
});
$("#getSelectedValue").on("click",function(){
var values = "";
$('#sel option:selected').each( function() {
values= values + "/" + $(this).val();
});
alert(values);
});
$("#getSelectedValue2").on("click",function(){
var values = "";
$('#sel2 option:selected').each( function() {
values= values + "/" + $(this).val();
});
alert(values);
});
$("#btnCopyLeft").on("click",function(){
$('#sel option:selected').each( function() {
$(this).clone().appendTo('#sel2');
});
});
$("#btnCopyLeft2").on("click",function(){
$('#sel2 option:selected').each( function() {
$(this).clone().appendTo('#sel');
});
});
$("#btnAdd").on("click",function(){
if($('#sel').find("[value='"+$('#addOption').val().replace('"','\'')+"']").length == 0)
{
$('#sel').append('<option value="'+$('#addOption').val().replace('"','\'')+'">'+$('#addOption').val()+"</option>");
}else{
alert("있어요.");
}
});
$("#btnAdd2").on("click",function(){
if($('#sel2').find("[value='"+$('#addOption2').val().replace('"','\'')+"']").length == 0)
{
$('#sel2').append('<option value="'+$('#addOption2').val().replace('"','\'')+'">'+$('#addOption2').val()+"</option>");
}else{
alert("있어요.");
}
});
});
$(window).load(function(e){
});
//-->
</script>
</html>
FadeIn , FadeOut 을 이용한 간단한 이미지 노출.
하나가 사라지며 하나가 보여지는 그런...
워낙 플러그인들이 잘 나와있지만
간단한걸 굳이 서치해서 적용하기 귀찮아서 가볍게 쓰기위해 만들었습니다.
사용법
: 이미지에 "main_img" class를 추가.
* html
<div class="main_img"></div> <div class="main_img" style="display:none;"></div> <div class="main_img" style="display:none;"></div> <!-- 별도 버튼등이 있는 경우...안써도 됨. --> <ul id="main_bar"> <li> <a href="Javascript:fnMain_image(0);"><img id="main_bar1" src="/images/main/bar_on.jpg" ></a> </li> <li> <a href="Javascript:fnMain_image(1);"><img id="main_bar2" src="/images/main/bar_off.jpg" ></a> </li> <li> <a href="Javascript:fnMain_image(2);"><img id="main_bar3" src="/images/main/bar_off.jpg" ></a> </li> </ul>
* JS
<script type="text/javascript">
<!--
// 메인 롤링 s
var main_img = 0;
function fnMain_image(img_num)
{
if (img_num == 0 || img_num)
{
main_img = img_num;
}else{
main_img = parseInt(main_img) + 1;
if( main_img > $(".main_img").length -1 )
{
main_img = 0;
}
}
for (i=0;i < $(".main_img").length ; i++)
{
$(".main_img").eq(i).fadeOut('slow');
// $("#main_bar > li:eq("+i+") > a > img").attr("src","/images/main/bar_off.jpg");
}
$(".main_img").eq(main_img).fadeIn('slow');
//$("#main_bar > li:eq("+main_img+") > a > img").attr("src","/images/main/bar_on.jpg");
}
setInterval(function(){ fnMain_image(); }, 3000);
// 메인 롤링 e
//-->
</script>
