jQuery添加到JSP页面 [英] jQuery adding to JSP page
问题描述
我有一段在互联网上找到的jQuery代码，我想将其集成到我的jsp页面中，我使用的是Spring表单标签.
I have a piece of jQuery code which I found on the internet and I want to integrate it to my jsp page, I use Spring form tags.
这是jQuery代码:
Here is the jQuery code:
(function ($) {
//тут превращаем select в input
var id = "test",
$id = $('#' + id),
choices = $id.find('option').map(function (n, e) {
var $e = $(e);
return {
id: $e.val(),
text: $e.text()
};
}),
width = $id.width(),
realClass = $id.get(0).className,
realId = $id.get(0).id,
$input = $('<input>',{width: width});
$id.after($input);
$id.hide();
$id.find('option').remove();
//превратили
$input.select2({
query: function (query) {
var data = {}, i;
data.results = [];
// подтставим то что искали
if (query.term !== "") {
data.results.push({
id: query.term,
text: query.term
});
}
// добавим остальное
for (i = 0; i < choices.length; i++) {
if (choices[i].text.match(query.term) || choices[i].id.match(query.term)) data.results.push(choices[i]);
}
query.callback(data);
}
}).on('change',function()
{
var value=$input.val();
$id.empty();
$id.append($('<option>').val(value))
$id.val(value);
}
);
})(jQuery);
jQuery的CSS文件-我将其命名为test.css并将其应用于我的jsp页面:
CSS file for jQuery - I name it test.css and apply it to my jsp page:
#test {
width: 300px;
}
我的jsp页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Страница выборки</title>
<link rel="stylesheet" href="resources/cssFiles/jquery-ui.css"/>
<link rel="stylesheet" href="resources/cssFiles/test.css"/>
<script type="text/javascript" src="resources/jsFiles/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="resources/jsFiles/jquery-ui.js"></script>
<script type="text/javascript" src="resources/jsFiles/jquery-ui-i18n.js"></script>
<script type="text/javascript" src="./resources/jsFiles/selecter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#parctdate, #chldAdmitDate, #chldSchlDate, #name, #type, #daySchdl, #workSchdl, #rotation, #numbch, #chUnder3, #chUpper3, #chGoSchool, #chAdmitted").mouseenter(function() {
$(this).css("background-color", "gainsboro");
});
$("#parctdate, #chldAdmitDate, #chldSchlDate, #name, #type, #daySchdl, #workSchdl, #rotation, #numbch, #chUnder3, #chUpper3, #chGoSchool, #chAdmitted").mouseleave(function() {
$(this).css("background-color", "white");
});
var enabledDays = ["6-1-2013", "7-1-2013", "8-1-2013", "9-1-2013", "10-1-2013", "11-1-2013"];
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1 || new Date() > date) {
return [true];
}
}
return [false];
}
$(function(){
$.datepicker.setDefaults($.extend($.datepicker.regional["ru"]));
$("#datepicker1, #datepicker2, #datepicker3").datepicker({dateFormat: "yy-mm-dd",
duration: "normal",
numberOfMonths: [ 1, 2 ],
constrainInput: true,
beforeShowDay: nationalDays});
});
});
</script>
</head>
<body>
<spring:message code="label.input.button" var="labelbutton"/>
<h3 align="center"><spring:message code="label.input.topLabel"/></h3>
<form:form id="myform" cssClass="testClass" modelAttribute="fboAttribute" method="post" action="add" >
<table align="center">
<tr id="name">
<td><form:label path="institution.nameOfInstitution"><spring:message code="label.input.nameOfInstitution"/></form:label>
<form:select id="test" path="institution.nameOfInstitution">
<form:option value=""><spring:message code="label.select.msg" />-</form:option>
<form:options items="${listOfInstitutionsNames}"/>
</form:select>
<tr>
<td><input type="submit" value="${labelbutton}"/></td>
</table>
</form:form>
我想将jQuery脚本与jsp和Spring表单标签集成在一起.
I would like to integrate my jQuery scripts with my jsp and Spring form tags.
对不起，我是jQuery的新手.
I'm sorry I'm new in jQuery.
谢谢
推荐答案
与任何JavaScript一样，jQuery也被添加到JSP页面<head>标记中的<script>标记中.您可以添加所有代码，也可以仅添加指向包含您的jQuery的.js文件的链接，例如:
jQuery, like any JavaScript, is added in a <script> tag in the <head> tag of your JSP page. You either add all the code or just a link to the .js file containing your jQuery, like for example :
<script src="./libs/jquery/1.10.1/jquery.min.js"></script>
完成此操作后，您现在想要在HTML标签中使用jQuery，就如同对任何HTML页面一样.也就是说，在您的情况下，您不必带走spring标签.让它通过您的${listOfInstitutionsNames}生成选择/选项，只需将class="testclass"添加到您的spring form标签中，就像这样:
Having done that, you want now to leverage your jQuery in the HTML tags, you do that as for any HTML page. Namely, in your case, you don't have to take away the spring tags. Let it generate the select/options via your ${listOfInstitutionsNames}, just add class="testclass" to your spring form tag, like this :
<form:form cssClass="testclass" id="myform" modelAttribute="fboAttribute" method="post" action="add" >
在浏览器上呈现表单时，Spring将在生成的HTML中包含具有testclass值的class属性.
When rendering the form on a browser, Spring will include in the generated HTML the class attribute with value of testclass.
希望能有所帮助，祝您好运.
Hope that helps, best of luck.
这篇关于jQuery添加到JSP页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
