prototype ... 에 해당되는 글 3건
2008/04/24 11:45
2008/04/24 11:45 2008/04/24 11:45
사용자 삽입 이미지

Stephen Celis 이 공개한 날짜 선택 콤포넌트입니다.

특정 기간을 선택하기에 좋게 되어있군요.

예제를 보시려면 이곳 을 이용하시면 되고 사파리에서 가장 좋은 품질을 보여준다고 하는데...
확실히 이쁘긴 하네요... ;; 위에 캡쳐는 파이어폭스2 입니다.

아래는 ajaxian 캡쳐인데 맥 & 사파리인듯..

사용자 삽입 이미지

이쁘죠?
이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback Address :: http://blog.phpdic.com/trackback/32
[로그인][오픈아이디란?]
Name
Password
Homepage

Secret
2008/03/13 09:59
2008/03/13 09:59 2008/03/13 09:59
Obaid Ahmed 는 Prototype과 Script.aculo.us로 구현한 Coverflow를 공개하였습니다.

사용자 삽입 이미지


  • <div id="protoflow">
  •         <img src="imgs/DSCN0940_91360.jpg"/>
  •         <img src="imgs/stimme_von_oben_187192.jpg"/>
  •         <img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
  •         <img src="imgs/farbraum_012_147508.jpg"/>
  •         <img src="imgs/IMG_4906_199357.jpg"/>
  •         <img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
  •         <img src="imgs/Fries_201253.jpg"/>
  •         <img src="imgs/Fries_201253.jpg"/>
  • </div>
  •  
  • <ul id="protoCaptions" class="protoCaptions">
  •         <li>Caption 1</li>
  •         <li>Caption 2</li>
  •         <li>Caption 3</li>
  •         <li>Caption 4</li>
  •         <li>Caption 5</li>
  •  
  •         <li>Caption 6</li>
  •         <li>Caption 7</li>
  •         <li>Caption 8</li>
  • </ul>

  • 가볍게 정의한 뒤

  • Event.observe(window, 'load', function() {
  •   cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});
  • });

  • 설정해주면 끝입니다.

    데모는 http://www.deensoft.com/lab/protoflow 에서 확인하실수 있고 다운로드는 이곳입니다.


    이올린에 북마크하기(0) 이올린에 추천하기(0)
    Trackback Address :: http://blog.phpdic.com/trackback/24
    [로그인][오픈아이디란?]
    Name
    Password
    Homepage

    Secret
    2007/12/13 22:24
    2007/12/13 22:24 2007/12/13 22:24

    훌륭한 자바스크립트 라이브러리인 Prototype.js 잘 사용하고 계신가요?

    http://thinkweb2.com 에서는 두번에 걸쳐 Prototype.js의 올바른 사용법에 대해서 포스팅 한 적이 있습니다.
    소개 된지 좀 되었지만 몇가지는 계속 까먹게 되는군요

    1편
    http://thinkweb2.com/projects/prototype-checklist/

    2편
    http://thinkweb2.com/projects/prototype/2007/08/12/how-well-do-you-know-prototype-part-ii/

    간단하게 소개 하면 다음과 같습니다.

    1. document.getElementById('foo') 대신 $('foo') 를 사용 할 것

    2. var woot = $('bar').value 대신 var woot = $F('bar') 를 사용 할 것

    3.
    $('footer').style.height = '100px';
    $('footer').style.background = '#ffc';

    대신

    $('footer').setStyle({
     height: '100px',
     background: '#ffc'
    })

    를 사용 할 것

    4.  
    $('coolestWidgetEver').innerHTML = 'some nifty content'

    대신

    $('coolestWidgetEver').update('some nifty content') 를 사용 할 것

    5.
    new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')

    대신

    new Ajax.Request('ninja.php', {
     parameters: {
      weapon1: 'foo',
      weapon2: 'bar'
     }
    })

    를 사용 할 것

    6.

    new Ajax.Request('blah.php', {
     method: 'POST',
     asynchronous: true,
     contentType: 'application/x-www-form-urlencoded',
     encoding: 'UTF-8',
    })

    대신

    new Ajax.Request('blah.php')

    사용 할 것

    7.
    Event.observe('myContainer', 'click', doSomeMagic)

    대신

    $('myContainer').observe('click', doSomeMagic)

    사용 할 것

    8.

    $$('div.hidden').each(function(el){
     el.show();
    })

    대신

    $$('div.hidden').invoke('show')
    이올린에 북마크하기(0) 이올린에 추천하기(0)
    Trackback Address :: http://blog.phpdic.com/trackback/6
    [로그인][오픈아이디란?]
    Name
    Password
    Homepage

    Secret