如何将带有外部JavaScript文件的jQuery相关HTML加载到JavaFx WebView
How to load jQuery dependent HTML with external JavaScript files to JavaFx WebView
如何在$(document).ready(function()
ie之后将JavaScript加载到JavaFx Webview。例如,在Web视图加载之后,而不等待onButtonClick
操作之类的事件
这个问题的答案将回答我的主要问题,如何将jQuery添加到Web视图中。
我一直在努力使以下内容发挥作用,但我未能将其他类似的在线解决方案集成到我的问题中。
我想添加到网络视图中的HTML文件如下:
<!DOCTYPE html>
<html>
<head>
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.custom.min.js'></script>
<script src='../fullcalendar/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
到目前为止,我一直在努力做到这一点:
public class WebViewSample extends Application {
private Scene scene;
@Override
public void start(Stage stage) {
// create the scene
stage.setTitle("Web View");
scene = new Scene(new Browser(), 750, 500, Color.web("#666970"));
stage.setScene(scene);
scene.getStylesheets().add("WebViewSample/fullcalendar-1.6.4/fullcalendar/fullcalendar.css");
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
class Browser extends Region {
final WebView browser = new WebView();
final WebEngine webEngine = browser.getEngine();
public Browser() {
//apply the styles
getStyleClass().add("browser");
// load the web page
webEngine.load("WebViewSample/fullcalendar-1.6.4/demos/default.html");
//add the web view to the scene
getChildren().add(browser);
}
private Node createSpacer() {
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
return spacer;
}
@Override
protected void layoutChildren() {
double w = getWidth();
double h = getHeight();
layoutInArea(browser, 0, 0, w, h, 0, HPos.CENTER, VPos.CENTER);
}
@Override
protected double computePrefWidth(double height) {
return 750;
}
@Override
protected double computePrefHeight(double width) {
return 500;
}
}
我从中得到的只是一个空白的白色窗口,而不是像jQuery日历插件FullCalendar那样在窗口上绘制。
提前谢谢。
尝试使用这个:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="layout" content="main">
<meta name="viewport" content="width=device-width"/>
<title>Calendar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel='stylesheet' href="fullcalendar.css" />
<script src="jquery.min.js"></script>
<script src="moment.min.js"></script>
<script src="fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
//events:"%EVENT_URL%",
allDaySlot: false,
header:
{
left: 'today prev next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView:'agendaDay',
firstHour:'9',
minTime:'8:00',
weekends: true
});
});
</script>
相关文章:
- 如何减去选项两个相关的选择 HTML
- 当“不相关”的 html 选择元素没有选择任何选项时,如何退出 jQuery 事件
- 如何在HTML中创建一个信息框,显示与悬停SVG路径相关的信息
- JS - 将 和其他对象解析为相关的 HTML
- 与文本框相关的 HTML 编码/解码
- 如何动态更新HTML5/Javascript智能手机应用程序的HTML页面和相关图像
- Javascript:在删除相关HTML时,我应该删除一个事件处理程序吗
- 使用javascript或jquery从保存的html中获取与元素相关的jquery.data()
- 使用js获取与html源代码相关的选定html元素偏移量
- 如何获取类型为checkbox的html输入标记中的相关文本
- 如何用HTML和JavaScript/JQuery替换DB以创建动态相关的下拉选择列表
- 如何自动滚动相关的html表格
- 以 html 形式输入 ID,并在同一页面中从 MySQL 数据库加载相关数据
- Android SL4A:如何在HTML/javascript应用中链接到相关脚本
- 如果删除不相关的脚本,使用html画布生成的Iphone图像将被裁剪
- 在执行相关的JavaScript后,如何获得页面的源HTML ?
- 在带有无线电的html表格中显示带有相关标签的文本框
- 使用Chrome查找与HTML元素相关的所有js事件
- 如何在javascript中绑定相关的HTML元素
- 如何使html和UI相关的javascript代码少耦合