1

请参阅下面的代码......并且有一个fiddle here.

我想用 jQuery UI 来设置它的样式。但是，我仍然可以调用此脚本，还是必须将其直接嵌入 HTML 页面？

这是表格...

<div class="search-pell">
<form onsubmit="showpell_13_14(document.getElementById('pellscore').value); return false;">
    <input type="text" value="Enter 13-14 PELL Score" onfocus="if(this.value == 'Enter 13-14 PELL Score') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Enter 13-14 PELL Score'; }" class="search-input-bg-pell" id="pellscore"  />
    </form>

目前，当您搜索 PELL Grant 分数时，会从另一个脚本调用 alert()。

脚本是这样构建的... 

// Begin EFC Calculator for 2013-2014

function showpell_13_14(efc) {


  var pell;
  var ssg;
  var estpay;
  var monthpay;

    if (efc == 0) {
        pell = 5645;
        ssg = 0;
        estpay = -573;
        monthpay = 0;
    }

    else if (efc <= 100) {
        pell = 5595;
        ssg = 0;
        estpay = -523;
        monthpay = 0;
    }

    else if (efc <= 200) {
        pell = 5495;
        ssg = 0;
        estpay = -423;
        monthpay = 0;
    }

...基于此显示结果... 

alert('Based on the 2013-2014 EFC you entered ('+efc+'), you may receive...'
                +' \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...'
//              +' \nIf your student has $0 out of pocket, disregard the next few lines...'
//                +' \n_________________________________________________________'                               
//              +' \n-Your estimated monthly payment is calculated by...'
//              +' \n'
//              +' \nTaking your total out of pocket for the year ($'+estpay+')'
//              +' \nand subtracting your Student Success Grant ($'+ssg+') to get'
//              +' \n your overall payment which is then broken up over 9 months'
//              +' \nand comes to $'+monthpay+' per month.'                                                                                                         
                +' \n_________________________________________________________'
                +' \n *Note: This is only configured for 1st year undergraduate students.'  
                +' \n **Loan fees of 1% are included in the loan rates listed on this sheet.');

再次 -我想用 jQuery UI 来设置它的样式。但是，我仍然可以调用此脚本，还是必须将其直接嵌入 HTML 页面？

4

1 回答 1

1

window.alert 函数和 jQuery UI 对话框无关；弹出窗口只是 html。切换到对话的最简单解决方案是执行以下操作：

  • 在您的 html 中放置一个空白 div
  • 使用 jQuery UI 初始化它，并将 autoOpen 设置为 false
  • 而不是调用警报，将空白 div 的 html 替换为您将放入警报的内容，然后显示 jQuery 对话框。

在开始我的示例之前，我有一些一般性建议：不要在 html 标记中放置多个函数。一般来说，尽量让你的 JavaScript 和你的 html 分开，因为它会让你（和任何使用你的代码的人）的生活更轻松。而且由于您使用的是 jQuery，因此最好通过使用该.on()函数并以编程方式绑定您的函数来完全避免在标签内使用 JavaScript。

所以我在你的小提琴上做了一些工作，让 jQuery UI 对话框正常工作。我还从您的 html 中删除了所有 javascript。

第 1-23 行将函数绑定到表单的 onsubmit、文本框的 onfocus 和 onblur，并初始化 jQuery UI 对话框（此处的文档）。

从第 504 行开始，我修改了警报以使用 jQuery UI 对话框。我通过将旧警报文本设置为变量并用 html 换行符替换换行符来做到这一点，以便它们在对话框中正确显示。然后我将内容插入对话框并打开对话框。

这是小提琴。

让我知道这一切对你来说是否有意义，或者如果你有任何问题:)

PS 当你使用 jQuery 时$('#pellscore').val()比document.getElementById('pellscore').value;)

更新

问题

所以这是您当前设置的问题：您正在使用（并依赖）一个可笑的旧版本reveal.js。我的猜测是，您在 google 上搜索了“jquery reveal”并发现了这个指向 zurb 版本的reveal.js 的链接。如果这就是你得到它的方式，（而且肯定是从其他地方得到的）你可能没有注意到 a) 它已经两年没有更新了，b) 它使用 jQuery 1.4.4，它是三个岁，或 c) 声明它将不再更新的粗体通知。

无论哪种方式，您的分页符的原因是因为 jquery.reveal.js 调用.live，自 jquery 1.7 以来已弃用，并从 1.9 完全删除。

解决方案

我讨厌修补两年前的东西的想法，但除非你想重写一堆代码并尝试集成当前版本的reveal.js（源代码），否则我建议使用以下快速修复：

打开 jquery.reveal.js，转到第 20 行，并替换.live为.on，例如 from

$('a[data-reveal-id]').live('click', function(e)

至

$('a[data-reveal-id]').on('click', function(e)

那应该可以解决您的问题。我在本地尝试过，它似乎有效。请让我知道这对你有没有用 ：）

于 2013-09-18T17:17:22.583 回答