Gangslab

http://www.curvycorners.net/index.php

보통 파폭이랑 사파리 같은 경우는 내부적으로 rounded corner 를 지원한다.

사파리에선.

-webkit-border-radius: 10px;

모질라, 파폭에선

-moz-border-radius: 10px;

IE 에선 기본적으로 지원을 하지 않기 때문에 curvycorners.js 스크립트 파일을 포함시킨뒤에

CCborderRadius: 10px;

.. 를 CSS 에 포함시켜 주면 된다.

대강 잘 나오는듯.

link_to_remote 를 가지고 잘 사용하면 매우 좋겠지만.

http://www.intridea.com/2007/11/21/link_to_remote-unobtrusively 

위의 링크를 따라가면 해당 방법을 볼 수 있긴 한데..

저 방법보단 간단하게 풀어보면.

<a href="#" onclick='link1()'>Home</a>

<script>
    function link1()
    {
        $('nav1').className='active';
        $('nav2').className='';       
        $('nav3').className='';       
        $('nav4').className='';           
        new Ajax.Updater('contents', '/milestones', {asynchronous:true, evalScripts:true});   
    }

</script>

위와 같은 방법으로도 할 수 있다.

즉, link_to_remote 헬퍼 함수를 html 로 쉽게 풀어서 사용한 것이다.

차라리 저게 더 쉽고 간단할지도.

위에 보면 Prototype 에서 $ 약자는 getElementById 의 축약형이다. 위의 구문의 className 메쏘드는

클래스를 바꿔주는것이다. CSS 의 네비 바에서 사용될 수 있다.

def role_id_form_column(record, name)
   select :record, :role_id, Role.find(:all).collect {|p| [ p.name, p.id ] }, :name => name
end

관련 helper.rb 파일에서 위와 같은 방법으로 method 를 만들어준다.

select 부분은 다른 check_box 등의 다른 컨트롤로 대체할 수 있다.

위 스크린샷 처럼 뒤의 백은 어둡게 하고 앞의 modal dialog 를 띄워준다.

http://code.google.com/p/submodal/

꽤나 쓸만할것 같은 소스다.

http://www.rubyrailways.com/add-a-powerful-ajax-table-to-your-rails-application-in-5-minutes/

쉽고 빠르단다..

구글 캘린더의 기본 컨셉을 그나마 많이 따라한 프로젝트.

아웃룩처럼 일정 표기하기 프로젝트

http://mibany.com/project/calendar/

여기에서 캘린더 테이블에서 마우스로 쭈욱 선택할 수 있는데.

이부분에 대한 부분은.

onmouseover 쪽을 살펴봐야 할 듯하다.

구글에서 많이 사용하는 라운드 테이블에 관련된 내용.

Nifty Corners: rounded corners without images

By Alessandro Fulciniti

http://www.html.it/articoli/nifty/index.html


이미지와 함께 사용한 버젼.
http://www.html.it/articoli/niftycube/index.html