'자바스크립트'에 해당되는 글 28건

  1. 2009/10/10 홈피에 자바스크립트로 만든 색상선택기(ColorPicker) 붙여보기. (6)
  2. 2009/07/05 시계 가젯을 만들어 보고 구글과 블로그에 띄워보자!
  3. 2009/06/26 야후 세계 지도 활용하기, 야후 거기 지도 오픈 API 매시업 (1)
  4. 2009/06/25 다음 지도를 내 것으로 만들기, 다음 지도 API 매쉬업 (2)
  5. 2009/06/24 나만의 네이버 지도 만들기, 지도 API 매쉬업(Mashup) (4)
  6. 2009/06/07 jQuery 로 텍스트 입력 박스(TextArea)에 크기 조절 막대 추가하기. (1)
  7. 2009/03/22 jQuery 애니메이트로 만들어보는 이미지 슬라이더와 전광판 (1)
  8. 2009/03/09 jQuery를 활용한 홈페이지 개발의 기본인 입력폼 제작 (6)
  9. 2009/01/27 jQuery UI로 달력과 날짜입력기(DatePicker)를 붙여보기.
  10. 2009/01/26 PHP 또는 자바스크립트로 달력 만들기 소스 코드 (5)
  11. 2009/01/04 동적 HTML 객체 모델 요소의 위치와 면적 계산
  12. 2009/01/04 자바스크립트, 객체의 속성과 메소드와 이벤트 핸들러
  13. 2009/01/04 HTML과 자바스크립트에서 스타일시트 속성 (2)
  14. 2009/01/03 자바스크립트, 모서리가 둥근 테이블 만들기.
  15. 2008/12/17 3일 동안 발행한 홈페이지 정보 오픈캐스트
  16. 2008/10/15 자바스크립트 복수 게시물 더보기/접기(more/less) 소스 (6)
  17. 2008/09/30 자바스크립트로 아날로그 시계 만들기 (1)
  18. 2008/09/27 클립보드 복사 기능 구현을 위한 소스 코드 (1)
  19. 2008/03/26 자바스크립트 createElement, insertBefore, replaceChild, appendChild (1)
  20. 2008/01/06 움직이는 막대그래프 자바스크립트 소스 (1)
  21. 2008/01/03 플래시를 제어하는 자바스크립트 소스 코드 (1)
  22. 2007/12/28 자바스크립트로 구성된 이미지 슬라이더입니다. (9)
  23. 2007/12/13 현재 디렉토리(폴더) 파일 목록 보기, PHP소스
  24. 2007/11/30 블로그 주소가 바뀔때 필요한 간단한 자바스크립트 (7)
  25. 2007/06/18 오늘부터 AJAX 사내교육을 맡게 되다. (3)
  26. 2007/05/26 HTML,포토샵,플래시 색상 코드번호 표 (15)
  27. 2007/04/20 초보자를 위한 자바스크립트 이미지 슬라이더 소스코드 (1)
  28. 2007/04/01 스크랩 금지된 네이버 블로그와 카페글을 스크랩하고 싶다면... (5)

홈피에 자바스크립트로 만든 색상선택기(ColorPicker) 붙여보기.

웹 프로그래밍 2009/10/10 22:49
TAG , , , , , , , , ,
홈페이지 개발에서 색상 선택기를 만들어 붙여야 할 일이 드물기는 하지만 언제가는 필요할 때가 있으므로 jQuery 플러그인을 가져다가 입맛에 맞는 ColorPicker 를 만들어봅시다. 검색해본 여러가지 ColorPicker 플러그인 중에 이 것(http://www.eyecon.ro/colorpicker/)이 쓸만해 보여서 약간 불편한 부분과 IE6에서 화면이 깨지는 부분을 수정한 후 예제를 만들어 봤습니다. 아래는 색상 선택기 예제 실행 화면이고 하단에는 예제 소스 코드입니다.

[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>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/588
2009/10/10 22:49 2009/10/10 22:49
No Trackback, 댓글 6개가 달렸습니다.

댓글을 달아 주세요

  1. 이창희 2010/08/10 19:23  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다~~~

  2. 포토샵이라면.. 2010/01/26 11:59  댓글주소  수정/삭제  댓글쓰기

    포토샵이라면 모든지 좋아요^^

  3. 노랑우산 2010/01/26 10:03  댓글주소  수정/삭제  댓글쓰기

    넘좋아요

  4. 비밀방문자 2010/01/22 15:25  댓글주소  수정/삭제  댓글쓰기

    관리자만 볼 수 있는 댓글입니다.

  5. 하얀방울 2009/10/15 11:14  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다. 담아갈께요.

  6. 김규진 2009/10/14 16:11  댓글주소  수정/삭제  댓글쓰기

    와 좋은데요

시계 가젯을 만들어 보고 구글과 블로그에 띄워보자!

웹 프로그래밍 2009/07/05 17:03
TAG , , , , , , , , ,
간단한 시계 가젯을 만들어 보겠습니다. 우선 구글에 로그인하고 구글 가젯 에디터(Google Gadget Editor) 정보 페이지에서 "바로 추가" 버튼을 클릭하면 아이구글(iGoogle)에 가젯을 편집할 수 있는 위젯이 추가 됩니다. 에디터에 아래 보이는 시계 가젯 소스를 입력한 후 적당한 파일명(simpleclock.xml)으로 저장(Save) 하고 발행(Publish) 버튼을 누릅니다.

사용자 삽입 이미지

그리고 "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>

[구글 가젯 에디터]

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/584
2009/07/05 17:03 2009/07/05 17:03
No Trackback, No Comment

댓글을 달아 주세요

야후 세계 지도 활용하기, 야후 거기 지도 오픈 API 매시업

웹 프로그래밍 2009/06/26 20:51
TAG , , , , , , , , ,
야후 세계 지도 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


[소스 코드]
<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
2009/06/26 20:51 2009/06/26 20:51
No Trackback, a comment

댓글을 달아 주세요

  1. 비밀방문자 2009/07/01 11:36  댓글주소  수정/삭제  댓글쓰기

    관리자만 볼 수 있는 댓글입니다.

◀ 이전페이지 1 다음페이지 ▶