軌3，最簡單的方法來實現「彈出幫助」表單域

我們的軌道3的應用程序，在Heroku的託管，使用HAML（但不包括指南針或類似的東西）：軌3，最簡單的方法來實現「彈出幫助」表單域

當我們的用戶填寫表單我們'想找到一個容易實現的'彈出'框中的每個領域，解釋它的內容。不應該是花哨的，但應該允許任意大的多行彈出框包含20到100個字

'popup'也可能意味着某種類型的「展開」或「展開」字段下的div標籤，但是真正的彈出式頁面將是理想的。

任何人都可以提出一個簡單的方法來實現呢？

2011-03-28 jpwynn

我能想到的是使用內部或輸入字段標籤之後立即facebox鏈接最簡單的方法，它指向一個隱藏的DIV的幫助信息，你想：

<label for="name">Name: <a href="#name-help" rel="facebox">?</a></label> 
<input type="text" name="name" ... /> 
<div id="name-help" style="display: none;"> 
    <p>This is the help text for <strong>name</strong></p> 
    <p>You can put any html here</p>. 
</div>

你可以把在投入後或在文件末尾幫助分部;他們將沒有區別。

來源

2011-03-28 09:30:32 kikito

這是一個很棒的解決方案，謝謝！ – jpwynn 2011-03-29 00:00:53

我一直使用JQuery Overlay。這是相當容易安裝，真的很容易實現：

<a href="#overlay" rel="#overlay" class="overlayLink"> 

<div id="overlay"> 
    content of your help 
</div>

然後，在JavaScript（假設你使用jQuery

$('.overlayLink').overlay()

來源

2011-03-28 09:44:52 Yule

也爲此感謝...我喜歡這個解決方案，但決定與facebox一起去，這是一個更容易安裝和工作的時間。 – jpwynn 2011-03-29 01:41:18

使用jQuery UI的對話框我的形式 - 工作得很好（http://jqueryui.com/demos/dialog/）這個佈局類似於egarica上面用顯示器提到的東西：沒有div存放幫助信息（我只是放在表單的其餘部分上方）和表單旁邊的可點擊範圍元素打開具體幫助div。

<script> 
document.observe('dom:loaded',function(){   
    $j(function() { 
        $j("#dialog_postcode").dialog({ 
       autoOpen: false, 
       show: "blind", 
       hide: "explode" 
      }); 

      $j("#opener_postcode").click(function() { 
       $j("#dialog_postcode").dialog("open"); 
       return false; 
      }); 
     }); 

}); 
</script> 

<div id="dialog_postcode" title="Postcode information"> 
    <fieldset> 
     <legend>Postcodes</legend> 
     <p>Postcodes are looked up on a static database table.</p>   
    </fieldset> 
</div> 

//dialog opener placed by relevant element 
<span id="opener_postcode" class="help" title="Postcode information">?</span>

來源

2011-03-28 09:51:02 Pasted

使用這種方法我們是否需要爲每個添加幫助的新字段編輯javascript？ – jpwynn 2011-03-28 18:09:24

在我的表單中 - 可能有一些方法可以清除代碼（也許可以通過將特定的div id作爲變量傳遞給所有div，並使用「opener」或「dialog」類來遍歷所有div） – Pasted 2011-03-29 09:03:42

在Rails 5.0：

<%= submit_tag "Help", :type => 'button', :onclick => 'alert("If Zipcode is missing in list at left, do: \n\n\ 1. Enter any zipcode and click Create Client. \n\ 2. Goto Zipcodes and create new zip code. \n\ 3. Edit this new client from the client list.\n\ 4. Select the new zipcode ")' %>

這個職位的JS對話框，不作爲提交表單POST。

來源

2017-03-13 07:20:09

軌3，最簡單的方法來實現「彈出幫助」表單域

回答

相關問題