Question

我对语义UI还是陌生的，但真的很喜欢到目前为止所看到的内容。我正在开发一个允许用户使用Spring MVC框架和Thymeleaf审阅文档的站点/应用程序。

审阅者单击一个按钮，它会显示其审阅文档的PDF。他们可以留下评论，这些评论被输入到数据库中并显示为表格，以便作者在所有评论完成后进行评估。我还想增加评论者编辑评论的功能。

我有两个模态。一种是在审阅者想要添加新评论时调用，另一种是在审阅者想要编辑评论时调用。它们的样式相同，但是主要区别在于编辑模式会在文本输入中预先添加注释。

添加注释的模式非常完美。更新评论的模态没有。它会打开，在文本框中加载评论内容，然后立即关闭。

下面是代码：

jQuery：

$(document).ready(function() {
    $("#addComment").click(function(){
        $('#addCommentModal').modal('show');
    });

    $(".modifyCommentButton").click(function(){
        $('#modifyCommentModal').modal('show');
        $('#commentInput').val($(this).parent().parent().siblings('.commentContent').text());
     });
 });

模式：

<div id="modifyCommentModal" class="ui basic modal">
    <div class="ui icon header">
        <i class="blue plus circle icon"></i>
    </div>
    <div class="actions">
        <div  class="content">
            <form  th:action="@{'/addcomment/'+${review.getTaskId()}}" th:object="${newComment}" method="post" class="ui form">
                <input id="commentInput" class="field" type="text" th:field="*{comment}" />
                <button id="modifyButtonAdd" class="ui green animated inverted fade button" tabindex="0">
                    <div class="visible content">Add</div>
                    <div class="hidden content">
                        <i class="checkmark icon"></i>
                    </div>
                </button>
                <button id="modifyButtonCancel" class="ui red animated inverted fade button cancel" tabindex="0" type="reset">
                    <div class="visible content">Cancel</div>
                    <div class="hidden content">
                        <i class="remove icon"></i>
                    </div>
                </button>
            </form>
        </div>
    </div>
</div>

<div id="addCommentModal" class="ui basic modal">
    <div class="ui icon header">
        <i class="blue plus circle icon"></i>
    </div>
    <div class="actions">
        <div  class="content">
            <form  th:action="@{'/addcomment/'+${review.getTaskId()}}" th:object="${newComment}" method="post" class="ui form">
                <input id="" class="field" type="text" th:field="*{comment}" />
                <button id="formButtonAdd" class="ui green animated inverted fade button" tabindex="0">
                    <div class="visible content">Add</div>
                    <div class="hidden content">
                        <i class="checkmark icon"></i>
                    </div>
                </button>
                <button id="formButtonCancel" class="ui red animated inverted fade button cancel" tabindex="0" type="reset">
                    <div class="visible content">Cancel</div>
                    <div class="hidden content">
                        <i class="remove icon"></i>
                    </div>
                </button>
            </form>
        </div>
    </div>
</div>

我意识到我需要在审阅模式中使用不同的th：action来将评论写到它所在的相同字段中……但是我要弄清楚的是，当我获得保持开放状态的评论时。：）

任何见识将不胜感激！谢谢！

语义UI模式一打开就关闭

0 个答案: