2

请看我的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');

}
4

1 回答 1

2

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

就像是 ：

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>' ;

等等...

如果你可以改变它的实现方式，你应该这样做，因为这段代码不够可读（这意味着不够可维护）。

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

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

于 2013-09-20T15:26:07.923 回答