如何在 Rails 中创建帮助按钮

Question

可能对你们来说很明显，但对我来说却不是。

我想创建一个 i 帮助图像，单击它时会弹出一个 window 信息。

我试过类似的方法，但没有用：

<a id="dialog-1" href="#"><button id="opener" >i</button></a>

<script>
     $(function() {
        $( "#dialog-1" ).dialog({
           autoOpen: false,  
        });
        $( "#opener" ).click(function() {
           $( "#dialog-1" ).dialog( "open" );
        });
     });
</script>

application.js

//= require jquery
//= require jquery_ujs
//= jquery-ui
//= require turbolinks
//= require_tree .

Answer 1

有很多方法可以满足您的需求。我会提出建议，可能还有其他方法，但这很简单。

对于 "i" 图片，我建议您使用实际图片，最好是具有透明背景的 png。另一种选择是使用标志性字体，例如 Font Awesome (example)。它看起来像一个图像，但它被视为一种字体，因此您可以更改颜色、大小等。

对于弹出窗口。唯一的选择是创建一个带有绝对定位的隐藏 div 并使用 javascript/jQuery 打开它，并且可能会稍微淡化背景。你可以google一点点，会找到很多解决方案，一个肯定能满足你的需要。

作为第二个改进：如果内容非常多，您可能希望通过 AJAX 或其他异步方式按需加载它，但首先要让信息 window 正常工作 :)

Answer 2

也许你错过了$( document ).ready(function() { ... });

试试这个：

<a id="dialog-1" href="#"><button id="opener" >i</button></a>

<script>
     $(function() {
        $( document ).ready(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
     });
</script>

Answer 3

根据我的评论回答

Did you include the library jquery-ui?

在您的 application.js 文件中包含 jquery-ui 库。

如何在 Rails 中创建帮助按钮

How to create i help button in Rails

html

css

jquery-dialog