我應該如何通過JavaScript逐步增強此內容？

Question

這個問題的背景是，我正在做一個計算項目，涉及一些下拉框輸入，並在文本輸入用戶可以輸入日期。

我已經使用YUI來增強表單，所以日曆輸入使用YUI calendar widget，並且下拉列表被轉換成水平輸入列表，其中用戶只需點擊一次以選擇任何輸入而不是兩個輸入點擊與下拉框（希望是有道理的，不知道如何解釋清楚）

問題是，在我的項目的設計部分，我表示，我會遵循漸進增強原則。但我仍在努力確保沒有JavaScript的用戶能夠查看所述頁面上的下拉框/文本輸入。

這不是因爲我不一定知道如何，但我嘗試過的兩種方法似乎並不令人滿意。

方法1 - 我嘗試使用YUI隱藏文本框和下拉列表中，這似乎是理想的解決方案但有加載網頁（尤其是第一次）時相當明顯的滯後，文本框和下拉列表可見至少一秒。我在body標籤結束之前包含了這個腳本，是否有任何方法可以使用YUI運行它？這會有幫助嗎？

方法2 - 使用noscript標籤。 。 。然而我討厭這樣做，因爲雖然這將是一個簡單的解決方案，但我已經閱讀了關於noscript標籤的各種不好的事情。

有沒有辦法讓一種方法工作？還是有沒有更好的方式來做到這一點，我還沒有遇到？

Answer 1

衣有domready中的事件（發生onload事件前位）

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> 

您可以顯示/隱藏input與下面的CSS：

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輸入（其中顯然，沒有JavaScript，YUI日曆小工具不能顯示（因爲它被添加/用於JS），但基本的日期輸入字段將會被顯示在那裏，並且可以訪問

---

編輯，下面的測試（含鉻17/Ubuntu的11.04），它（儘管在本地主機上以前的成功測試）建議的input不能接收:focus，直到它的網頁上看到，下面的現予修訂CSS似乎解決了這個問題：

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

JS Fiddle demo。

Answer 3

通常情況下，顯示/隱藏元素的腳本非常快。我能想到爲什麼第一個緩慢的唯一原因是因爲腳本在渲染元素後運行很久。在隱藏或其他某種延遲之前，可能會有一些昂貴的腳本正在運行。

我認爲解決方案是讓隱藏腳本成爲代碼的第一部分，如果需要，在下拉呈現後立即在腳本塊中運行。