2011-02-10 3 views
1

저는 아코디언에서 요소를 표시하거나 숨기려면 Javascript가 많이 필요한 사이트에서 작업하고 있습니다. Javascript가 활성화되지 않은 사용자라도 사이트의 모든 콘텐츠에 액세스 할 수 있는지 확인하고 싶습니다 (조금 덜 예쁘거나 대화식 인 경우 라 할지라도). 이 일을하는 가장 좋은 방법은 확실치 않습니다. 네가 그 꼬리표를 사용할 수 있다는 것도 알지만, 그게 최선의 방법이 될 수는 없다는 걸 알아. 본질적으로 두 가지 버전의 사이트 (자바 스크립트 용과 그렇지 않은 버전)가 있어야한다는 것은 의미가 없습니다.자바 스크립트가 활성화되었는지 여부에 따라 Apple은 사이트를 어떻게 변경합니까?

사이트를 구축하면서 Apple 사이트를 사용하는 것이 좋은 예라고 생각했습니다. 자신의 제품 페이지 (예 : http://www.apple.com/ipod/)에서 제품을 맨 위에 놓은 다음 다른 옵션 (응용 프로그램, iTunes & 기타 등)을 클릭하면 다음 요소가 표시됩니다. 그것은 굉장해 보인다. 그러나 Javascript를 사용하도록 설정하면 더 이상 멋진 대화식 인터페이스를 사용할 수 없지만 모든 제품을 목록에 포함합니다. 이 일에 대해 어떻게 생각하세요?

해결책이 반드시 애플이하는 방법 일 필요는 없습니다. 나는 단지 내가하려고하는 것을 설명하는 좋은 예라고 생각했다.

+1

"점진적 향상"이라고합니다. 평범한 제인을 "Netscape 2.x"형식 페이지에서 작동시킨 다음 CSS와 Javascript의 다양한 비트를 사용하여 향상 기능을 추가하십시오. 그렇게하면 두뇌가 죽은/오래된 브라우저를 사용하는 사람이 정보를 얻고 더 현대적인 시스템을 사용하는 사람들이 더 나은 경험을하게됩니다. –

+0

나는 점진적인 향상의 큰 지지자입니다. 나는 CSS3 등을 위해 내 사이트에서 항상이 도구를 사용합니다.이 경우에는 점진적 향상이라는 특정 수준에 동의하지만 Javascript를 사용하는 사람들을 위해 사이트의 기본 버전이 필요하지는 않습니다. 사이트의 95 %가 정상적으로 작동하면 비활성화됩니다. 나는 애플처럼 다른 방식으로 내용을 보여줄 수있는 방법이 필요하고, 전체적인 디자인은 필요 이상으로 영향을 미치지 않는다. – Andrew

+0

@Andrew, 당신이 말하는 것은 Graceful Degradation처럼 들립니다. –

답변

0

브라우저에서 자바 스크립트를 사용할 수 있는지 확인해야합니다. 아래 함수를 사용하여 body 태그에서 onload 할 수 있습니다. 브라우저의 js 사용 여부에 따라 사용자를 다른 페이지로 리디렉션하거나 다른 작업을 수행 할 수 있습니다. JS이 활성화

<body onload="checkJs()"> 
<div id="jsEnabled" style="visibility:hidden">JavaScript enabled</div> 
<div id="jsDisabled">JavaScript disabled</div> 

<script language="javascript" type="text/javascript"> 
function checkJs() 
{ 
document.getElementById("jsEnabled").style.visibility = 'visible'; 
document.getElementById("jsDisabled").style.visibility = 'hidden'; 
} 
</script> 
0

, 모든 애플 제품이 들어있는 UL 요소의 HTML보고 : 당신이 그것을 클릭 할 때까지

<ul class="ul-slider" page="1" style="width: 840px; margin: 0pt 70px;"> 

다른 UL이 숨겨져 있습니다. 아이 LI 요소의 CSS는 그들 모두가 왼쪽에서 오른쪽으로 흐름한다 :

.productbrowser li { 
    display: inline; 
    float: left; 
    height: 150px; 
    margin-top: 4px; 
    width: 140px; 
} 

지금 자바 스크립트를 해제하고 같은 UL 요소 봐. 둘 다 표시되며 스타일 속성이 없습니다. 따라서 그들은 점진적 향상을 사용하고 있습니다 : 브라우저가 지원하는 경우에만 기능/효과를 추가하십시오.

JS가 비활성화되어 있다는 마음에서 시작하여 HTML & CSS를 그런 식으로 작성하십시오. 이것이 사이트가 LCD로 작동하는지 확인하는 가장 좋은 방법입니다. Modernizr 및 Head JS와 같은 라이브러리는 브라우저 및 사용자 설정이 표시 할 수있는 기능과 처리 할 수있는 자바 스크립트의 종류에 따라 CSS 규칙 및 조건부 자바 스크립트를 작성할 수 있도록합니다.

관련 문제