JavaScript로이 콘텐츠를 점진적으로 향상시켜야합니까?

Question

이 배경에 대한 배경은 내가 입력을위한 드롭 다운 상자와 사용자가 날짜를 입력 할 수있는 텍스트 입력과 관련된 컴퓨팅 프로젝트를 수행하고 있다는 것입니다.

양식을 향상시키기 위해 YUI를 사용 했으므로 캘린더 입력에 YUI calendar widget이 사용되고 드롭 다운 목록은 사용자가 두 번이 아닌 한 입력을 선택하기 위해 한 번만 클릭해야하는 입력의 수평 목록으로 변환됩니다 드롭 다운 상자가있는 클릭 (분명히 이해할 수있는 희망, 명확하게 설명하는 방법이 확실하지 않음)

문제는 프로젝트의 디자인 섹션에서 진보적 인 향상 원리를 따르 겠다는 것이 었습니다. 그러나 JavaScript가없는 사용자가 해당 페이지의 드롭 다운 상자/텍스트 입력을 볼 수 있도록하기 위해 고심하고 있습니다.

필자는 방법을 알 필요가 없기 때문에 이것은 아니지만 시도한 두 가지 방법이 불만족스러워 보입니다.

방법 1 - 나는 이상적인 솔루션 그러나이처럼이 (특히 처음으로) 페이지를로드 꽤 눈에 띄는 지연 듯 텍스트 상자를 숨기고 드롭 다운 목록에 YUI를 사용하여 시도, 텍스트 상자 및 드롭 다운 목록에서 적어도 1 초 동안 볼 수 있습니다. 본인이 body 태그가 끝나기 직전에 스크립트를 포함 시켰습니다. YUI를 사용하여 onload를 실행할 수있는 방법이 있습니까? 그게 도움이 되겠습니까?

방법 2 - noscript 태그를 사용하십시오. . . 그러나 간단한 해결책 일 것이기 때문에 나는 이것을하기가 싫지만, noscript 태그에 관한 여러 가지 나쁜 점을 읽었습니다.

방법 1을 만드는 방법이 있습니까? 아니면 아직 내가 만나는 더 좋은 방법이 있습니까?

Answer 1

유이가 domready 이벤트 (즉, 온로드 전에 약간 발생)

http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_domready

function bootstrap(ev) { 
    alert("This is the code to launch on domready"); 
} 

YUI().use(
    "event", 
    function (Y) { 
     Y.on("domready", bootstrap); 
    } 
); 

당신이

Answer 2

JavaScript가 없어도 표시/숨기기를 원하는 것은 아니지만 CSS를 사용하여 표시하고 숨길 수 있습니다. 어떤 방식 으로든 해당 요소를 선택할 수있는 한 .

<form action="#" method="post"> 
    <fieldset> 
     <label for="dateStart">Start date</label> 
     <input type="text" name="dateStart" id="dateStart" /> 
    </fieldset> 
</form> 

는 다음과 같은 CSS와 input 표시/숨기기 수 있습니다 : 예를 들어, 다음과 같은 마크 업을 기반으로 (

label { 
    color: #f90; 
    cursor: pointer; 
} 
label:hover { 
    text-decoration: underline; 
} 
label + input { 
    display: inline-block; /* or 'display: none' and omit the following two lines */ 
    height: 0; 
    border-width: 0; 
} 
label + input:focus { 
    height: auto; /* or 'display: inline', and omit the following line */ 
    border-width: auto; 
} 

(이것은 label에 클릭 한 후 dateStart 입력을 보여줍니다한다 UI가 기대와 일관성을 유지하기 위해 a 요소와 닮았습니다.) 분명히 JavaScript가 없으면 YUI 캘린더 위젯 은이 표시 될 수 없지만 (JS에서 추가/사용되었으므로) 기본 날짜 입력 필드는 거기 있고, 접근 가능하다.

---

테스트 다음를 편집 (크롬과/우분투 11.04 17)는 페이지에서 볼 수있어 때까지 input는 :focus을받을 수없는 제안 (로컬 호스트에 이전 성공적인 테스트에도 불구하고)는 amended- 다음 CSS는이 문제를 해결하는 것으로 보입니다 :

label + input { 
    display: none; 
} 
label:hover + input, /* <- added this selector */ 
label + input:focus { 
    display: inline-block; 
}​ 

JS Fiddle demo.

Answer 3

일반적으로 요소 표시/숨기기 스크립트는 매우 빠릅니다. 이유는 첫 번째 느린 이유를 생각할 수있는 유일한 이유는 요소가 렌더링 된 후에 스크립트가 오래 실행되기 때문입니다.숨기기 또는 다른 종류의 지연을 수행하기 전에 아마도 비싼 스크립트가 실행 중일 것입니다.

해결책은 숨겨진 스크립트를 필요한 경우 드롭 다운이 렌더링 된 직후 스크립트 블록에서 실행되는 코드의 첫 번째 부분으로 만드는 것입니다.