javascript - 设计在 jQuery UI 对话框中弹出的 JS 警报的样式

Question

请查看我的 Sample Fiddle ...

我想要一个 JavaScript 警报作为 jQuery UI 对话框弹出，因为我想设置它的样式。感谢 @asifrc 的帮助，我成功了。

现在，我正在尝试设计该对话框的样式。

这就是我的 HTML 中的警报框...

<div id="pellalert"></div>
<div class="search-pell">
    <form id="pellform">
        <input type="text" value="Enter 13-14 PELL Score" class="search-input-bg-pell" id="pellscore"  />
    </form>        
</div>

我在这里唯一能做的就是对整个对话框应用内联样式，就像这样......

<div id="pellalert" style="font-size: 18px;"></div>

...但这对整个框进行了样式设置，而不仅仅是我想要的样式。我如何制作<h1> , <h2>等，或添加多个<br />字里行间等等......有没有一种整体的方式来设计这个？

这就是我设置警报脚本的方式，但我不知道如何在此处添加样式...

/*
    Pell Alert
*/
//Set content to old alert content      
var content = 'Based on the 2013-2014 EFC you entered ('+efc+'), you may receive...'
            +' \n'
            +' \n'
            +' \n'
            +' \n-Tuition of 36 credits: $14,472' 
            +' \n'
            +' \n-Direct Loan maximum for a Freshman* student: $9,405**' 
            +' \n_________________________________________________________'             
            +' \n-Potential PELL Grant Award: $'+pell+'.'
            +' \n_________________________________________________________'
            +' \n-Your estimated total out of pocket payment: $'+estpay+'.'
            +' \n_________________________________________________________'
            +' \n-Potential Student Success Grant: $'+ssg+'.'
            +' \n_________________________________________________________'                 
            +' \n-Your estimated monthly out of pocket payment: $'+monthpay+'.'
                +' \n...'
    //Replace newlines with <br> (since it's now html)
    content = content.replace('\n', '<br>');
    //Set innerHTML of dialog, and then show the dialog     
    $('#pellalert').html(content).dialog('open');

}

Answer 1

如果您需要保留当前编码，则必须直接创建一个真正的“DOM String”。

类似于:

var content = '<div class="title">Based on the 2013-2014 EFC you entered ('+efc+'), you may receive...</div>'
            +'<div class="credits">Tuition of 36 credits: $14,472</div>' ; 

等等...

如果您可以更改其实现方式，那么您应该这样做，因为此代码可读性不够(这意味着不够可维护)。

一种选择是将字符串分成函数...例如，每个函数都接受一个参数或几个参数，使用参数显示一行或一个 block ...并将不同函数调用的结果附加到构建你的 DOM。我无法真正展示此类功能的示例，因为我不知道您的“业务逻辑”需求。但是您可能可以区分消息中的各个区域，并为每个区域创建函数。 然而，这仍然非常复杂，不应该这样做。

最好的选择是进行 Ajax 调用来检索 php 文件，向服务器提供所需的所有参数，而不是在 javascript 中构建所有内容。这样会更干净。而且你会更容易地操作 DOM。