영삼넷

<link href = "css / twentytwenty.css"rel = "stylesheet"type = "text / css"/>
<script type = "text / javascript"src = "js / jquery.js"> </ script>
<script type = "text / javascript"src = "js / jquery.event.move.js"> </ script>
<script type = "text / javascript"src = "js / jquery.twentytwenty.js"> </ script>
<script type = "text / javascript">
	$ (window) .load (function () {
		$ ( '. container'). twentytwenty ({ default_offset_pct : 0.5 });
	});
</ script>

지정해주고 .. 표현 하고 싶은곳에 아래 소스

id='container1' class='twentytwenty-container'>
  <img src='sample-before.png'>
  <img src='sample-after.png'>
</div>

원본 링크 : https://zurb.com/playground/twentytwenty

Name	Default Value
$pluginPrefix	twentytwenty
$twenty20-handle-color	#fff
$twenty20-handle-stroke	3px
$twenty20-handle-circle-width	38px
$twenty20-handle-box-shadow	0px 0px 12px rgba(#333,0.5)
$twenty20-handle-triangle-color	$twenty20-handle-color
$twenty20-handle-triangle-size	6px
$twenty20-handle-triangle-position	5px
$twenty20-handle-radius	1000px
$twenty20-overlay-bg	rgba(#000,0.5)
$twenty20-overlay-label-color	#fff
$twenty20-overlay-label-bg	rgba(#fff, .2)
$twenty20-overlay-label-height	38px
$twenty20-overlay-label-padding	20px
$twenty20-overlay-label-font-size	13px
$twenty20-overlay-label-letter-spacing	0.1em
$twenty20-label-radius	2px

No trackbacks, No comments.

jQuery 폼의 첫번째 입력가능한 필드에 FOCUS 주기

프로그래밍/JQuery | 2018/08/03 10:57

</form>

$(document).ready(function() {

$("#form :input:visible:enabled:first").focus();

});

No trackbacks, No comments.

지정된 숫자까지 카운트업하는 숫자 애니메이션

프로그래밍/JQuery | 2018/07/25 20:41

1. 다음의 script를 예를들면 index.php에 넣어주고...해당 페이지에서는 script는 한 번만 들어가면 됩니다.

첨부한 waypoints.min.js와 jquery.counterup.min.js는 js 폴더에 넣어주시면 됩니다.

jQuery(document).ready(function($) {

$('.counter').counterUp({

delay: 10, // 숫자당 돌아가는 속도를 지연시켜주는 요소이며 숫자가 높으면 높을 수록 숫자가 돌아가는 속도가 느려집니다.

time: 1000 // 카운트업 해주는 애니메이션의 전체 지속시간으로 1000일 경우, 1초를 의미합니다.

});

</script>

2. 그리고, 이렇게 사용하시면 됩니다. 글씨 크기와 색상은 적당히 조정하시구요

○ 123,456 을 표시할 때 : <span class="counter">123,456</span>

○ Copyright 를 표시할 때 : © <span class="counter">2010</span> ~ <span class="counter">2018</span>

○ free_board(자유게시판)의 게시물 합계를 나타내고자 할 때

<?php

$total = sql_fetch("select count(*) as cnt from g5_write_free_board where wr_is_comment = 0"); //댓글 제외 시 사용

$total = sql_fetch("select count(*) as cnt from g5_write_free_board"); // 댓글 포함 시 사용

echo "<span class='counter'>".number_format($total[cnt])."</span>";

▶ 데모 페이지 보기 → http://bfintal.github.io/Counter-Up/demo/demo.html

No trackbacks, No comments.

전화번호 형식 입력 jquery 플러그인

프로그래밍/JQuery | 2018/07/25 20:33

숫자만 입력가능하고

입력한 숫자가 아래처럼 전화번호 형식으로 자동 변환되는 간단한 jquery 플러그인입니다.

000-000-0000

000-0000-0000

필요해서 만들어 봤어요.

<<사용법>>

$('#phone').phoneInput();

</script>

jquery.phoneInput.js

No trackbacks, No comments.

안드로이드 연락처 목록 가져오기/삭제하기 방법

프로그래밍/JQuery | 2011/12/06 11:34

방법은 Call Log 가져오는 방법과 유사합니다.

AndroidManifest.xml 에 퍼미션 추가

<uses-permission android:name="android.permission.WRITE_CONTACTS" />
< uses-permission android:name="android.permission.READ_CONTACTS" />

PhoneBook.java

private Cursor getURI()
{
// 주소록 URI
Uri people = Contacts.CONTENT_URI;

// 검색할 컬럼 정하기
String[] projection = new String[] { Contacts._ID, Contacts.DISPLAY_NAME, Contacts.HAS_PHONE_NUMBER };

// 쿼리 날려서 커서 얻기
String[] selectionArgs = null;
String sortOrder = ContactsContract.Contacts.DISPLAY_NAME + " COLLATE LOCALIZED ASC";

// managedquery 는 activity 메소드이므로 아래와 같이 처리함
return getContentResolver().query(people, projection, null, selectionArgs, sortOrder);
// return managedQuery(people, projection, null, selectionArgs, sortOrder);
}

public void phoneBook() {
try {
Cursor cursor = getURI(); // 전화번호부 가져오기

int end = cursor.getCount(); // 전화번호부의 갯수 세기
Logger.d("ANDROES", "end = "+end);

String [] name = new String[end]; // 전화번호부의 이름을 저장할 배열 선언
String [] phone = new String[end]; // 전화번호부의 이름을 저장할 배열 선언
int count = 0;

if(cursor.moveToFirst())
{
// 컬럼명으로 컬럼 인덱스 찾기
int idIndex = cursor.getColumnIndex("_id");

do
{
tempItem = new TempItem();

// 요소값 얻기
int id = cursor.getInt(idIndex);
String phoneChk = cursor.getString(2);
if (phoneChk.equals("1")) {
Cursor phones = getContentResolver().query(
ContactsContract.CommonDataKinds.Phone.CONTENT_URI,
null,
ContactsContract.CommonDataKinds.Phone.CONTACT_ID
+ " = " + id, null, null);

while (phones.moveToNext()) {
phone[count] = phones
.getString(phones
.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER));
}
}
name[count] = cursor.getString(1);

// 개별 연락처 삭제
// rowNum = getBaseContext().getContentResolver().delete(RawContacts.CONTENT_URI, RawContacts._ID+ " =" + id,null);

// LogCat에 로그 남기기
// Logger.i("ANDROES", "id=" + id +", name["+count+"]=" + name[count]+", phone["+count+"]=" + phone[count]);
count++;

} while(cursor.moveToNext() || count > end);
}
} catch (IOException e) {
e.printStackTrace();
}
}

No trackbacks, No comments.

입력한 내용에 맞는 체크박스만 보여주기

프로그래밍/JQuery | 2011/11/09 17:33

체크 박스 옵션이 많아져서 원하는 걸 찾기 어려울 때 사용하시면 됩니다.

몇 번 언급한 적이 있는 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()

No trackbacks, No comments.

jQuery each 거꾸로 반환하기

프로그래밍/JQuery | 2011/11/09 17:31

$($("li").get().reverse()).each(function() { });

출처 : http://stackoverflow.com/questions/1394020/jquery-each-backwards

No trackbacks, No comments.

실시간 검색어 순위 순서대로 보여주기

프로그래밍/JQuery | 2011/11/09 17:29

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Real-time Rank</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="application.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<dl id="rank-list">
<dt>실시간 급상승 검색어</dt>
<dd>
<ol>
<li><a href="#">1 순위</a></li>
<li><a href="#">2 순위</a></li>
<li><a href="#">3 순위</a></li>
<li><a href="#">4 순위</a></li>
<li><a href="#">5 순위</a></li>
<li><a href="#">6 순위</a></li>
<li><a href="#">7 순위</a></li>
<li><a href="#">8 순위</a></li>
<li><a href="#">9 순위</a></li>
<li><a href="#">10 순위</a></li>
</ol>
</dd>
</dl>
</div>
</body>
</html>

stylesheet.css

body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}

#content {
margin: 20px;
padding: 10px;
background: #393;
}

#rank-list a {
color: #FFF;
text-decoration: none;
}

#rank-list a:hover {
text-decoration: underline;
}

#rank-list {
overflow: hidden;
width: 160px;
height: 20px;
margin: 0;
}

#rank-list dt {
display: none;
}

#rank-list dd {
position: relative;
margin: 0;
}

#rank-list ol {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style-type: none;
}

#rank-list li {
height: 20px;
line-height: 20px;
}

application.js

$(function() {
var count = $('#rank-list li').length;
var height = $('#rank-list li').height();

function step(index) {
$('#rank-list ol').delay(2000).animate({
top: -height * index,
}, 500, function() {
step((index + 1) % count);
});
}

step(1);
});

No trackbacks, 1 Comment

jquery를 이용한 오른쪽 퀵메뉴

프로그래밍/JQuery | 2011/11/09 17:27

<div style='position:absolute;'>퀵메뉴 내용</div> 형식이 아닌

//-----------------------------------

</div>

이동하는 간단 오른쪽 퀵메뉴

//---------------------------------

//테스트 예제

<HTML>
<BODY>
<script src='http://code.jquery.com/jquery-latest.js'〉〈/script〉

<table height='2000'>
<tr>
<td width='100'>
</td>
<td valign=top><BR><BR><BR><BR><BR>
<div style='position:relative'><div style='position:absolute;border:1px solid #ccc;' id='test'>ffffffff</div></div>
</td>
</tr>
</table>

<scRIPT LANGUAGE="Javascript">

</scRIPT>
</BODY>
</HTML>

No trackbacks, No comments.

textarea 글자수 카운트

프로그래밍/JQuery | 2011/11/03 04:39

트위터처럼 140자 제한이 있는 경우, 남은 글자수를 보여줍니다.

0보다 아래로 떨어지면 붉은 글씨로 바뀌고 submit을 할 수 없게 했습니다.

index.html

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Input Counter</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="application.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<form action="index.html" method="POST">
<textarea></textarea>
<span class="input-counter"></span>
<input type="submit" id="input-submit" value="등록" />
</form>
</div>
</body>
</html>

stylesheet.js

body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}

#container {
margin: 10px auto;
width: 500px;
padding: 10px;
background: #CCC;
}

form {
overflow: hidden;
height: 100%;
}

textarea {
display: block;
width: 99%;
height: 5.0em;
margin-bottom: 0.5em;
}

span.input-counter {
float: left;
font-weight: bold;
color: #000;
}

span.input-counter.disabled {
color: #F00;
}

input#input-submit {
float: right;
}

application.js

$(function() {
var maxLength = 140;

function updateInputCount() {
var textLength = $('textarea').val().length;
var count = maxLength - textLength;
$('span.input-counter').text(count);
if (count < 0) {
$('span.input-counter').addClass('disabled');
$('input#input-submit').prop('disabled', true);
} else {
$('span.input-counter').removeClass('disabled');
$('input#input-submit').prop('disabled', false);
}
}

$('textarea')
.focus(updateInputCount)
.blur(updateInputCount)
.keypress(updateInputCount);
window.setInterval(updateInputCount, 100);

updateInputCount();
});

No trackbacks, 1 Comment

JQuery - 제이쿼리 1.7 버전이 릴리즈 되었네요

프로그래밍/JQuery | 2011/11/01 12:21

지난 11월 3일 제이쿼리 1.7 버전이 릴리즈 되었네요
간략하게 정리한 개선 또는 삭제사항은 아래와같아요.

http://blog.jquery.com/2011/11/03/jquery-1-7-released/

추가 & 개선된 사항

.on() .off() API 추가 (bind() 랑 비슷한거같은데요?)


	$('a').bind('click', myHandler);

	$('a').on('click', myHandler);



	$('form').bind('submit', { val: 42 }, fn);

	$('form').on('submit', { val: 42 }, fn);



	$(window).unbind('scroll.myPlugin');

	$(window).off('scroll.myPlugin');



	$('.comment').delegate('a.add', 'click', addNew);

	$('.comment').on('click', 'a.add', addNew);



	$('.dialog').undelegate('a', 'click.myDlg');

	$('.dialog').off('click.myDlg', 'a');



	$('a').live('click', fn);

	$(document).on('click', 'a', fn);



	$('a').die('click');

	$(document).off('click', 'a');

Delegated 이벤트의 성능 향상 (속도말하는거같아요)
IE6/IE7/IE8에서 HTML5의 더 나은 지원
토글링 애니메이션의 직관적인 동작
AMD(Asynchronous Module Definition) API 지원
jQuery.Deferred 객체 확장
jQuery.isNumeric() 추가 - 매개변수의 정수 여부 체크 함수

No trackbacks, No comments.

jQuery UI class 를 animate

프로그래밍/JQuery | 2011/09/05 03:16

http://jqueryui.com/demos/toggleClass/

<style type="text/css">
.test { float:left; border:solid 1px black; width:200px; }
.test2 { border:dotted 1px red; width:300px; }
.test strong { float:left; border:solid 1px black; width:100px; font-size:12px; color:black; }
.test2 strong { width:150px; font-size:20px; color:blue; }
</style>
<div id="test" class="test"><strong>test</strong></div>
<script type="text/javascript">
$('#test').click(function() {
$(this).toggleClass('test2', 'slow');
});
</script>

아쉽게도 자식들은 animate 되지 않고 그냥 바뀌네요.

License: GPL or MIT

No trackbacks, No comments.

iframe내의 id셀렉터

프로그래밍/JQuery | 2010/08/18 21:00

$('#iframeID').contents().find('#someID').html();

전 이걸 몰라서 헤멨는데 다른분은 다 아시고 계신건가요?

No trackbacks, No comments.

폼의 첫번째 입력박스에 포커스 주기

프로그래밍/JQuery | 2010/08/18 21:00

$("#form :input[type=text]:visible:enabled:first").focus();

No trackbacks, No comments.

jquery 오른쪽 마우스금지

프로그래밍/JQuery | 2010/08/18 20:58

$(document).bind("contextmenu", function(e){
alert("오른쪽마우스금지입니다.");
return false;
});

No trackbacks, 1 Comment

$.get 대신 $.post 권장

프로그래밍/JQuery | 2010/06/07 14:13

$.get으로 값을 가져올 경우 새 값이 적용이 안 되는 경우가 있습니다.
익스 도구 > 페이지 확인에서 "자동으로"가 체크된 경우에 그렇더군요.

$.post나 $.ajax({type:'post'})로 사용하면 말끔히 해결됩니다.

익스8에서 확인된 내용입니다.

No trackbacks, No comments.

<form 안에 있는 checkbox를 radio 처럼 쓰기

프로그래밍/JQuery | 2010/06/07 14:12

<form id="fwishlist" ...
loop....
<input type=hidden name=it_id[$i] >
...end loop

$("#fwishlist input:checkbox[name^=it_id]").click( function(){
$("#fwishlist input:checkbox:checked[name^=it_id]").attr('checked',false);
$(this).attr('checked',true);
});

No trackbacks, No comments.

Jquery 체크박스 사용법

프로그래밍/JQuery | 2010/06/07 14:11

jquery를 이용한 체크박스 부분에 관련된 내용이 없어서 간단하게 한번 만들어보았습니다.

저보다 더 좋은 내용이 있으면 코멘트 달아주세요

<html>
<head>
<title></title>
<script type="text/javascript" src="./script/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#selectall").click(selectAll);
$("#save").click(save);
});
function selectAll()
{
var checked = $("#selectall").attr("checked");
$(".box").each(function(){
var subChecked = $(this).attr("checked");
if (subChecked != checked)
$(this).click();
});
}

function save()
{
var result = "";
$(".box:checked").each(function() {
$("#"+$(this).val()).remove();
result += $(this).val();
//AJAX로 넘겨줄때는
//.get('XXX.php',{SelType:$(this).val()});

});
alert(result);
}
</script>
</head>
<body>
<table>
<tr><td><input type="checkbox" id=selectall></td><td>1전체선택</td></tr>
<tr><td><input type="checkbox" name="chkbox" value="1" class="box"></td><td>1</td></tr>
<tr><td><input type="checkbox" name="chkbox" value="2" class="box"></td><td>1</td></tr>
<tr><td><input type="checkbox" name="chkbox" value="3" class="box"></td><td>1</td></tr>
<tr><td><input type="checkbox" name="chkbox" value="4" class="box"></td><td>1</td></tr>
<tr><td><input type="checkbox" name="chkbox" value="5" class="box"></td><td>1</td></tr>
<tr><td><input type="button" value="저장" id="save"></td></tr>
</table>
</body>
</html>

No trackbacks, No comments.

jQuery.each break continue

프로그래밍/JQuery | 2010/06/07 14:11

each 메소드를 하는 하는 경우 for문과 같은 제어 문에서 사용되는 break , continue 의 쓰임이 필요 하다.
each에서는 return true(continue) 와 return false(break) 를 이용해서 break, continue와 같은 동작을 일으킬수 있다.

$('#loop').each(function(i){
if( i == 0 ) return true; //continue;
return false;//break;
});

No trackbacks, No comments.

jQuery + 정규표현식( 이메일검증법)

프로그래밍/JQuery | 2010/06/07 14:10

function ajax_email_ch() {
var email1 = $("#email1").val();
var email2 = $("#email2").val();

var email_ch = email1 + "@" + email2;
if(email_ch.match(/\w+[/\w.]*@[/\w.]+\.\w+/)) {
이메일이 맞을경우...
}
}

찾아봐도 없어서 간단히 만들어봤습니다.
제가 사용하려고 만든거라 정리되지 않았는데...
쉬운 소스이니 변형하셔서 사용하셔여~.~

No trackbacks, No comments.

jquery 오른쪽 마우스금지

프로그래밍/JQuery | 2010/06/07 14:09

$(document).bind("contextmenu", function(e){
alert("오른쪽마우스금지입니다.");
return false;
});

No trackbacks, No comments.

iframe내의 id셀렉터

프로그래밍/JQuery | 2010/06/07 14:08

$('#iframeID').contents().find('#someID').html();

전 이걸 몰라서 헤멨는데 다른분은 다 아시고 계신건가요? -0-;;

No trackbacks, No comments.

jQuery 에서 jsonp 이용하여 다른도메인에 데이터 보내기

프로그래밍/JQuery | 2010/06/01 09:54

json 을 사용했을 경우 IE 의 보안을 낮추면 jsonp 를 사용하지 않고도 가능합니다.
(과연... 사용자가 보안을 낮출지... ㅎㅎ)

// --------------------------------------------------------------------------
// other.com json.php
<?php
function arr2json($arr){
foreach($arr as $k=>$val) $json[] = '"'.$k.'"'.':'.php2js($val);
if(count($json) > 0) return '({'.implode(',', $json).'})';
else return '';
}
function php2js($val){
if(is_array($val)) return arr2json($val);
if(is_string($val)) return '"'.addslashes($val).'"';
if(is_bool($val)) return 'Boolean('.(int) $val.')';
if(is_null($val)) return '""';
return $val;
}

$arr = array ('a'=>$_GET["a"],'b'=>$_GET["b"]);
echo $_GET["jsoncallback"].arr2json($arr);
?>

// --------------------------------------------------------------------------
// jsonsend.php

$(document).ready(function() {
$('#send').click(function() {
$.ajax({
url: 'http://other.com/json.php?jsoncallback=?',
data: {
a: a_site_data,
b: a_email_data
},
type: 'get',
dataType: 'jsonp',
jsonp : 'jsoncallback',
error: function() {
alert('Ajax failure');
},
success: function(response) {
alert('신청이 완료되었습니다.'+response.b);
}
});
}).css({cursor:'pointer'});
});

아래 두가지 방법은 안해봐서 정확히 모르겠지만...
이렇게도 하는거 같더군요. 위에가 복잡하다고 느껴지시면 아래처럼 시도해보세요 ^^;

$.get('http://www.other.com/Service.svc/GetToJson?callback=?', function (data) {
alert(data);
}, 'jsonp');

$.getJSON('../../Services/Service.svc/GetToJson', function (data) {
alert(data);
});

중요한건 서버단에서 데이터 전송할때 아래와 같은 형식으로 되어야 한다는겁니다.
jsonp1271738777234({"a":"webst.kr","b":"12333"})

이건 번외인데요.
ajax 디버깅 할때 오류도 안나오고 어찌해야 할지 모를때 아래 툴을 설치하셔서 사용하시면 좋더군요.

http://www.fiddler2.com/fiddler2/

1. 설치하고 실행합니다.
2. IE를 실행하고 웹사이트에 접속합니다.
3. ajax 통신을 시도합니다.
4. 프로그램에서 데이터의 전송이 보이는데 이것을 활용하면 됩니다.

이 프로그램 모를적엔 어떻게든 데이터 넘겨주는 파일에서 값좀 찍어볼라고 힘들었는데...
이제 그럴 필요가 없어졌네요 ^^;

No trackbacks, No comments.

jQuery를 이용한 드롭다운 메뉴

프로그래밍/JQuery | 2010/03/30 01:13

많은 드롭다운 메뉴에 대한 예제가 보이지만, 그중에서 가장 간단해보이고 활용하기 쉬운 예제를 찾아 간단히 연습해보고 방법론을 올린다. 아마 숙지하는 것보다는 활용하는게 더 빠를 것 같다는 생각.

먼저 메뉴의 구조는 다음과 같이 HTML로 만들어진다.

<ul class="topnav">
 
  <li><a href="#">홈</a></li>
  <li> <a href="#">메뉴1</a>
    <ul class="subnav">
      <li><a href="#">서브메뉴</a></li>
      <li><a href="#">서브메뉴</a></li>
    </ul>
    </li>
  <li> <a href="#">메뉴2</a>
    <ul class="subnav">
      <li><a href="#">서브메뉴</a></li>
      <li><a href="#">서브메뉴</a></li>
    </ul>
    </li>
  <li><a href="#">메뉴2</a></li>
  <li><a href="#">메뉴3</a></li>
  <li><a href="#">메뉴4</a></li>
  <li><a href="#">메뉴5</a></li>
</ul>

상위 메뉴가 있고 그 드롭다운으로 하위 메뉴들이 나열되는 방식으로 표현된다.

No trackbacks, No comments.

jQuery plugin, Pager 입니다

프로그래밍/JQuery | 2010/03/22 03:43

jQuery.Taeyo.Pager.zip

페이저 애드인은 ajax 방식으로 게시판이나 다양한 데이터를 로드하면서
페이징 기능을 덧붙이고자 하는 경우에 도움이 되는 애드인입니다.

다만, 이는 실제 데이터를 가져오거나 하는 애드인이 아니며, 오로지 전체 레코드 수(totalItemCount)와 페이지 당 출력할 레코드 수(RecordPerPage)에 따라서 전체 페이지 수와 페이징 구역을 계산 및 출력 하는 애드인입니다.

실제로 해당 페이지의 데이터를 가져오는 함수는 여러분이 직접 작성하셔야 하며,
페이저 사용 규칙에 맞게 함수를 호출하시면 페이징이 자동으로 렌더될 것입니다.

샘플은 http://taeyo.net/jQuery/Sample/pager.htm 을 참고하십시오.
현재, 태오 사이트의 새로운 디지털 다이어리는 이 애드인을 사용하여 만들어지고 있습니다.

다음은 사용방법입니다.

1. 페이저를 출력할 위치를 html 태그로 작성한다.
예 : <span id="pager"></span>

2. jQuery의 ready 함수 안에서 다음과 같이 페이저를 초기화 한다.
$("#pager").pager({
pager: "#pager",
pagerMode: "image", //text, image 중 선택
totalItemCount: _totalItemCount,
recordPerPage: _recordPerPage,
currentPage: _currentPage,
pageIndexChanged: Pager.pageIndexChanged,
prev10Text: "<<",
next10Text: ">>",
prev10ImgSrc: "images/Prev10.gif",
next10ImgSrc: "images/next10.gif",
selectedPageFontColor: "orange"
});

_totalItemCount와 _recordPerPage, _currentPage는 전역변수로 선언되어야 할 것이다.
그리고, 이 값은 여러분이 적절하게 설정하면 된다.

3. 페이저의 클릭 이벤트와 관련된 콜백 메서드들을 여러분에게 맞게 정의하자.

var Pager = {
pageIndexChanged: function(selectedPage) {
_currentPage = selectedPage;
loadBoardData(); //목록 조회 및 출력 메서드 호출
}
}
여기서의 loadBoardData() 메서드는 여러분이 데이터베이스에서 데이터를 조회하는 메서드이다.
메서드 명은 여러분의 상황에 맞게 바꾸면 된다.
강조했듯이, 페이저 애드인이 실제 데이터를 로드해주지는 않는다.

4. loadBoardData() 메서드 안에서 여러분의 작업이 모두 끝난 다음, 제일 마지막에 다음과 같은 코드를 추가하여
페이저를 갱신하도록 한다. 갱신을 하지 않으면, 페이저의 페이징 정보가 실제 갯수와 동기화 되지 않을테니 말이다.
갱신을 위해서는 다음의 메서드를 호출하면 된다. 반드시 refresh의 인자로 _totalItemCount, _recordPerPage를 넘겨줘야만
제대로 갱신된다는 점에 주의하자.
또한, refresh 메서드는 계산된 전체 페이지 갯수를 반환한다.

function loadBoardData()
{
//여러분의 작업
//...
//...

var pageCount = $("#pager").pager.refresh(_totalItemCount, _recordPerPage);
}

끝.

ps : 1차 배포 후, 일부 로직을 개선하여 좀 더 코드를 줄였습니다. 현재 파일은 2차 배포버전입니다.

No trackbacks, No comments.

jquery hosting을 로컬에서 구글로 변경하기

프로그래밍/JQuery | 2010/03/18 03:32

2008년부터 구글에서 유명한 java script hosting을 하고 있습니다.

구글의 jquery hosting을 쓰면 빠른속도(구글은 여기저기에 cdn이 있으니까요)와 함께
호스팅에서 발생하는 traffinc을 줄이는 것이 가능 합니다.

(원본)
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.min.js"></script>

(수정본)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>

No trackbacks, No comments.

<form 안에 있는 checkbox를 radio 처럼 쓰기

프로그래밍/JQuery | 2010/03/18 03:31

No trackbacks, No comments.

Jquery 체크박스 사용법

프로그래밍/JQuery | 2010/03/18 03:30

function save()
{
var result = "";
$(".box:checked").each(function() {
$("#"+$(this).val()).remove();
result += $(this).val();
//AJAX로 넘겨줄때는
//.get('XXX.php',{SelType:$(this).val()});

No trackbacks, No comments.

<< Previous Page 1 2 3 4 Next Page >>

영삼넷IT 강국 = 김영삼 블로그에 오신걸 환영합니다.

영삼넷

Categories

Tags

Recent Posts

Recent Comments

Archives

Links

Statistics

Search Results for '프로그래밍/JQuery'

93 posts related to '프로그래밍/JQuery'

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다