'자바스크립트'에 해당되는 글 21건
- 2009/10/10 홈피에 자바스크립트로 만든 색상선택기(ColorPicker) 붙여보기. (5)
- 2009/07/05 시계 가젯을 만들어 보고 구글과 블로그에 띄워보자!
- 2009/06/26 야후 세계 지도 활용하기, 야후 거기 지도 오픈 API 매시업 (1)
- 2009/06/25 다음 지도를 내 것으로 만들기, 다음 지도 API 매쉬업 (1)
- 2009/06/24 나만의 네이버 지도 만들기, 지도 API 매쉬업(Mashup) (3)
- 2009/06/21 자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup) (7)
- 2009/06/07 jQuery 로 텍스트 입력 박스(TextArea)에 크기 조절 막대 추가하기. (1)
- 2009/03/22 jQuery 애니메이트로 만들어보는 이미지 슬라이더와 전광판 (1)
- 2009/03/09 jQuery를 활용한 홈페이지 개발의 기본인 입력폼 제작 (5)
- 2009/01/27 jQuery UI로 달력과 날짜입력기(DatePicker)를 붙여보기.
- 2009/01/04 동적 HTML 객체 모델 요소의 위치와 면적 계산
- 2009/01/04 자바스크립트, 객체의 속성과 메소드와 이벤트 핸들러
- 2009/01/03 자바스크립트, 모서리가 둥근 테이블 만들기.
- 2008/10/15 자바스크립트 복수 게시물 더보기/접기(more/less) 소스 (5)
- 2008/09/30 자바스크립트로 아날로그 시계 만들기 (1)
- 2008/03/26 자바스크립트 createElement, insertBefore, replaceChild, appendChild
- 2008/01/06 움직이는 막대그래프 자바스크립트 소스 (1)
- 2007/12/28 자바스크립트로 구성된 이미지 슬라이더입니다. (7)
- 2007/06/16 최근 1개월동안 블로그 인기 페이지 BEST 30 & 웹로그분석에 관하여...
- 2007/04/20 초보자를 위한 자바스크립트 이미지 슬라이더 소스코드 (1)
- 2007/04/01 스크랩 금지된 네이버 블로그와 카페글을 스크랩하고 싶다면... (5)
홈페이지 개발에서 색상 선택기를 만들어 붙여야 할 일이 드물기는 하지만 언제가는 필요할 때가 있으므로 jQuery 플러그인을 가져다가 입맛에 맞는 ColorPicker 를 만들어봅시다. 검색해본 여러가지 ColorPicker 플러그인 중에 이 것(http://www.eyecon.ro/colorpicker/)이 쓸만해 보여서 약간 불편한 부분과 IE6에서 화면이 깨지는 부분을 수정한 후 예제를 만들어 봤습니다. 아래는 색상 선택기 예제 실행 화면이고 하단에는 예제 소스 코드입니다.
[jQuery 색상 선택기 (ColorPicker) 예제 실행 화면]
http://www.hompydesign.com/javascript/colorpicker/
[jQuery 색상 선택기 (ColorPicker) 예제 소스 코드]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/588
(0) 
(0)
[jQuery 색상 선택기 (ColorPicker) 예제 실행 화면]
http://www.hompydesign.com/javascript/colorpicker/
[jQuery 색상 선택기 (ColorPicker) 예제 소스 코드]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Color Picker</TITLE>
<link rel="stylesheet" href="./colorpicker.css" type="text/css" />
<link rel="stylesheet" href="./index.css" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="./colorpicker.js"></script>
<script>
$(document).ready(function(){
$('#colorpicker_0,#colorpicker_1,#colorpicker_2,#colorpicker_3,#colorpicker_4').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
check_colorpicker(el, hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
},
onChange: function (hsb, hex, rgb, el) {
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
$('.colorpicker_holder').each(function(){
var el = $(this).parent().find("input");
var color = el.val().toUpperCase();
el.val(color);
$(this).css("backgroundColor", "#"+color );
$(this).click(function(){
$(this).parent().find("input").ColorPickerShow();
});
});
});
function check_colorpicker(el, hex){
$(el).val(hex.toUpperCase());
$(el).ColorPickerHide();
$(el).parent().parent().find(".colorpicker_holder").css('backgroundColor', '#' + hex);
var pos = el.id;
}
</script>
</HEAD>
<BODY>
...
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Color Picker</TITLE>
<link rel="stylesheet" href="./colorpicker.css" type="text/css" />
<link rel="stylesheet" href="./index.css" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="./colorpicker.js"></script>
<script>
$(document).ready(function(){
$('#colorpicker_0,#colorpicker_1,#colorpicker_2,#colorpicker_3,#colorpicker_4').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
check_colorpicker(el, hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
},
onChange: function (hsb, hex, rgb, el) {
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
$('.colorpicker_holder').each(function(){
var el = $(this).parent().find("input");
var color = el.val().toUpperCase();
el.val(color);
$(this).css("backgroundColor", "#"+color );
$(this).click(function(){
$(this).parent().find("input").ColorPickerShow();
});
});
});
function check_colorpicker(el, hex){
$(el).val(hex.toUpperCase());
$(el).ColorPickerHide();
$(el).parent().parent().find(".colorpicker_holder").css('backgroundColor', '#' + hex);
var pos = el.id;
}
</script>
</HEAD>
<BODY>
...
</BODY>
</HTML>
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/588
(0) (0)
간단한 시계 가젯을 만들어 보겠습니다. 우선 구글에 로그인하고 구글 가젯 에디터(Google Gadget Editor) 정보 페이지에서 "바로 추가" 버튼을 클릭하면 아이구글(iGoogle)에 가젯을 편집할 수 있는 위젯이 추가 됩니다. 에디터에 아래 보이는 시계 가젯 소스를 입력한 후 적당한 파일명(simpleclock.xml)으로 저장(Save) 하고 발행(Publish) 버튼을 누릅니다.
그리고 "Add to my iGoogle page" 링크를 클릭하면 발행한 가젯을 내 아이구글 페이지에 붙일 수 있습니다. "Publish to iGoogle Directory" 링크를 클릭하면 아이구글 가젯 디렉토리에 발행할 수 있습니다. "Add to a webpage" 링크를 클릭하면 네 홈페이지나 블로그로 가져와서 붙일 수 있는 코드를 생성해 주는 페이지로 이동합니다. 바로 아래 보이는 시계는 완성된 가젯의 코드를 가져와 본 게시물에 코드를 추가해서 보여지는 것입니다. 구글 가젯 개발에 관심이 있는 분은 구글 가젯 API 개발 페이지에서 관련 정보를 확인해보세요.
[시계 가젯 코드 가져와서 띄운 화면]
[시계 가젯을 만들기 위한 소스 코드]
[구글 가젯 에디터]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/584
(0) (0)
그리고 "Add to my iGoogle page" 링크를 클릭하면 발행한 가젯을 내 아이구글 페이지에 붙일 수 있습니다. "Publish to iGoogle Directory" 링크를 클릭하면 아이구글 가젯 디렉토리에 발행할 수 있습니다. "Add to a webpage" 링크를 클릭하면 네 홈페이지나 블로그로 가져와서 붙일 수 있는 코드를 생성해 주는 페이지로 이동합니다. 바로 아래 보이는 시계는 완성된 가젯의 코드를 가져와 본 게시물에 코드를 추가해서 보여지는 것입니다. 구글 가젯 개발에 관심이 있는 분은 구글 가젯 API 개발 페이지에서 관련 정보를 확인해보세요.
[시계 가젯 코드 가져와서 띄운 화면]
[시계 가젯을 만들기 위한 소스 코드]
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="HOMPY CLOCK" directory_title="HOMPY CLOCK" description="HOMPY CLOCK" category="tools" screenshot="http://www.hompydesign.com/images/gadget/simpleclock.jpg" thumbnail="http://www.hompydesign.com/images/gadget/simpleclock.jpg" title_url="hompy.info/584" author="hompy" author_email="hompy.info@gmail.com" author_link="http://hompy.info/584" author_location="Korea, Seoul" author_affiliation="hompydesign.com" width="180" height="48" scrolling="false" author_aboutme="web programmer" />
<UserPref name="bgcolor" display_name="배경색" default_value="#99aa99"/>
<UserPref name="datecolor" display_name="날짜색" default_value="#ffffff"/>
<UserPref name="timecolor" display_name="시간색" default_value="darkgreen"/>
<Content type="html">
<![CDATA[
<div id="my_content">
<div id="my_date"></div>
<div id="my_clock"></div>
</div>
<style>
#my_content { font-size : 12px; padding : 5px; background-color:#99aa99;}
#my_date {font-family:verdana,돋음; font-size : 11px; color : #ffffff; padding : 2px; text-align : left; }
#my_clock {font-family:verdana,돋음; font-size : 14px; color : darkgreen; padding : 2px; text-align : center; font-weight : bold; background-color:#ffffff; }
</style>
<script type="text/javascript">
var prefs = new gadgets.Prefs();
function init_clock() {
var params = {};
var bgcolor, datecolor, timecolor;
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
params[gadgets.io.RequestParameters.REFRESH_INTERVAL] = 10 * 60;
bgcolor = prefs.getString("bgcolor");
datecolor = prefs.getString("datecolor");
timecolor = prefs.getString("timecolor");
document.getElementById('my_content').style.backgroundColor = bgcolor;
document.getElementById('my_date').style.color = datecolor;
document.getElementById('my_clock').style.color = timecolor;
print_hour();
window.setInterval("print_hour()", 100);
}
function print_hour(){
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var date = today.getDate();
var hour = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
document.getElementById('my_date').innerHTML = year + '-' + get_number_str(month) + '-' + get_number_str(date);
document.getElementById('my_clock').innerHTML = get_number_str(hour) + ':' + get_number_str(min) + ' ' + get_number_str(sec);
}
function get_number_str(num){
if (num<10) num = '0' + num;
return num;
}
gadgets.util.registerOnLoadHandler(init_clock);
</script>
]]>
</Content>
</Module>
<Module>
<ModulePrefs title="HOMPY CLOCK" directory_title="HOMPY CLOCK" description="HOMPY CLOCK" category="tools" screenshot="http://www.hompydesign.com/images/gadget/simpleclock.jpg" thumbnail="http://www.hompydesign.com/images/gadget/simpleclock.jpg" title_url="hompy.info/584" author="hompy" author_email="hompy.info@gmail.com" author_link="http://hompy.info/584" author_location="Korea, Seoul" author_affiliation="hompydesign.com" width="180" height="48" scrolling="false" author_aboutme="web programmer" />
<UserPref name="bgcolor" display_name="배경색" default_value="#99aa99"/>
<UserPref name="datecolor" display_name="날짜색" default_value="#ffffff"/>
<UserPref name="timecolor" display_name="시간색" default_value="darkgreen"/>
<Content type="html">
<![CDATA[
<div id="my_content">
<div id="my_date"></div>
<div id="my_clock"></div>
</div>
<style>
#my_content { font-size : 12px; padding : 5px; background-color:#99aa99;}
#my_date {font-family:verdana,돋음; font-size : 11px; color : #ffffff; padding : 2px; text-align : left; }
#my_clock {font-family:verdana,돋음; font-size : 14px; color : darkgreen; padding : 2px; text-align : center; font-weight : bold; background-color:#ffffff; }
</style>
<script type="text/javascript">
var prefs = new gadgets.Prefs();
function init_clock() {
var params = {};
var bgcolor, datecolor, timecolor;
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
params[gadgets.io.RequestParameters.REFRESH_INTERVAL] = 10 * 60;
bgcolor = prefs.getString("bgcolor");
datecolor = prefs.getString("datecolor");
timecolor = prefs.getString("timecolor");
document.getElementById('my_content').style.backgroundColor = bgcolor;
document.getElementById('my_date').style.color = datecolor;
document.getElementById('my_clock').style.color = timecolor;
print_hour();
window.setInterval("print_hour()", 100);
}
function print_hour(){
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var date = today.getDate();
var hour = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
document.getElementById('my_date').innerHTML = year + '-' + get_number_str(month) + '-' + get_number_str(date);
document.getElementById('my_clock').innerHTML = get_number_str(hour) + ':' + get_number_str(min) + ' ' + get_number_str(sec);
}
function get_number_str(num){
if (num<10) num = '0' + num;
return num;
}
gadgets.util.registerOnLoadHandler(init_clock);
</script>
]]>
</Content>
</Module>
[구글 가젯 에디터]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/584
(0) (0)
야후 세계 지도 API 를 활용해서 지도를 만드는 비교적 간단한 샘플입니다. 아래 소개된 소스 코드를 실행하면 100개의 마커가 뿌려지고 해당 마커를 클릭하면 이미지를 보여주는 다음과 같은 실행 화면을 확인할 수 있습니다. 자신의 홈페이지에서 테스트 하기 위해서는 야후 거기 지도 오픈 API 키를 해당 홈페이지 (http://kr.open.gugi.yahoo.com/Regist/regist.php) 에서 얻을 수 있으며 키 값($yahoo_map_api_key)을 얻은 API 키로 교체해야 합니다. 참고로 구글 지도 API에도 관심이 있는 분은 앞서 소개한 "자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup)" 포스트도 참고하세요.
[실행 화면] http://www.hompydesign.com/map/yahoo.html
[소스 코드]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/583(0) (0)
[실행 화면] http://www.hompydesign.com/map/yahoo.html
[소스 코드]
<HTML>
<HEAD>
<TITLE><?=$hompy_title?></TITLE>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=$yahoo_map_api_key"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
.window_image {border:1px solid #cccccc; width:140px; height:100px; margin:6px;}
</style>
<script type='text/javascript'>
<!--
var map = null;
var current_lon = 127.046;
var current_lat = 37.5066;
var current_zoom = 14;
var person_list = [];
$(document).ready(function(){
display_loading();
map = new YMap($("#map_canvas")[0]);
map.addTypeControl();
map.addZoomLong();
map.addPanControl();
//map.drawZoomAndCenter(encodeURIComponent("강남역"), 4);
map.drawZoomAndCenter(new YGeoPoint(current_lat,current_lon), 4);
map.setMapType(YAHOO_MAP_REG);
display_marker({user:0,lat:current_lat,lon:current_lon});
for (record in person_list) {
display_marker(person_list[record]);
}
setTimeout(display_loaded, 1000);
});
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
function display_marker(record){
with (record) {
var point = new YGeoPoint(Number(lat),Number(lon));
var marker = create_marker(point, user);
}
map.addOverlay(marker);
//map.setCenter(point, current_zoom, G_NORMAL_MAP);
}
function create_marker(point, person) {
var icon = new YImage();
icon.src = 'images/pot.png';;
icon.size = new YSize(36, 36);
icon.offset.x = -18; icon.offset.y = 0;
var marker= new YMarker(point, icon);
//marker.addAutoExpand("pos:"+person);
var html = '<a href="http://hompy.info/583"><img src="/hompydesign.com?seq='+person+'" class="window_image"></a>';
YEvent.Capture(marker, EventsList.MouseClick, function(){
marker.openSmartWindow(html);
});
return marker;
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
-->
</script>
</HEAD>
<BODY>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</BODY>
</HTML>
<HEAD>
<TITLE><?=$hompy_title?></TITLE>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=$yahoo_map_api_key"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
.window_image {border:1px solid #cccccc; width:140px; height:100px; margin:6px;}
</style>
<script type='text/javascript'>
<!--
var map = null;
var current_lon = 127.046;
var current_lat = 37.5066;
var current_zoom = 14;
var person_list = [];
$(document).ready(function(){
display_loading();
map = new YMap($("#map_canvas")[0]);
map.addTypeControl();
map.addZoomLong();
map.addPanControl();
//map.drawZoomAndCenter(encodeURIComponent("강남역"), 4);
map.drawZoomAndCenter(new YGeoPoint(current_lat,current_lon), 4);
map.setMapType(YAHOO_MAP_REG);
display_marker({user:0,lat:current_lat,lon:current_lon});
for (record in person_list) {
display_marker(person_list[record]);
}
setTimeout(display_loaded, 1000);
});
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
function display_marker(record){
with (record) {
var point = new YGeoPoint(Number(lat),Number(lon));
var marker = create_marker(point, user);
}
map.addOverlay(marker);
//map.setCenter(point, current_zoom, G_NORMAL_MAP);
}
function create_marker(point, person) {
var icon = new YImage();
icon.src = 'images/pot.png';;
icon.size = new YSize(36, 36);
icon.offset.x = -18; icon.offset.y = 0;
var marker= new YMarker(point, icon);
//marker.addAutoExpand("pos:"+person);
var html = '<a href="http://hompy.info/583"><img src="/hompydesign.com?seq='+person+'" class="window_image"></a>';
YEvent.Capture(marker, EventsList.MouseClick, function(){
marker.openSmartWindow(html);
});
return marker;
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
-->
</script>
</HEAD>
<BODY>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</BODY>
</HTML>
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/583
(0) (0)
다음 지도 API 를 활용해서 지도를 만드는 비교적 간단한 샘플입니다. 아래 소개된 소스 코드를 실행하면 100개의 마커가 뿌려지고 해당 마커를 클릭하면 이미지를 보여주는 다음과 같은 실행 화면을 확인할 수 있습니다. 자신의 홈페이지에서 테스트 하기 위해서는 다음 지도 API 키를 해당 홈페이지 (https://apis.daum.net/register/mapsapi.daum) 에서 얻을 수 있으며 키 값($daum_map_api_key)을 얻은 API 키로 교체해야 합니다. 참고로 구글 지도 API에도 관심이 있는 분은 앞서 소개한 "자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup)" 포스트도 참고하세요.
[실행 화면] http://www.hompydesign.com/map/daum.html
[소스 코드]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/582(0) (0)
[실행 화면] http://www.hompydesign.com/map/daum.html
[소스 코드]
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE><?=$hompy_title?></TITLE>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://apis.daum.net/maps/maps.js?apikey=<?=$daum_map_api_key;?>" charset="utf-8"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
.window_image {border:1px solid #cccccc; width:140px; height:100px; margin:6px;}
</style>
<script type='text/javascript'>
<!--
var map = null;
var current_lon = 127.046;
var current_lat = 37.5066;
var current_zoom = 14;
var person_list = [];
$(document).ready(function(){
display_loading();
map = new DMap("map_canvas");
map.setCenter(new DLatLng(current_lat, current_lon), 4);
//map.addControl(new DIndexMapControl());
map.addControl(new DZoomControl());
display_marker({user:0,lat:current_lat,lon:current_lon});
for (record in person_list) {
display_marker(person_list[record]);
}
setTimeout(display_loaded, 1000);
});
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
function display_marker(record){
var icon = new DIcon("http://localimg.daum-img.net/localimages/07/2008/map/i_mks_b1.gif", new DSize(13, 16));
var point = new DLatLng(Number(record.lat),Number(record.lon));
var marker = create_marker(point, record.user);
map.addOverlay(marker, {mark:icon});
//map.addOverlay(marker);
}
function create_marker(point, person) {
var html = '<a href="http://hompy.info/582"><img src="/hompydesign.com?seq='+person+'" class="window_image"></a>';
var marker= new DMark(point, { infowindow : new DInfoWindow(html), draggable : false });
//marker.addAutoExpand("pos:"+person);
return marker;
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
-->
</script>
</HEAD>
<BODY>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</BODY>
</HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE><?=$hompy_title?></TITLE>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://apis.daum.net/maps/maps.js?apikey=<?=$daum_map_api_key;?>" charset="utf-8"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
.window_image {border:1px solid #cccccc; width:140px; height:100px; margin:6px;}
</style>
<script type='text/javascript'>
<!--
var map = null;
var current_lon = 127.046;
var current_lat = 37.5066;
var current_zoom = 14;
var person_list = [];
$(document).ready(function(){
display_loading();
map = new DMap("map_canvas");
map.setCenter(new DLatLng(current_lat, current_lon), 4);
//map.addControl(new DIndexMapControl());
map.addControl(new DZoomControl());
display_marker({user:0,lat:current_lat,lon:current_lon});
for (record in person_list) {
display_marker(person_list[record]);
}
setTimeout(display_loaded, 1000);
});
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
function display_marker(record){
var icon = new DIcon("http://localimg.daum-img.net/localimages/07/2008/map/i_mks_b1.gif", new DSize(13, 16));
var point = new DLatLng(Number(record.lat),Number(record.lon));
var marker = create_marker(point, record.user);
map.addOverlay(marker, {mark:icon});
//map.addOverlay(marker);
}
function create_marker(point, person) {
var html = '<a href="http://hompy.info/582"><img src="/hompydesign.com?seq='+person+'" class="window_image"></a>';
var marker= new DMark(point, { infowindow : new DInfoWindow(html), draggable : false });
//marker.addAutoExpand("pos:"+person);
return marker;
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
-->
</script>
</HEAD>
<BODY>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</BODY>
</HTML>
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/582
(0) (0)
네이버 지도 API 를 활용해서 지도를 만드는 비교적 간단한 샘플입니다. 아래 소개된 소스 코드를 실행하면 100개의 마커가 뿌려지고 해당 마커를 클릭하면 이미지를 보여주는 다음과 같은 실행 화면을 확인할 수 있습니다. 자신의 홈페이지에서 테스트 하기 위해서는 네이버 지도 API 키를 해당 홈페이지 (http://dev.naver.com/openapi/register) 에서 얻을 수 있으며 키 값($naver_map_api_key)을 얻은 API 키로 교체해야 합니다. 참고로 구글 지도 API에도 관심이 있는 분은 앞서 소개한 "자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup)" 포스트도 참고하세요.
[실행 화면] http://www.hompydesign.com/map/naver.html
[소스 코드]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/581(0) (0)
[실행 화면] http://www.hompydesign.com/map/naver.html
[소스 코드]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?=$hompy_title?></title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://map.naver.com/js/naverMap.naver?key=<?=$naver_map_api_key?>"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
.window_image {border:1px solid #cccccc; width:140px; height:100px;}
</style>
<script type="text/javascript">
var map;
var tm128 = new NPoint(315741,544301);
var latlng;
var person_list;
var infowin;
$(document).ready(function(){
display_loading();
map = new NMap($('#map_canvas')[0],578,460);
map.setCenterAndZoom(tm128, 4);
//map.addControl(new NIndexMap());
map.addControl(new NZoomControl());
map.addControl(new NMapBtns());
map.enableWheelZoom();
for (record in person_list) {
display_marker(person_list[record]);
}
display_marker({user:0,lon:127.046,lat:37.5066});
map.setCenter(latlng);
NEvent.addListener(map,"click",function (latlng){
if (infowin) map.removeOverlay(infowin);
});
NEvent.addListener(map,"startDrag",function (latlng){
if (infowin) map.removeOverlay(infowin);
});
setTimeout(display_loaded, 1000);
});
function transFromTM128ToLatLng() {
latlng = map.fromTM128ToLatLng(tm128);
document.getElementById("display").innerHTML = latlng;
}
function moveLatLng() {
map.setCenter(latlng);
}
function display_marker(record) {
latlng = new NLatLng(record.lat, record.lon);
var marker = new NMark(latlng, new NIcon('http://static.naver.com/maps/ic_spot.png',new NSize(52,41),new NSize(14,40)));
var html = '<a href="http://hompy.info/580"><img src="/hompydesign.com?seq='+record.user+'" class="window_image"></a>';
map.addOverlay(marker);
NEvent.addListener(marker,"click",function (latlng){
if (infowin) map.removeOverlay(infowin);
infowin = new NInfoWindow();
map.addOverlay(infowin);
infowin.set(latlng, "<TABLE style='width:100px;height:50px;background-color:#FFFFFF; border:solid 1px #666666'><TR><TD>"+html+"</TD></TR></TABLE>");
infowin.showWindow();
//NEvent.addListener(infowin,"mouseout",function () {infowin.hideWindow();});
});
}
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
</script>
</head>
<body>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?=$hompy_title?></title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://map.naver.com/js/naverMap.naver?key=<?=$naver_map_api_key?>"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
.window_image {border:1px solid #cccccc; width:140px; height:100px;}
</style>
<script type="text/javascript">
var map;
var tm128 = new NPoint(315741,544301);
var latlng;
var person_list;
var infowin;
$(document).ready(function(){
display_loading();
map = new NMap($('#map_canvas')[0],578,460);
map.setCenterAndZoom(tm128, 4);
//map.addControl(new NIndexMap());
map.addControl(new NZoomControl());
map.addControl(new NMapBtns());
map.enableWheelZoom();
for (record in person_list) {
display_marker(person_list[record]);
}
display_marker({user:0,lon:127.046,lat:37.5066});
map.setCenter(latlng);
NEvent.addListener(map,"click",function (latlng){
if (infowin) map.removeOverlay(infowin);
});
NEvent.addListener(map,"startDrag",function (latlng){
if (infowin) map.removeOverlay(infowin);
});
setTimeout(display_loaded, 1000);
});
function transFromTM128ToLatLng() {
latlng = map.fromTM128ToLatLng(tm128);
document.getElementById("display").innerHTML = latlng;
}
function moveLatLng() {
map.setCenter(latlng);
}
function display_marker(record) {
latlng = new NLatLng(record.lat, record.lon);
var marker = new NMark(latlng, new NIcon('http://static.naver.com/maps/ic_spot.png',new NSize(52,41),new NSize(14,40)));
var html = '<a href="http://hompy.info/580"><img src="/hompydesign.com?seq='+record.user+'" class="window_image"></a>';
map.addOverlay(marker);
NEvent.addListener(marker,"click",function (latlng){
if (infowin) map.removeOverlay(infowin);
infowin = new NInfoWindow();
map.addOverlay(infowin);
infowin.set(latlng, "<TABLE style='width:100px;height:50px;background-color:#FFFFFF; border:solid 1px #666666'><TR><TD>"+html+"</TD></TR></TABLE>");
infowin.showWindow();
//NEvent.addListener(infowin,"mouseout",function () {infowin.hideWindow();});
});
}
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
</script>
</head>
<body>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</body>
</html>
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/581
(0) (0)
구글 지도 API 를 활용해서 지도를 만드는 비교적 간단한 샘플입니다. 아래 소개된 소스 코드를 실행하면 100개의 마커가 뿌려지고 해당 마커를 클릭하면 이미지를 보여주는 다음과 같은 실행 화면을 확인할 수 있습니다. 자신의 홈페이지에서 테스트 하기 위해서는 구글 지도 API 키를 해당 홈페이지 (http://code.google.com/apis/maps/) 에서 얻을 수 있으며 키 값($google_map_api_key)을 얻은 API 키로 대입해야 합니다.
[실행 화면] http://www.hompydesign.com/map/
[소스 코드]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/580
(0) (0)
[실행 화면] http://www.hompydesign.com/map/
[소스 코드]
<HTML>
<HEAD>
<TITLE><?=$hompy_title?></TITLE>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=<?=$google_map_api_key?>"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
</style>
<script type='text/javascript'>
<!--
var map = null;
var current_lon = 127.046;
var current_lat = 37.5066;
var current_zoom = 14;
var person_list = [];
$(document).ready(function(){
display_loading();
map = new google.maps.Map2($("#map_canvas")[0]);
map.disableDoubleClickZoom();
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(current_lat, current_lon), current_zoom);
display_marker({user:0,lat:current_lat,lon:current_lon});
for (record in person_list) {
display_marker(person_list[record]);
}
setTimeout(display_loaded, 1000);
});
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
function display_marker(record){
with (record) {
var point = new GLatLng(Number(lat),Number(lon));
var marker = create_marker(point, user);
}
map.addOverlay(marker);
//map.setCenter(point, current_zoom, G_NORMAL_MAP);
}
function create_marker(point, person) {
var icon = new GIcon(G_DEFAULT_ICON);
if (person) {
icon.image = "images/marker"+(person%10)+".png";
icon.iconSize = new GSize(20,34);
}
var marker = new GMarker(point,{'icon': icon});
marker.person = person;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml('<img src="/hompydesign.com?seq='+person+'" width=140 height=100>');
});
return marker;
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
-->
</script>
</HEAD>
<BODY>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</BODY>
</HTML>
<HEAD>
<TITLE><?=$hompy_title?></TITLE>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=<?=$google_map_api_key?>"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
</style>
<script type='text/javascript'>
<!--
var map = null;
var current_lon = 127.046;
var current_lat = 37.5066;
var current_zoom = 14;
var person_list = [];
$(document).ready(function(){
display_loading();
map = new google.maps.Map2($("#map_canvas")[0]);
map.disableDoubleClickZoom();
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(current_lat, current_lon), current_zoom);
display_marker({user:0,lat:current_lat,lon:current_lon});
for (record in person_list) {
display_marker(person_list[record]);
}
setTimeout(display_loaded, 1000);
});
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
function display_marker(record){
with (record) {
var point = new GLatLng(Number(lat),Number(lon));
var marker = create_marker(point, user);
}
map.addOverlay(marker);
//map.setCenter(point, current_zoom, G_NORMAL_MAP);
}
function create_marker(point, person) {
var icon = new GIcon(G_DEFAULT_ICON);
if (person) {
icon.image = "images/marker"+(person%10)+".png";
icon.iconSize = new GSize(20,34);
}
var marker = new GMarker(point,{'icon': icon});
marker.person = person;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml('<img src="/hompydesign.com?seq='+person+'" width=140 height=100>');
});
return marker;
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
-->
</script>
</HEAD>
<BODY>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</BODY>
</HTML>
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/580
(0) (0)
자바스크립트 프레임워크 jQuery 를 활용해서 텍스트 입력 박스 (TextArea) 에 크기 조절 막대를 추가해 봅시다. 아래 소개한 소스를 실행하면 입력 박스 하단에 막대가 추가 되며 이 막대를 위 아래로 드래그 할 수 있으며 드래그 방향에 따라 텍스트 박스 크기를 늘리거나 줄일 수 있습니다.
[크기 조절 막대 예제 자바스크립트 소스 코드]
[크기 조절 막대 예제 실행 결과]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/577
(0) (0)
[크기 조절 막대 예제 자바스크립트 소스 코드]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>TextArea Resize Demo</title>
<style type="text/css">
#in_content {width:511px; height:40px; border:1px solid #666666}
.resize_bar {background: url("images/resize_bar.gif"); cursor:s-resize; height:12px; width:100%;}
</style>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type='text/javascript'>
<!--
jQuery.fn.resizehandle = function() {
return this.each(function() {
var me = jQuery(this);
me.after(
jQuery('<div class="resize_bar"></div>')
.bind('mousedown', function(e) {
var h = me.height();
var y = e.clientY;
var movehandler = function(e) {
me.height(Math.max(40, e.clientY + h - y));
};
var uphandler = function(e) {
jQuery('html').unbind('mousemove',movehandler)
.unbind('mouseup',uphandler);
};
jQuery('html') .bind('mousemove', movehandler)
.bind('mouseup', uphandler);
})
);
});
}
$(document).ready(function(){
$("textarea").resizehandle();
});
</script>
</head>
<body>
<table cellspacing=0 cellpadding=0 border=0><tr><td>
<textarea name="in_content" id="in_content">아래 크기조절 막대를 이동해보세요.</textarea>
</td></tr></table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>TextArea Resize Demo</title>
<style type="text/css">
#in_content {width:511px; height:40px; border:1px solid #666666}
.resize_bar {background: url("images/resize_bar.gif"); cursor:s-resize; height:12px; width:100%;}
</style>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type='text/javascript'>
<!--
jQuery.fn.resizehandle = function() {
return this.each(function() {
var me = jQuery(this);
me.after(
jQuery('<div class="resize_bar"></div>')
.bind('mousedown', function(e) {
var h = me.height();
var y = e.clientY;
var movehandler = function(e) {
me.height(Math.max(40, e.clientY + h - y));
};
var uphandler = function(e) {
jQuery('html').unbind('mousemove',movehandler)
.unbind('mouseup',uphandler);
};
jQuery('html') .bind('mousemove', movehandler)
.bind('mouseup', uphandler);
})
);
});
}
$(document).ready(function(){
$("textarea").resizehandle();
});
</script>
</head>
<body>
<table cellspacing=0 cellpadding=0 border=0><tr><td>
<textarea name="in_content" id="in_content">아래 크기조절 막대를 이동해보세요.</textarea>
</td></tr></table>
</body>
</html>
[크기 조절 막대 예제 실행 결과]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/577
(0) (0)
자바스크립트 프레임워크 라이브러리 jQuery의 애니메이션 관련 메소드를 이용해서 학습용 이미지 슬라이더와 전광판을 만들어 봤습니다. jQuery의 "animate()"라는 메소드로 개별 엘리먼트에 모션 이펙트를 부여할 수 있으며 자바스크립트 메소드인 "setInterval()" 를 이용해서 끊임없이 반복되는 애니메이션을 만들 수 있습니다. jQuery 의 "hover()" 이벤트 핸들러와 자바스크립트 "clearInterval()" 메소드를 활용해서 잠시 멈춤 효과를 만들 수 있지요. 추가로 "jQuery Easing v1.3"을 활용해서 다양한 이펙트 옵션을 테스트 할 수 있도록 했습니다. 하단부에 있는 옵션명을 클릭하면 개별 이펙트를 확인할 수 있습니다.
[전광판과 이미지 슬라이더 실행 화면]
http://www.hompydesign.com/javascript/animate/
[전광판과 이미지 슬라이더 소스 코드]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/574
(0) (0)
[전광판과 이미지 슬라이더 실행 화면]
http://www.hompydesign.com/javascript/animate/
[전광판과 이미지 슬라이더 소스 코드]
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Animate</title> <link type="text/css" href="/ui/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <style type="text/css"> body {font-size: 12px; font-family:"Dotum", "Tahoma";} img {border:0px;} a:link {color:#3366CC; text-decoration:none;} a:active {color:#FF9966; text-decoration:none;} a:visited {color:#3366CC; text-decoration:none;} a:hover {color:#FF9966; text-decoration:underline;} .body {width:440px; height:280px; border:1px solid #CCCCCC; padding:10px; background-color:#FAFDE2} #navi_tool {position:relative; width:400px; height:16px; overflow:hidden;} #navi {position:absolute; left:0px; top:0px;} #navi div {height:20px;} #album_tool {position:relative; width:380px; height:120px; overflow:hidden;} #album {position:absolute; width:2000px; left:0px; top:0px;} #album div {float:left; margin:0px; padding:0px;} </style> <script type="text/javascript"> $(document).ready(function(){ $("#navi").attr("motion", "easeInOutSine"); $("#album").attr("motion", "easeInOutExpo") $("#navi").attr("top", "0"); $("#album").attr("top", "0") $("#navi").attr("height", $("#navi>div").eq(0).height()); $("#album").attr("width", $("#album>div").eq(0).width()); $("#navi").attr("total", $("#navi>div").size()); $("#navi>div").eq(0).clone().appendTo($("#navi")); $("#navi").hover(function(){ clearInterval($("#navi").attr("timer")); },function(){ $("#navi").attr("timer", setInterval(my_rotate, 3000)); my_rotate(); }); $("#navi").attr("timer", setInterval(my_rotate, 3000)); $("#album").attr("total", $("#album>div").size()); $("#album>div").eq(0).clone().appendTo($("#album")); $("#album>div").eq(1).clone().appendTo($("#album")); $("#album").hover(function(){ clearInterval($("#album").attr("timer")); },function(){ $("#album").attr("timer", setInterval(my_album, 3000)); my_album(); }); $("#album").attr("timer", setInterval(my_album, 3000)); $("#motion_tool>a").click(function(){ $("#navi").attr("motion", $(this).text()); $("#album").attr("motion", $(this).text()) }); }); function my_rotate(){ if ($("#navi:animated").size()) return false; var height = $("#navi").attr("height"); var pos = (parseInt($("#navi").attr("top"))+1); var px = pos * height; $("#navi").attr("top", pos); $("#navi").animate({ top: ((px * -1) + "px") }, 1000, $("#navi").attr("motion"), function() { var pos = parseInt($("#navi").attr("top")); var total = parseInt($("#navi").attr("total")); if (pos>=total) { $("#navi").attr("top", 0); $("#navi").css("top", "0px"); } } ); } function my_album(){ if ($("#album:animated").size()) return false; var width = $("#album").attr("width"); var pos = (parseInt($("#album").attr("top"))+1); var px = pos * width; $("#album").attr("top", pos); $("#album").animate({ left: ((px * -1) + "px") }, 1000, $("#album").attr("motion"), function() { var pos = parseInt($("#album").attr("top")); var total = parseInt($("#album").attr("total")); if (pos>=total) { $("#album").attr("top", 0); $("#album").css("left", "0px"); } } ); } </script> </head> <body> <div class="body"> <div class="demo"> <div id="navi_tool"> <div id="navi"> <div><a href="http://hompy.info/574" target="_blank">1. jQuery 애니메이트로 만들어보는 이미지 슬라이더와 전광판</a></div> <div><a href="http://hompy.info/569" target="_blank">2. 심심풀이용 플래시 타워 디펜스 게임들과 플레이 동영상</a></div> <div><a href="http://hompy.info/570" target="_blank">3. 잘만든 인기 플래시 게임 버블탱크2와 젬크래프트</a></div> <div><a href="http://hompy.info/571" target="_blank">4. 포털에서 운영하는 채용정보 검색, 취업 검색, 취업 센터</a></div> <div><a href="http://hompy.info/572" target="_blank">5. jQuery를 활용한 홈페이지 개발의 기본인 입력폼 제작</a></div> </div> </div> <br /> <div id="album_tool"> <div id="album"> <div><a href="http://hompy.info/24" target="_blank"><img src='http://www.hompydesign.com/hompydesign.com?no=1' width=190></a></div> <div><a href="http://hompy.info/24" target="_blank"><img src='http://www.hompydesign.com/hompydesign.com?no=2' width=190></a></div> <div><a href="http://hompy.info/24" target="_blank"><img src='http://www.hompydesign.com/hompydesign.com?no=3' width=190></a></div> <div><a href="http://hompy.info/24" target="_blank"><img src='http://www.hompydesign.com/hompydesign.com?no=4' width=190></a></div> <div><a href="http://hompy.info/24" target="_blank"><img src='http://www.hompydesign.com/hompydesign.com?no=5' width=190></a></div> <div><a href="http://hompy.info/24" target="_blank"><img src='http://www.hompydesign.com/hompydesign.com?no=6' width=190></a></div> <div><a href="http://hompy.info/24" target="_blank"><img src='http://www.hompydesign.com/hompydesign.com?no=7' width=190></a></div> <div><a href="http://hompy.info/24" target="_blank"><img src='http://www.hompydesign.com/hompydesign.com?no=8' width=190></a></div> </div> </div> <br /> <div id="motion_tool"> <a href="#">easeInQuad</a> <a href="#">easeOutQuad</a> <a href="#">easeInOutQuad</a> <a href="#">easeInCubic</a> <a href="#">easeOutCubic</a> <a href="#">easeInOutCubic</a> <a href="#">easeInQuart</a> <a href="#">easeOutQuart</a> <a href="#">easeInOutQuart</a> <a href="#">easeInQuint</a> <a href="#">easeOutQuint</a> <a href="#">easeInOutQuint</a> <a href="#">easeInSine</a> <a href="#">easeOutSine</a> <a href="#">easeInOutSine</a> <a href="#">easeInExpo</a> <a href="#">easeOutExpo</a> <a href="#">easeInOutExpo</a> <a href="#">easeInCirc</a> <a href="#">easeOutCirc</a> <a href="#">easeInOutCirc</a> <a href="#">easeInElastic</a> <a href="#">easeOutElastic</a> <a href="#">easeInOutElastic</a> <a href="#">easeInBack</a> <a href="#">easeOutBack</a> <a href="#">easeInOutBack</a> <a href="#">easeInBounce</a> <a href="#">easeOutBounce</a> <a href="#">easeInOutBounce</a> </div> </div> </body> </html> |
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/574
(0) (0)
jQuery 자바스크립트 프레임워크 라이브러리를 이용하면 홈페이지 만들기의 기본인 입력폼을 비교적 손쉽게 만들 수 있습니다. 물론 단순한 양식 뿐만 아니라 입력 값이 유효한지 점검한다던지 날짜를 손쉽게 입력할 수 있도록 달력을 뿌려준다거나 새창 팝업 대신 레이어 팝업창을 손쉽게 띄워주고 있습니다. 그리고 파일 업로드 버튼을 이미지로 처리하는 부분과 버튼의 색이 바뀌고 입력창 크기를 조절하는 간단한 액션을 추가해서 생동감을 심어주는 부분도 있습니다. 아래 동영상을 보면 어떤 모습인지 확인 할 수 있고 이 영상은 동영상 아래 보이는 소스를 실행한 것입니다. 이에 대해 관심이 있는 분들은 jQuery 홈페이지에 있는 문서들을 참고하세요.
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/572
(0) (0)
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="웹프로그래머" /> <meta name="description" content="홈페이지 정보 블로그" /> <meta name="keywords" content="자바스크립트,jQuery,JavaScript,UI,datepicker,dialog,validate,filestyle,effects" /> <meta name="classification" content="자바스크립트,jQuery,JavaScript,UI,datepicker,dialog,validate,filestyle,effects" /> <title>홈페이지 정보 블로그 데모</title> <link type="text/css" href="/theme/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.bgiframe.js"></script> <script type="text/javascript" src="/js/jquery.validate.js"></script> <script type="text/javascript" src="/js/jquery.filestyle.js"></script> <script type="text/javascript" src="/ui/ui.core.js"></script> <script type="text/javascript" src="/ui/ui.datepicker.js"></script> <script type="text/javascript" src="/ui/ui.draggable.js"></script> <script type="text/javascript" src="/ui/ui.resizable.js"></script> <script type="text/javascript" src="/ui/ui.dialog.js"></script> <script type="text/javascript" src="/ui/effects.core.js"></script> <style type="text/css"> * { margin: 0; padding: 0; vertical-align: middle; } a:link {color:#3366CC; text-decoration:none;} a:active {color:#FF9966; text-decoration:none;} a:visited {color:#3366CC; text-decoration:none;} a:hover {color:#FF9966; text-decoration:underline;} img { border: 0; } body {font-family:돋움, verdana, arial, helvetica, sans-serif; font-size:12px; padding:10px;} label {font-family:돋움, verdana, arial, helvetica, sans-serif; font-size:11px;} label.error { float: none; color: red; background: url('/images/icon_alert.gif') no-repeat left; padding-left:16px; padding-top:1px;} .my_input_text { border-color:#999999; border-width: 1px; border-style:solid; font-size:12px; padding:2px 1px 1px;; background-color:#F9F9F9;} .my_input_text.error { border-color:#FFC22B; background-color:#FFEDD6; } .my_input_select { font-size:12px; background-color:#F9F9F9;} .my_input_select.error { background-color:#FFEDD6; } .my_input_check { background-color:#FFFFFF; } .my_input_check.error { background-color:#FFFFFE; } #my_title {font-size:14px; float:left;} #my_content {padding:10px; width:430px; border-color:#EFEFEF; border-width: 3px; border-style:solid;} #my_dialog {display:none} #dialog_link {float:right; font-size:11px; padding-top:4px;} #in_date {width:80px; margin-right:2px;} #in_title {width:350px;} #in_content {width:400px; height:60px;} #in_form {magin:0px;} .my_line {height:1px; background-color:#EFEFEF;} .my_line2 {height:2px; background-color:#C4D2E2;} #bt_submit {border:0px solid #EFEFEF; color:white; background-color:#666666; font-size:12px; padding:2px; cursor:pointer;} #bt_reset {border:0px solid #EFEFEF; color:white; background-color:#666666; font-size:12px; padding:2px; cursor:pointer;} #bt_plus_height {cursor:pointer; border:0px;} #bt_minus_height {cursor:pointer; border:0px;} .ui-datepicker-calendar td {padding:1px;} .ui-datepicker-trigger {cursor:pointer;} </style> <script type="text/javascript"> $.validator.addMethod("alphanumeric", function(value, element) { return this.optional(element) || /^\w[\w\s]*$/.test(value); }, "알파벳이나 숫자를 입력하세요."); $.validator.addMethod("mbmaxlength", function(value, element, param) { return this.optional(element) || value.length+(escape(value)+"%u").match(/%u/g).length-1<=param; }, "글자수가 초과 되었습니다."); $.ui.dialog.defaults.bgiframe = true; $(document).ready(function(){ $("#in_file").filestyle({ image: "/images/icon_filefind.gif", imageheight : 20, imagewidth : 66, width : 284 }); $('#dialog').dialog({ autoOpen: false, width: 360, modal: true, bgiframe: true, overlay: { backgroundColor: '#000', opacity: 0.5 }, buttons: { "확인": function() { $(this).dialog("close"); }, "닫기": function() { $(this).dialog("close"); } } }); $('#dialog_link').click(function(){ $('#dialog').dialog('open'); return false; }); $("#in_date").datepicker({ maxDate: '+30d', minDate: '-0d', monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'], dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], showMonthAfterYear:true, showOn: "both", showAnim: "show", showOptions: {}, duration: 200, dateFormat: 'yy-mm-dd', buttonImage: "/ui/images/calendar.gif", buttonText: '달력', buttonImageOnly: true, onSelect: function(date) { var date_arr = date.split('-'); if (date_arr.length==3){ var date_str = date_arr[0]+'년 '+date_arr[1]+'월 '+date_arr[2]+'일'; $("#span_in_last_date").html(date_str); } }, onClose: function(dateText) { $('#in_date').valid(); } }) $("#in_form").validate({ submitHandler: function(form) { if (!confirm("저장하겠습니까?")) return false; form.submit(); return true; }, rules: { in_format: { required: true }, in_open: { required: true }, in_part: { required: true }, in_date: { required: true }, in_title: { required: true, minlength: 2, maxlength: 100 }, in_content: { required: true, minlength: 2, mbmaxlength: 8000 } }, messages: { in_format: { required: "형식을 선택하세요.<br>" }, in_open: { required: "공개방법을 선택하세요.<br>" }, in_part: { required: "말머리를 선택하세요.<br>" }, in_date: { required: "날짜를 입력하세요.<br>" }, in_title: { required: "제목을 입력하세요.<br>", minlength: "2자 이상으로 입력하세요.<br>", maxlength: "100자 이하로 입력하세요.<br>" }, in_content: { required: "내용을 입력하세요.<br>", minlength: "2자 이상으로 입력하세요.<br>", mbmaxlength: "4000자 이하로 입력하세요.<br>" } }, errorPlacement: function(error, element) { var er = element.attr("name"); error.appendTo( element.parent().find("span.my_error_display") ); } }); $('#bt_plus_height').click(function(){ var h = parseInt($('#in_content').css("height")); if (h<400) $('#in_content').animate({height:h + 50},200,null); }); $('#bt_minus_height').click(function(){ var h = parseInt($('#in_content').css("height")); if (h>100) $('#in_content').animate({height:h - 50},200,null); }); $("#bt_submit,#bt_reset").hover( function (){ $(this).stop(); $(this).animate({ backgroundColor: "#660000" }, 500); }, function (){ $(this).stop(); $(this).animate({ backgroundColor: "#666666" }, 500); } ); }); </script> </head> <body> <div id="my_container"> <div id="my_header"> </div> <div id="my_sidebar"> </div> <div id="my_content"> <form name="in_form" id="in_form" method="post" enctype="multipart/form-data"> <table id="my_table"> <tr><th colspan="2"><span id="my_title">자유게시판</span> <a href="#" id="dialog_link">도움말</a></th></tr> <tr><td colspan="2" class="my_line2"></td></tr> <tr><td>형식:</td><td><input type="checkbox" name="in_format" id="in_format" value="HTML" class="my_input_check" />HTML <input type="checkbox" name="in_format" id="in_format" value="BR" class="my_input_check" />BR <span class="my_error_display"></span></td></tr> <tr><td colspan="2" class="my_line"></td></tr> <tr><td>공개:</td><td><input type="radio" name="in_open" id="in_open" value="1" class="my_input_check" />전체 <input type="radio" name="in_open" id="in_sex" value="2" class="my_input_check" />일촌만 <span class="my_error_display"></span></td></tr> <tr><td colspan="2" class="my_line"></td></tr> <tr><td>말머리:</td><td> <select name="in_part" id="in_part" class="my_input_select"> <option value="">선택</option> <option value="1">잡담</option> <option value="2">의견</option> <option value="9">안내</option> </select> <span class="my_error_display"></span> </td></tr> <tr><td colspan="2" class="my_line"></td></tr> <tr><td>날짜:</td><td><input type="text" name="in_date" id="in_date" class="my_input_text" readonly /> <span class="my_error_display"></span></td></tr> <tr><td colspan="2" class="my_line"></td></tr> <tr><td>파일:</td><td><span class="my_error_display"></span><input type="file" name="in_file" id="in_file" class="my_input_text" /></td></tr> <tr><td colspan="2" class="my_line"></td></tr> <tr><td>제목:</td><td><span class="my_error_display"></span><input type="text" name="in_title" id="in_title" class="my_input_text" /></td></tr> <tr><td colspan="2" class="my_line"></td></tr> <tr><td colspan="2"> <img src="/images/icon_down.gif" id="bt_plus_height"> <img src="/images/icon_up.gif" id="bt_minus_height"> </td></tr> <tr><td colspan="2"> <span class="my_error_display"></span> <textarea name="in_content" id="in_content" class="my_input_text"></textarea></td></tr> <tr><td colspan="2"><input id='bt_submit' type="submit" value="저장" /> <input id="bt_reset" type="reset" value="취소" /></td></tr> </table> </form> </div> <div id="my_footer"> </div> </div> <div id="dialog" title="자유게시판 도움말"> 자유게시판에 대해 설명합니다. </div> </body> </html> |
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/572
(0) (0)
자바스크립트 라이브러리인 jQuery UI 위젯(Widgets)을 이용해서 달력(Calendar)과 날짜입력기(DatePicker)를 내 블로그나 홈페이지에 붙여 활용해보세요. 쓸만한 달력을 직접 만들려면 상당한 공을 드려야 하지만 jQuery UI 위젯을 활용하면 손쉽게 달력을 이용할 수 있을 뿐만 아니라 다양한 설정도 할 수 있으며 스킨도 비교적 손쉽게 교체할 수 있습니다. 하단 예제 소스 코드와 실행 화면을 참고하시면 사용법을 대략 짐작하실 수 있을 것입니다.
참고로 자바스크립트 프레임워크 라이브러리에는 Prototype, Script.aculo.us, jQuery, YUI, Dojo Toolkit, Ext JS, Google Web Toolkit, MooTools 등이 있습니다. 그리고 달력을 직접 제작해보려면 이전에 소개한 "PHP 또는 자바스크립트로 달력 만들기 소스 코드" 게시물을 참고하세요.
[jQuery UI 홈페이지]
http://ui.jquery.com/
http://ui.jquery.com/demos/datepicker
[jQuery UI DatePicker 실행 화면]
http://www.hompydesign.com/javascript/calendar/
[jQuery UI DatePicker 예제 소스 코드]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/566
(0) (0)
참고로 자바스크립트 프레임워크 라이브러리에는 Prototype, Script.aculo.us, jQuery, YUI, Dojo Toolkit, Ext JS, Google Web Toolkit, MooTools 등이 있습니다. 그리고 달력을 직접 제작해보려면 이전에 소개한 "PHP 또는 자바스크립트로 달력 만들기 소스 코드" 게시물을 참고하세요.
[jQuery UI 홈페이지]
http://ui.jquery.com/
http://ui.jquery.com/demos/datepicker
[jQuery UI DatePicker 실행 화면]
http://www.hompydesign.com/javascript/calendar/
[jQuery UI DatePicker 예제 소스 코드]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Datepicker</title>
<link type="text/css" href="/ui/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/ui/ui.core.js"></script>
<script type="text/javascript" src="/ui/effects.core.js"></script>
<script type="text/javascript" src="/ui/effects.blind.js"></script>
<script type="text/javascript" src="/ui/effects.drop.js"></script>
<script type="text/javascript" src="/ui/effects.explode.js"></script>
<script type="text/javascript" src="/ui/ui.datepicker.js"></script>
<style>
body {font-size: 62.5%; font-family:"Dotum", "Tahoma";}
.body {width:440px; height:280px; border:1px solid #CCCCCC; padding:10px; background-color:#FAFDE2}
.demo {width:330px; border:1px solid #CCCCCC; padding:10px; background-color:#FFFFFF}
.text {font-size:12px; margin-right:4px; width:80px; line-height:20px;}
.datepicker_input1 {border:1px solid #999999; margin-right:4px; width:70px;}
.datepicker_input2 {border:1px solid #999999; margin-right:4px; width:70px;}
.datepicker1_div {margin-right:10px; float:left;}
</style>
<script type="text/javascript">
$.datepicker.setDefaults({
//monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
//dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
//showMonthAfterYear:true,
dateFormat: 'yy-mm-dd',
buttonImageOnly: true,
buttonText: "달력",
buttonImage: "/ui/images/calendar.gif"
});
$(document).ready(function(){
$("#datepicker2").val($.datepicker.formatDate($.datepicker.ATOM, new Date(2009, 1 - 1, 18)));
$("#datepicker1").datepicker({
inline: true,
defaultDate: new Date(2009, 1 - 1, 18),
onSelect: function(date) { $("#datepicker2").val(date); }
})
$("#datepicker2").datepicker({
defaultDate: new Date(2009, 1 - 1, 27),
showOn: "both", // focus, button, both
showAnim: "blind", // blind, clip, drop, explode, fold, puff, slide, scale, size, pulsate, bounce, highlight, shake, transfer
showOptions: {direction: 'horizontal'},
duration: 200
})
$("#datepicker3").datepicker({
defaultDate: new Date(2009, 1 - 1, 28),
showOn: "both", // focus, button, both
showAnim: "drop", // blind, clip, drop, explode, fold, puff, slide, scale, size, pulsate, bounce, highlight, shake, transfer
showOptions: {direction: 'horizontal'},
duration: 200
})
$("#datepicker4").datepicker({
defaultDate: new Date(2009, 1 - 1, 29),
showOn: "button", // focus, button, both
showAnim: "explode",
showOptions: {pieces: 4},
duration: 500
})
$(".datepicker_input2").datepicker({
defaultDate: new Date(2009, 1 - 1, 30),
showOn: "both", // focus, button, both
showAnim: "show", // show, fadeIn, slideDown
duration: 200
})
});
</script>
</head>
<body>
<div class="body">
<div class="demo">
<div id="datepicker1" class="datepicker1_div" /></div>
<span class="text">날짜</span> <input type="text" id="datepicker2" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" id="datepicker3" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" id="datepicker4" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" class="datepicker_input2"><br />
</div>
<br />
<span class="text">
jQuery UI Datepicker<br />
jQuery UI 날짜 입력기<br />
jQuery UI Calendar, 달력<br />
</span>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Datepicker</title>
<link type="text/css" href="/ui/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/ui/ui.core.js"></script>
<script type="text/javascript" src="/ui/effects.core.js"></script>
<script type="text/javascript" src="/ui/effects.blind.js"></script>
<script type="text/javascript" src="/ui/effects.drop.js"></script>
<script type="text/javascript" src="/ui/effects.explode.js"></script>
<script type="text/javascript" src="/ui/ui.datepicker.js"></script>
<style>
body {font-size: 62.5%; font-family:"Dotum", "Tahoma";}
.body {width:440px; height:280px; border:1px solid #CCCCCC; padding:10px; background-color:#FAFDE2}
.demo {width:330px; border:1px solid #CCCCCC; padding:10px; background-color:#FFFFFF}
.text {font-size:12px; margin-right:4px; width:80px; line-height:20px;}
.datepicker_input1 {border:1px solid #999999; margin-right:4px; width:70px;}
.datepicker_input2 {border:1px solid #999999; margin-right:4px; width:70px;}
.datepicker1_div {margin-right:10px; float:left;}
</style>
<script type="text/javascript">
$.datepicker.setDefaults({
//monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
//dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
//showMonthAfterYear:true,
dateFormat: 'yy-mm-dd',
buttonImageOnly: true,
buttonText: "달력",
buttonImage: "/ui/images/calendar.gif"
});
$(document).ready(function(){
$("#datepicker2").val($.datepicker.formatDate($.datepicker.ATOM, new Date(2009, 1 - 1, 18)));
$("#datepicker1").datepicker({
inline: true,
defaultDate: new Date(2009, 1 - 1, 18),
onSelect: function(date) { $("#datepicker2").val(date); }
})
$("#datepicker2").datepicker({
defaultDate: new Date(2009, 1 - 1, 27),
showOn: "both", // focus, button, both
showAnim: "blind", // blind, clip, drop, explode, fold, puff, slide, scale, size, pulsate, bounce, highlight, shake, transfer
showOptions: {direction: 'horizontal'},
duration: 200
})
$("#datepicker3").datepicker({
defaultDate: new Date(2009, 1 - 1, 28),
showOn: "both", // focus, button, both
showAnim: "drop", // blind, clip, drop, explode, fold, puff, slide, scale, size, pulsate, bounce, highlight, shake, transfer
showOptions: {direction: 'horizontal'},
duration: 200
})
$("#datepicker4").datepicker({
defaultDate: new Date(2009, 1 - 1, 29),
showOn: "button", // focus, button, both
showAnim: "explode",
showOptions: {pieces: 4},
duration: 500
})
$(".datepicker_input2").datepicker({
defaultDate: new Date(2009, 1 - 1, 30),
showOn: "both", // focus, button, both
showAnim: "show", // show, fadeIn, slideDown
duration: 200
})
});
</script>
</head>
<body>
<div class="body">
<div class="demo">
<div id="datepicker1" class="datepicker1_div" /></div>
<span class="text">날짜</span> <input type="text" id="datepicker2" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" id="datepicker3" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" id="datepicker4" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" class="datepicker_input2"><br />
</div>
<br />
<span class="text">
jQuery UI Datepicker<br />
jQuery UI 날짜 입력기<br />
jQuery UI Calendar, 달력<br />
</span>
</div>
</body>
</html>
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/566
(0) (0)
TAG clientHeight,
clientLeft,
clientTop,
clientWidth,
DOM,
javascript,
offsetHeight,
offsetWidth,
객체,
자바스크립트
동적 HTML 객체 모델 요소의 위치와 면적 계산Understanding Properties That Measure Element Dimension and Location
.jpg)
.jpg)
.jpg)
예제 테스트 링크
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/measure.htm
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD><TITLE>Measure for Measure</TITLE> <SCRIPT type="text/javascript"> <!-- var lastfunc = 1; function split() { switch(lastfunc) { case 1: one(); break; case 2: two(); break; case 3: three(); break; case 4: four(); break; default: five(); break; } } function iebody() { // Sense the difference between Strict and Quirks mode return (document.compatMode != "BackCompat"? document.documentElement : document.body); } function one() { lastfunc = 1; report.value = "The style object contains information that was set in the inline style to position the object. The following values are reported for the various position and dimension properties on the style object for the DIV above:" + "\n\n"; report.value += " mydiv.style.top (string) = " + mydiv.style.top + "\n"; report.value += " mydiv.style.left (string) = " + mydiv.style.left + "\n"; report.value += " mydiv.style.height (string) = " + mydiv.style.height + "\n"; report.value += " mydiv.style.width (string) = " + mydiv.style.width + "\n"; report.value += " mydiv.style.pixelTop = " + mydiv.style.pixelTop + "\n"; report.value += " mydiv.style.pixelLeft = " + mydiv.style.pixelLeft + "\n"; report.value += " mydiv.style.pixelHeight = " + mydiv.style.pixelHeight + "\n"; report.value += " mydiv.style.pixelWidth = " + mydiv.style.pixelWidth + "\n"; report.value += " mydiv.style.posTop = " + mydiv.style.posTop + "\n"; report.value += " mydiv.style.posLeft = " + mydiv.style.posLeft + "\n"; report.value += " mydiv.style.posHeight = " + mydiv.style.posHeight + "\n"; report.value += " mydiv.style.posWidth = " + mydiv.style.posWidth + "\n"; // Cancel the generic click event for the body window.event.cancelBubble = true; } function two() { lastfunc = 2; report.value = "Offset properties for the DIV above: \n"; report.value += " mydiv.offsetLeft = " + mydiv.offsetLeft + "\n"; report.value += " mydiv.offsetTop = " + mydiv.offsetTop + "\n"; report.value += " mydiv.offsetHeight = " + mydiv.offsetHeight + "\n"; report.value += " mydiv.offsetWidth = " + mydiv.offsetWidth + "\n"; report.value += "Offset properties for the BODY: \n"; report.value += " offsetLeft = " + iebody().offsetLeft + "\n"; report.value += " offsetTop = " + iebody().offsetTop + "\n"; report.value += " offsetHeight = " + iebody().offsetHeight + "\n"; report.value += " offsetWidth = " + iebody().offsetWidth + "\n"; // Cancel the generic click event for the body window.event.cancelBubble = true; } function three() { lastfunc = 3; report.value = "Scroll values for the DIV above: \n"; report.value += " mydiv.scrollLeft = " + mydiv.scrollLeft + "\n"; report.value += " mydiv.scrollTop = " + mydiv.scrollTop + "\n"; report.value += " mydiv.scrollHeight = " + mydiv.scrollHeight + "\n"; report.value += " mydiv.scrollWidth = " + mydiv.scrollWidth + "\n"; report.value += "Scroll values for the BODY: \n"; report.value += " scrollLeft = " + iebody().scrollLeft + "\n"; report.value += " scrollTop = " + iebody().scrollTop + "\n"; report.value += " scrollHeight = " + iebody().scrollHeight + "\n"; report.value += " scrollWidth = " + iebody().scrollWidth + "\n"; // Cancel the generic click event for the body window.event.cancelBubble = true; } function four() { lastfunc = 4; report.value = ""; report.value += " clientHeight for the BODY: " + iebody().clientHeight + "\n"; report.value += " clientWidth for the BODY:" + iebody().clientWidth + "\n"; report.value += " clientTop for the BODY:" + iebody().clientTop + "\n"; report.value += " clientLeft for the BODY:" + iebody().clientLeft + "\n"; report.value += " clientHeight for this TEXTAREA:" + report.clientHeight + "\n"; report.value += " clientWidth for this TEXTAREA: " + report.clientWidth + "\n"; report.value += " clientTop for this TEXTAREA:" + report.clientTop + "\n"; report.value += " clientLeft for this TEXTAREA:" + report.clientLeft + "\n"; // Cancel the generic click event for the body window.event.cancelBubble = true; } function five() { lastfunc = 5; report.value = "The following x and y values are passed on the event object for this mouse click event: \n"; report.value += " window.event.x = " + window.event.x + "\n"; report.value += " window.event.y = " + window.event.y + "\n"; report.value += " window.event.offsetX = " + window.event.offsetX + "\n"; report.value += " window.event.offsetY = " + window.event.offsetY + "\n"; report.value += " window.event.screenX = " + window.event.screenX + "\n"; report.value += " window.event.screenY = " + window.event.screenY + "\n"; report.value += " window.event.clientX = " + window.event.clientX + "\n"; report.value += " window.event.clientY = " + window.event.clientY + "\n"; // Cancel the generic click event for the body window.event.cancelBubble = true; } --> </script> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1"> <META NAME="AUTHOR" CONTENT="InetSDK"> <META NAME="MS.LOCALE" CONTENT="EN-US"> <META NAME="ROBOTS" CONTENT="noindex"> <!-- SAMPLE_STYLE_START --> <LINK REL="stylesheet" HREF="/workshop/samples/samples.css" TYPE="text/css"> <!-- SAMPLE_STYLE_END --> <STYLE type="text/css"> BODY { margin:0; border:10px solid #99ccff; padding:10px; font-family:arial; font-size:70%; background-color:white; color:black; } BUTTON { margin:2px; } #mydiv { overflow:scroll; margin:20px auto; background-color:white; padding:20px; border:10px solid #99ccff; font-size:150%; } #report { margin-top:25px; border:1px solid #cccccc; font-family:arial; width:90%; } </STYLE> </HEAD> <!--TOOLBAR_START--> <!--TOOLBAR_EXEMPT--> <!--TOOLBAR_END--> <BODY onload="two()" onscroll="three()" onresize='split()' onclick="five()"> <DIV class="body"> <CENTER> <!-- This DIV uses an inline style to test the style object above. --> <DIV id="mydiv" onclick="one()" onscroll="three()" style="top:5px; left:5px; height:8em; width:90%;"> DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! </DIV> <button onclick=one()>Style Positions</button> <button onclick=two()>Object Offset</button> <button onclick=three()>Scroll Positions</button> <button onclick=four()>Client Area</button> <button onclick=five()>Event Object</button> <TEXTAREA id="report" rows=12 style=""></TEXTAREA> </CENTER> <!-- START_PAGE_FOOTER --> <BR><BR><BR> <p class="viewsource">[Right-click and choose View Source from the shortcut menu.] </p> <A class="copyright" HREF="http://www.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm">© 2007 Microsoft Corporation. All rights reserved. Terms of use.</A> <!-- END_PAGE_FOOTER --> </DIV> </BODY> </HTML> |
(0) (0)|
※ 녹색은 네츠케이프, 혹은 익스플로러 전용으로만 사용되는 객체(속성,메소드)입니다 | |||
|
객체(Object) |
속성(Property) |
메소드(Method) |
이벤트핸들러 (Event Handler) |
|
name |
|
| |
|
text | |||
|
x | |||
|
y | |||
|
anchors array |
length |
|
|
|
|
applet's methods |
| |
|
applets array |
length |
|
|
|
hash |
|
onClick | |
|
host |
onmouseOut | ||
|
gostname |
onmouseOver | ||
|
href |
| ||
|
pathname |
| ||
|
port |
| ||
|
protocol |
| ||
|
search |
| ||
|
target |
| ||
|
length |
concat |
| |
|
join | |||
|
pop | |||
|
push | |||
|
reverse | |||
|
shift | |||
|
slice | |||
|
sort | |||
|
unshjft | |||
|
form |
blur |
onClick | |
|
name |
click |
onmouseDown | |
|
type |
focus |
onmouseUp | |
|
value |
|
| |
|
checked |
blur |
onClick | |
|
defaultChecked |
click |
onmouseDown | |
|
form |
focus |
onmouseUp | |
|
name |
|
| |
|
type |
|
| |
|
value |
|
| |
|
|
getDate |
| |
|
getDay | |||
|
getFullYear | |||
|
getHours | |||
|
getMilliseconds | |||
|
getMinutes | |||
|
getMonth | |||
|
getSeconds | |||
|
getTime | |||
|
getTimezoneOffset | |||
|
getUTCDate | |||
|
getUTCDay | |||
|
getUTCFullYear | |||
|
getUTCHours | |||
|
getUTCMilliseconds | |||
|
getUTCMinutes | |||
|
getUTCMonth | |||
|
getUTCSeconds | |||
|
getYear | |||
|
parse | |||
|
setDate | |||
|
setFullYear | |||
|
setHours | |||
|
setMilliseconds | |||
|
setMinutes | |||
|
setMonth | |||
|
setSeconds | |||
|
setTime | |||
|
setUTCDate | |||
|
setUTCHours | |||
|
setUTCMilliseconds | |||
|
setUTCMinutes | |||
|
setUTCMonth | |||
|
setUTCSeconds | |||
|
setYear | |||
|
goGMTString | |||
|
toLocaleString | |||
|
toString | |||
|
toUTCString | |||
|
UTC | |||
|
valueOf | |||
|
activeElement |
clear |
| |
|
alinkColor |
close | ||
|
all |
createElement | ||
|
Anchor |
createStylesheet | ||
|
anchors |
elementFromPoint | ||
|
Applet |
getSelection | ||
|
applets |
open | ||
|
Area |
write | ||
|
bgColor |
writeIn | ||
|
body |
| ||
|
charset |
| ||
|
children |
| ||
|
cookie |
| ||
|
defaultCharset |
| ||
|
domain |
| ||
|
embed |
| ||
|
embeds |
| ||
|
expando |
| ||
|
fgColor |
| ||
|
Form |
| ||
|
forms |
| ||
|
Image |
| ||
|
images |
| ||
|
lastModified |
| ||
|
Layer |
| ||
|
layers |
| ||
|
linkColor |
| ||
|
Link |
| ||
|
links |
| ||
|
location |
| ||
|
parentWindow |
| ||
|
plugins |
| ||
|
readyState |
| ||
|
referrer |
| ||
|
scripts |
| ||
|
selection |
| ||
|
styleSheets |
| ||
|
title |
| ||
|
URL |
| ||
|
vlinkColor |
| ||
|
form |
blur |
onBlur | |
|
name |
focus |
onFocus | |
|
type |
select |
onSelect | |
|
value |
|
| |
|
action |
reset |
onReset | |
|
Button |
submit |
onSubmit | |
|
Checkbox |
|
| |
|
elements |
|
| |
|
encoding |
|
| |
|
FileUpload |
|
| |
|
Hidden |
|
| |
|
length |
|
| |
|
method |
|
| |
|
name |
|
| |
|
Password |
|
| |
|
Radio |
|
| |
|
Reset |
|
| |
|
Select |
|
| |
|
Submit |
|
| |
|
target |
|
| |
|
Text |
|
| |
|
Textarea |
|
| |
|
forms array |
length |
|
|
|
frames array |
length |
|
|
|
form |
|
| |
|
name | |||
|
type | |||
|
value | |||
|
current |
back |
| |
|
length |
foward | ||
|
next |
go | ||
|
previous |
| ||
|
history array |
length |
|
|
|
border |
|
onAbort | |
|
complete |
onError | ||
|
height |
onLoad | ||
|
hspace |
| ||
|
lowsrc |
| ||
|
name |
| ||
|
src |
| ||
|
vspace |
| ||
|
width |
| ||
|
x |
| ||
|
y |
| ||
|
images array |
length |
|
|
|
above |
load |
onBlur | |
|
background |
moveAbove |
onFocus | |
|
below |
moveBelow |
onmouseOut | |
|
bgColor |
moveBy |
onmouseOver | |
|
clip |
moveTo |
onmouseUp | |
|
document |
moveToAbsolute |
| |
|
hidden |
resizeBy |
| |
|
left |
resizeTo |
| |
|
name |
|
| |
|
pageX |
|
| |
|
pageY |
|
| |
|
parentLayer |
|
| |
|
siblingAbove |
|
| |
|
siblingBelow |
|
| |
|
src |
|
| |
|
top |
|
| |
|
visibility |
|
| |
|
window |
|
| |
|
x |
|
| |
|
y |
|
| |
|
zindex |
|
| |
|
layers array |
length |
|
|
|
hash |
|
onClick | |
|
host |
onmouseOut | ||
|
hostname |
onmouseOver | ||
|
href |
| ||
|
pathname |
| ||
|
port |
| ||
|
protocol |
| ||
|
search |
| ||
|
target |
| ||
|
text |
| ||
|
x |
| ||
|
y |
| ||
|
links array |
length |
|
|
|
hash |
reload |
| |
|
host |
replace | ||
|
hostname |
| ||
|
href |
| ||
|
pathname |
| ||
|
port |
| ||
|
protocol |
| ||
|
search |
| ||
|
E |
abs |
| |
|
LN2 |
acos | ||
|
LN10 |
asin | ||
|
LOG2E |
atan | ||
|
LOG10E |
atan2 | ||
|
PI |
ceil | ||
|
SQRT1_2 |
cos | ||
|
SQRT2 |
exp | ||
|
|
floor | ||
|
|
log | ||
|
|
max | ||
|
|
min | ||
|
|
pow | ||
|
|
random | ||
|
|
round | ||
|
|
sin | ||
|
|
sqrt | ||
|
|
tan | ||
|
description |
|
| |
|
enabledPlugin | |||
|
suffixes | |||
|
type | |||
|
mimeTypes array |
length |
|
|
|
appCodeName |
javaEnabled |
| |
|
appMinorVersion |
preference | ||
|
appName |
savePreferences | ||
|
appVersion |
taintEnabled | ||
|
browserLanguage |
| ||
|
cookieEnabled |
| ||
|
cpuClass |
| ||
|
languages |
| ||
|
mimeTypes |
| ||
|
platform |
| ||
|
plugins |
| ||
|
systemLanguage |
| ||
|
userAgent |
| ||
|
userLanguage |
| ||
|
userProfile |
| ||
|
MAX_VALUE |
toString |
| |
|
MIN_VALUE |
valueOf | ||
|
NaN |
| ||
|
NEGATIVE_INFINITY |
| ||
|
POSITIVE_INFINITY |
| ||
|
defaultSelected |
|
| |
|
index | |||
|
selected | |||
|
selectedIndex | |||
|
text | |||
|
value | |||
|
options array |
length |
|
|
|
defaultValue |
blur |
onBlur | |
|
form |
focus |
onChange | |
|
name |
select |
onFocus | |
|
type |
|
onKeydown | |
|
value |
|
onKeypress | |
|
|
|
||