javascript - 如何为日期选择器创建外部 javascript 和外部 css 文件以及如何在 Eclipse 中使用它

Question

我有如下的 javascript 和 css 样式

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(function () {
$('#startDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#startDate').datepicker();


});
</script> 
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true
});
});
</script> 
<script type="text/javascript">
$(function () {
$('#endDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#endDate').datepicker();

});
</script> 
<script type="text/javascript">
$(function () {
$('#followUpDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#followUpDate').datepicker();

});
</script>
<style>
.ui-datepicker th { background-color: #CCCCFF; }
</style>
<style type="text/css">
.search_textbx
{
background:url(calendar.jpg) right no-repeat;
background-color:white;
height:13px;
color:black;

}
</style>

现在我的问题是如何在 eclipse 中创建外部 javascript 文件和 css 文件，以便我可以在 jsp 页面中使用它们，尤其是在 input type = "text" 中。

     <td style="padding-left:25px;">
<input type="text" id="startDate" name="startDate" class="search_textbx" size="15" readonly="readonly"/>
                          </td>

现在我需要一个外部 javascript 文件和 css 文件，我想在“input”标签中使用这些文件。

Answer 1

与加载 jquery 和 jquery-ui 的方式完全相同。创建一个文本文件，将其分别保存为 .css 和 .js，使用链接和脚本标记将它们放入您的页面。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

ps: 你不必为每个函数使用一个新的脚本标签，你可以将你的三个文字脚本合并为一个 <script>标签和一个 $(function(){});

最好将 css 文件放在 head 标签中，将 script 标签放在尽可能低的 body 标签中，除非您需要更早地执行脚本。