'프로그래밍/Jquery' 카테고리의 글 목록

원하는 숫자만큼 순서대로 증가하는 글자 웹페이지에 표시(HTML, CSS, jQuery)

개인적으로 라인 수와 관련한 문제가 생겨 테스트 해봐야 될 상황이 있었습니다. 그런데 테스트 용도로 라인 수를 체크하기 위해서 수동으로 20,000개가 넘는 숫자를 일일이 작성하는 건 시간이 오래 걸릴 것 같아 간단히 웹페이지에 표시되게끔 웹페이지를 만들었습니다.

페이지 하단에 소스구문이 있는데 간단히 웹페이지에서 바로 확인하고자 하시는 분들은 첨부파일을 다운 받아서 더블 클릭으로 열어 보셔도 됩니다.

auto_count.html

0.00MB

HTML, CSS, jQuery만을 이용해 만든 간단한 웹페이지이며 아래 이미지와 같이 해당 소스를 웹페이지에서 실행하게 되면 특정 숫자를 입력한 뒤 출력 버튼을 누르면 숫자가 자동으로 증가하며 원하는 숫자까지 웹페이지에 출력됩니다.

웹페이지에서 원하는 숫자만큼 출력된 숫자를 드래그해서 복사해 올 수 있습니다. 해당 기능이 필요했던 이유는 HTML textarea 태그에 라인이 얼마나 DB에 들어가는지 보기 위해서 아래 이미지와 같이 칸별로 숫자가 순서대로 증가하는 것이 필요했습니다.

개인적인 문제이긴 했지만 문제 해결은 다른 곳에서 해결 했습니다.

10,000단위가 넘어가게 되면 웹페이지가 출력되기까지 약간의 멈춘 현상이 있긴 하지만 개인적으론 유용하게 사용했습니다.

이왕 만든 김에 현재 나온 숫자를 드래그해서 복사하지 않고도 가져올 수 있도록 텍스트 복사 기능도 추가하였습니다. 복사 기능엔 엔터로 구분되진 않고 텍스트만 가져오다 보니 숫자가 가로로 표시되긴 합니다. 구분자를 넣는 건 어렵지 않지만, 엔터는 생각을 좀 해봐야겠더군요.

소스 코드는 아래와 같으며 해당 소스 코드를 드래그 복사해서 메모장에 붙여 넣으신 뒤 파일 저장 확장자를 HTML로 저장하시고 해당 파일을 실행해 보시면 웹페이지에서 바로 확인할 수 있도록 만들었습니다.

<html>
<head>
<meta charset="utf-8">
<title>자동 숫자 증가</title>
<style>
    #number, #btn, .btn_list{ height: 27px;}    
    #txt_copy{display: none;}    
    #result_text{opacity: 0;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
	//출력 버튼
	$( "#btn" ).click(function() {		  
		  var number = $("#number").val();
		  $("#txt_copy").css("display","inline-block");
		  
		  if(number.length < 1){
			alert("숫자를 입력해 주세요.");
			$("#number").focus();
		  }

		  $("#number_area").empty();
		  for(var i = 1; i <= number; i++){
			  $("#number_area").append(i+"<br>");
		  }
	});

	//글자 복사
	$( "#txt_copy" ).click(function() {
		var mytext = $("#number_area").text();		
		$("#result_text").val(mytext);
		$("#result_text").select();
		document.execCommand("Copy");
		alert("글자 복사 성공");
	});

	//숫자 입력 태그에 글자 입력시 숫자 문자 체크
	$( "#number" ).keypress(function() {
		if(event.keyCode<48 || event.keyCode>57){
			alert("숫자만 입력 가능 합니다.");
		    event.returnValue=false;
		}
	});

});

</script>
</head>

<body>
	<input type="text" id="number" placeholder="숫자 입력" />
	<input type="button" value="출력" id="btn" class="btn_list" />
	<input type="button" value="텍스트 복사" id="txt_copy" class="btn_list" />
	<div id="number_area"></div>	
	<input type="text" id="result_text" value="" />
</body>
</html>

혹시라도 원하는 숫자만큼 순서대로 증가하는 글자를 웹페이지에서 간단히 확인해 보고자 하시는 분들이 있다면 참고하셔서 사용하시면 좋을 것 같습니다.

저작자표시비영리변경금지

jQuery Effect 예제

<html>

<head>

$(document).ready(function () {

$("#btn1").click(function () {

//blind

//$("#box").toggle("blind", { direction: "horizontal" }, 1000);

//$("#list").toggle("blind", { direction: "vertical" }, 1000);

//Clip

//$("#box").toggle("clip", { direction: "horizontal" }, 1000);

//Drop

//$("#list").toggle("drop", { direction: "down" }, 1000);

//Explode

//$("#box").toggle("explode",{ pieces: 16 }, 1000);

//Fade

//$("#box").toggle("fade", 1000);

//Fold

//$("#list").toggle("fold",{

// size:10

//}, 1000);

//Puff

//$("#list").toggle("puff", {percent:300}, 1000);

//Slide

//$("#list").toggle("slide", { direction: "up" }, 1000);

//Scale

//$("#box").effect("scale", {percent:200, direction:"horizontal"}, 1000);

//$("#list").effect("scale",{percent:150}, 1000);

//Bounce

//$("#list").effect("bounce", {

// direction:"right",

// distance:100,

// times:5

//}, "fast");

//Highlight

//$("#list").effect("highlight", {color:"black"}, 1000);

//Pulsate

//$("#list").effect("pulsate", {times:10}, "fast");

//$("#list tr").eq(5).effect("pulsate", { times: 100 }, "fast");

//Shake

//$("#box").effect("shake", {times:10}, "fast");

//$("#list tr").eq(2).effect("shake", { times: 10 }, "fast");

//Size

//$("#box").effect("size", {

// to: {

// width: 800,

// height: 50

// }

//}, 1000);

});

//$("td").click(function ()

//{

// $(this).effect("highlight", { color: "red" }, 500);

//});

//$("tr").mouseover(function () {

// $(this).effect("highlight", { color: "red" }, 500);

//});

});

</script>

#box

{

border:1px solid black;

width:200px; height:200px;

background-color:Yellow;

}

h2 {text-align:center;}

#list {margin:0px auto;}

body, p, div, span, li, a, input, th, td

{

font-size:12px;

color:#333333;

}

#list

{

width:500px;

border:1px solid gray;

border-collapse:collapse;

}

#list th, #list td

{

border:1px solid gray;

padding:2px;

}

#list th

{

background-color:Orange;

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

<tr>

<td>게시판 리스트입니다. 하하하하</td>

</tr>

</table>

</div>

</body>

</html>

저작자표시

jQuery progressbar, slider, Tabs 예제

적용전에 프로그래스바에 수를 입력하면 변하는 것이 없습니다.

적용후 프로그래스바와 슬라이더를 보면 해당 숫자만큼 게이지가 채워진것을 확인할수 있습니다.

소스

<html>

<head>

$(document).ready(function () {

//progressbar

//data를 찾아서 데이타값을 변수에 저장하고 저장된값을 매개변수에 넣자.

$("#bar1").progressbar();

$("#data").bind("change", function () {

//alert("a");

var n = $(this).val(); //수치

$("#bar1").progressbar({ value: parseInt(n) });

});

$("#btn1").click(function () {

alert($("#bar1").progressbar("value"));

});

//Slider 슬라이더

$("#slider").slider(

{

change: function () {

document.title = $(this).slider("value");

}

);

$("#btn2").click(function () {

alert($("#slider").slider("value"));

});

//Tabs

$("#tabs").tabs();

});

</script>

#slider {width:300px; height:10px; font-size:12px;}

#tabs {width:400px; height:150px; font-size:12px;}

</style>

</head>

<body>

<h3>progressbar</h3>

</select>

<hr />

<h3>Slider 슬라이더</h3>

<hr />

<ul>

</ul>

<p>첫번째 페이지입니다. 어쩌구.. 저쩌구..</p>

</div>

<p>두번째 페이지입니다. 어쩌구.. 저쩌구..</p>

</div>

<p>세번째 페이지입니다. 어쩌구.. 저쩌구..</p>

</div>

</body>

</html>

저작자표시

Jquery popup 예제

결과화면

소스

<html>

<head>

#popup1

{

border:1px solid gray;

background-color:lightgray;

width:200px;

height:100px;

position:absolute;

left:100px;

top:100px;

}

#popup2

{

font-size:12px;

}

</style>

$(document).ready(function () {

$("#popup1").hide();

$("#popup2").hide();

//$("#popup2").dialog();

});

function Check() {

$("#popup1").show();

}

function Check2() {

$("#popup2").dialog(

{

width: 200,

heigh: 100

}

);

$("#popup2").parent().css("font-size", "12px");

}

</script>

</head>

<body>

<div id="popup1">대화상자입니다.</div>

<hr />

<div id="popup2" title="대화상자">대화상자입니다.</div>

<hr />

</body>

</html>

저작자표시

Jquery Accordion, Autocomplete, Datepicker 사용 예제

결과 화면

소스

<html>

<head>

$(document).ready(function ()

{

//Accordion

$("#list").accordion();

//Autocomplete

$("#txtName").autocomplete({

source: ["홍길동", "이순신", "이문세", "테스트", "테니스", "이하하", "이호호"]

});

//Datepicker

$("#datepicker").datepicker();

$("input[type='button']").button();

});

function Select() {

var date = $("#datepicker").datepicker("getDate");

alert(date.toLocaleString());

}

</script>

/* Accordion */

#list { width:500px; }

#list a, #list p {font-size:12px;}

/* Autocomplete */

body, input, div

{

font-size:12px;

}

#datepicker

{

font-size:10px;

}

input

{

}

</style>

</head>

<body>

<h3>Accordion</h3>

<div>

<p>

C#(시 샤프)는 마이크로소프트에서 개발한 객체 지향 프로그래밍 언어로, 닷넷 프레임워크의 한 부분으로 만들었으며 나중에 ECMA (ECMA-334)와 ISO (ISO/IEC/23270)의 표준으로 자리잡았다. C++와 자바와 비슷한 문법을 가지고 있다.

</p>

</div>

<div>

<p>

자바(Java, 문화어: 쟈바)는 썬 마이크로시스템즈의 제임스 고슬링(James Gosling)과 다른 연구원들이 개발한 객체 지향적 프로그래밍 언어이며, 썬 마이크로시스템즈에서 무료로 제공하고 있다. 1991년 그린 프로젝트(Green Project)라는 이름으로 시작해 1995년에 발표했다. 처음에는 가전제품 내에 탑재해 동작하는 프로그램을 위해 개발했지만 현재 웹 애플리케이션 개발에 가장 많이 사용하는 언어 가운데 하나이고, 모바일 기기용 소프트웨어 개발에도 널리 사용하고 있다. 현재 버전 7까지 출시했다.

</p>

</div>

<h3><a href="#">Visual Basic</a></h3>

<div>

<p>

비주얼 베이직(Visual Basic, 문화어: 비쥬얼베이씨크)은 마이크로소프트에서 만든 베이직 프로그래밍 언어의 일종으로, 마이크로소프트 비주얼 스튜디오 제품군의 하나이다. 비주얼 베이직은 이벤트 기반 프로그래밍의 3세대 프로그래밍 언어이면서, 또한 마이크로소프트의 컴포넌트 오브젝트 모델에 따른 풍부한 구성 요소를 가진 통합 개발 환경 및 RAD을 가리키기도 한다. 비주얼 베이직은 초보자가 접근하기 쉬운 장점을 가지고 있는데, 그 이유는 시각적인 개발 환경과 더불어 베이직 언어의 연장선상에 있기 때문으로 간주된다.[

</p>

</div>

<h3><a href="#">Objective-C</a></h3>

<div>

<p>

오브젝티브-C (Objective-C, 종종 ObjC로 표기) 언어는 C 프로그래밍 언어에 스몰토크 스타일의 메시지 구문을 추가한 객체 지향 언어이다.<br />

현재, 이 언어는 애플의 매킨토시의 운영 체제인 맥 오에스 텐과 아이폰의 운영 체제인 iOS에서 사용되고 있다. 오브젝티브-C는 애플의 코코아를 사용하기 위한 기본 언어이며, 원래는 넥스트의 NeXTSTEP 운영 체제에서 주 언어였다. 일반적인(Generic) 오브젝티브-C는 앞에서 언급한 라이브러리를 사용하지 않는다.

</p>

</div>

회원명 : <input type="text" id="txtName" />

<h3>생일을 선택하세요.</h3>

</body>

</html>

저작자표시

jQuery draggable, droppable, resize, sortable 사용예제

아래 css파일이 있어야지 resize 및 다른 것들도 적용된다.

결과화면

소스

<html>

<head>

<title>Jquery UI</title>

#box2

{

border:1px solid black; width:100px; height:100px;

}

#list .ui-selecting

{

background: yellow;

}

#list .ui-selected

{

background: orange;

}

</style>

$(document).ready(function ()

{

$("#box").css("border", "1px solid black").css("background-color", "yellow").css("width", "100px").css

("height", "100px").css("position", "absolute").css("left", "200px").css("top", "150px");

//$("#img1").draggable();

$("img").draggable();

$(document).ready(function ()

{

$("#img1").draggable();

$("#box").droppable(

{

drop: function ()

{

alert("확인!");

}

});

//두번째

$(document).ready(function ()

{

$("#box2").resizable();

});

//세번째

$(document).ready(function ()

{

//아이템 위치를 마음대로 변경~!~

//겉모습만 변경된다. 실데이타는 그대로이다.

$("#list").sortable();

//$("#list").selectable();

});

</script>

</head>

<body>

<hr />

<hr />

<hr />

</ul>

</body>

</html>

저작자표시

Jquery 탐색(Traversing), 관리(Manipulation), 이벤트(Event), jQuery 사이트 이용 팁

jQuery 라이브러리는 최대한 많이 확보하는것이 좋다..

결과화면

소스

<html>

<head>

<title>Traversing</title>

function Test()

{

//add() 섞일만한 성질이 아니지만 add 라는 객체로 + 해줄수 있다.

//$("li:even").css("color", "red");

$("li:even").add("#title").css("color", "red");

//add를 안했을 경우

//$("li:even").css("color", "red");

//$("#title").css("color", "red");

//eq(n) 아래 2개는 동일한 방법

$("li:eq(2)").css("background-color", "yellow");

$("li:eq(3)").css("background-color", "yellow");

//맨마지막 태그에 첫번째

$("li").eq(-1).css("background-color", "blue");

//eq(0)

$("li").first().css("font-size", "30px");

//eq(-1)

$("li").last().css("color", "white");

//

$("li").parent().css("border", "10px solid green");

}

</script>

</head>

<body>

<ul>

</ul>

<hr />

</body>

</html>

결과화면

소스

<html>

<head>

<title>manipulation</title>

function Test()

{

//js

//innerText : 순수한 문자열

//document.getElementById("div1").innerText = "<b>아무게</b>";

//document.getElementById("div1").innerHTML = "<b>아무게</b>";

//innerHTML : 내용중 문법을 이해. 동적으로 구조를 핸들링

var str = "<input type='text' />";

document.getElementById("div1").innerHTML = str;

}

function Test2()

{

//innerText

//alert($("#div1").text());

//$("#div1").text("안녕하세요");

//innerHTML

$("#div1").html("<a href='#'>링크</a>");

}

function Test3()

{

//객체.style.width = "200px";

//$("#div1").width("200px");

//$("#div1").height("200px");

$("#div1").width("200px").height("200px");

}

</script>

</head>

<body>

홍길동

</div>

</body>

</html>

결과화면

소스

<html>

<head>

//$(document).ready(Init);//onload="Init();" 와 똑같은 행동..

//function Init()

//{

// alert("안녕");

//}

//위와같은 방법을 아래와 같이 사용한다.

//프로그램과 html을 분리하기 위한 방편이다.

$(document).ready(function ()

{

//btn1의 클릭

$("#btn1").dblclick(function ()

{

alert("안녕~");

});

//$("#btn1").bind("click", function ()

//{

// alert("안녕2~");

//});

$("#btn2").click(function ()

{

$("#btn1").show();

});

$("#btn3").click(function ()

{

$("#btn1").hide(); //display:none

});

//speed : 밀리초, "slow - 0.6", "fast - 0.2"

$("#btn4").click(function ()

{

//$("#img1").fadeIn(1000);

$("#img1").fadeIn("slow");

});

$("#btn5").click(function ()

{

//$("#img1").fadeOut(1000);

$("#img1").fadeOut("fast");

});

$("#btn6").click(function ()

{

//중간단계 불투명에서 멈춘다.

$("#img1").fadeTo(1000, 0.3);

});

$("#btn7").click(function ()

{

//중간단계 불투명에서 멈춘다.

$("#img1").slideUp(1000);

});

$("#btn8").click(function ()

{

$("#div1").slideUp(1000);

});

$("#btn9").click(function ()

{

$("#div1").slideDown(1000);

});

$("#btn10").click(function ()

{

$("#div1").slideToggle(1000);

});

$("#btn11").click(function ()

{

//$("#div1").animate(

$("#div1").delay(1000).animate(

{

//WPF에서본거와 비슷하게 애니메이션 형태로 적용..

//width: "300px",

//opacity: 0.3,

//borderWidth: "20px"

width: "toggle",

opacity:"toggle"

}, 1000);

});

</script>

</head>

<body>

<hr />

<hr />

<hr />

</body>

</html>

저작자표시

Attributes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Attributes</title>

#box

{

border:1px solid black;

width:200px;

height:150px;

}

.style1

{

background-color:Yellow;

width:200px;

height:150px;

}

.style1 { background-color:Yellow; }

.style2 { background-color:Black; color:White; }

.style3 { background-color:Red; color:Yellow; }

.sel

{

background-color:Yellow;

font-weight:bold;

text-decoration:underline;

}

</style>

//Attribute

function Test()

{

var size = $("#txt1").attr("size");

//$("#txt1").attr("value", size);

$("#txt1").val(size);

}

function Test2()

{

$("#txt1").removeAttr("size");

$("#txt1").attr("readonly", "readonly");

$("#txt1").attr("title", new Date());

}

//Class

function Class1()

{

//클래스 네임만 style을 주게 되면

document.getElementById("box").className = "style1";

}

function Class2()

{

document.getElementById("box").className = "style2";

}

function Class3()

{

//한번에 하나씩 제어

document.getElementById("box").className = "style3";

}

function Class4()

{

//class관련 함수 = css() 사용 x N개

//여러개를 한번에 제어가능

$("tr:even").addClass("sel");

}

function Class5()

{

$("tr:even").removeClass("sel");

}

function Class6()

{

$("tr:even").toggleClass("sel");

}

</script>

</head>

<body>

<hr />

내용물<br />

내용물

</div>

<hr />

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

저작자표시

ui draggable, drop

소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#div1 {

width:100px;

height:100px;

background-color:yellow;

z-index:1;

}

#zone {

width:150px;

height:150px;

background-color:yellow;

position:absolute;

left:300px;

top:100px;

}

</style>

//문서가 로드될떄..div1을 드래그할 수 있도록...

$(document).ready(

function () {

$("#div1").draggable();

//$("#div1").draggable({ axis:"x" } );

//$("#div1").draggable({ axis:"y" } );

$("#zone").droppable(

{

drop: function () {

alert("네모 안으로 쏙 들어왔군요~!");

}

);

}

)

</script>

</head>

<body>

</body>

</html>

결과

이미지를 마우스로 드래그해 네모안에 넣으면 다음과 같이 alert 창이 나온다.

jQuery eq를 활용해 태그 선택 예제

소스

<html>

<head>

<!--

//문서가 로드될때..

$(document).ready(

function () {

//할일..

//짝수,홀수 필터

//even, odd

//$("#table1 tr:odd").css("background-color", "yellow");

//태그의 텍스트 접근

//alert($("#table1 td:eq(1)").text());//읽기

$("#table1 td:eq(1)").text("하하하"); //쓰기

}

);

//-->

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

결과화면

'프로그래밍/Jquery'에 해당되는 글 13건

원하는 숫자만큼 순서대로 증가하는 글자 웹페이지에 표시(HTML, CSS, jQuery)

원하는 숫자만큼 순서대로 증가하는 글자 웹페이지에 표시(HTML, CSS, jQuery)

트랙백

jQuery Effect 예제

jQuery Effect 예제

트랙백

jQuery progressbar, slider, Tabs 예제

jQuery progressbar, slider, Tabs 예제

트랙백

Jquery popup 예제

Jquery popup 예제

트랙백

Jquery Accordion, Autocomplete, Datepicker 사용 예제

Jquery Accordion, Autocomplete, Datepicker 사용 예제

트랙백

jQuery draggable, droppable, resize, sortable 사용예제

jQuery draggable, droppable, resize, sortable 사용예제

트랙백

Jquery 탐색(Traversing), 관리(Manipulation), 이벤트(Event), jQuery 사이트 이용 팁

Jquery 탐색(Traversing), 관리(Manipulation), 이벤트(Event), jQuery 사이트 이용 팁

트랙백

Attributes

트랙백

ui draggable, drop

트랙백

jQuery eq를 활용해 태그 선택 예제

jQuery eq를 활용해 태그 선택 예제

트랙백