通过Javascript在另一个HTML页面中显示html表单
通过Javascript在另一个HTML页面中显示html表单
提问于 2016-06-10 16:12:05
我有两个单独的html文件。第一个是主页。
第二个是属性面板，当工具从左侧的工具箱拖放到画布上时，该面板需要出现在上面页面的画布的右侧。
我早些时候将属性面板表单作为与邮件页面(第一张图像)相同的html页面的一部分。
但是由于将会有各种各样的其他表单/属性面板，我想把它提取到一个不同的html表单中，并调用它们显示在我的jsGold.js文件的这个位置(右侧)。
文件结构如下：
StreamProperty.html将属性面板窗体保存为以下形式
<head>
<link rel="stylesheet" type="text/css" href="../../CSS/style.css">
<link rel="stylesheet" type="text/css" href="../../CSS/propertybox.css">
</head>
<body>
<div style="float: left">
<h1 class="toolbox-titlex" id="tth">Properties Panel</h1>
<form class="panel" id="lot">
<label>Stream Type:</label>
<div class="panel-switch">
<input type="radio" name="TypeGen" value="G" id="type_g" class="panel-switch-input" checked>
<label for="type_g" class="panel-switch-label">Import</label>
<input type="radio" name="TypeGen" value="A" id="type_a" class="panel-switch-input">
<label for="type_a" class="panel-switch-label">Export</label>
<input type="radio" name="TypeGen" value="B" id="type_b" class="panel-switch-input">
<label for="type_b" class="panel-switch-label">Temporary</label>
</div>
<input type="text" class="panel-input-streamName" placeholder="Stream Name">
<input type="text" class="panel-input-streamDef" placeholder="Stream Definition">
<input type="button" value="Save" class="panel-button">
<input type="reset" value="Reset" class="panel-button-reset">
<input type="button" value="Cancel" class="panel-button-cancel">
</form>
</div>
</body>我需要在下面的位置通过JavaScript显示这个表单。由于没有涉及到按钮点击，而是一个jsPlumb拖拽，我不确定如何完成这项工作。
jsGold.js
$("#container").droppable({
accept: '.project, .query',
containment: 'container',
/**
*
* @param e --> original event object fired/ normalized by jQuery
* @param ui --> object that contains additional info added by jQuery depending on which interaction was used
* @helper clone
*/
drop: function(e, ui) {
var dropElem = ui.draggable.attr('class');
alert('drop element: ' + dropElem);
droppedElement = ui.helper.clone();
//jsPlumb doesn't support jQuery cloneUI method.
//So once the icon is dragged and dropped on the canvas, the clone UI class will be removed
ui.helper.remove();
$(droppedElement).removeAttr("class");
// repaint --> Recompute and position all the connections
jsPlumb.repaint(ui.helper);
//Add the 'pro' class which has the same styling as the 'project' class but differs in functionality
//This avoids the duplication of another project class when one project class is being dragged and dropped
if (dropElem == "project ui-draggable") {
var newAgent = $('<div>').attr('id', i).addClass('pro');
//Reset Property fields
$("#lot")[0].reset();
//Display the Properties panel when the element is Clicked
$(".toolbox-titlex").show();
$(".panel").show();
} else {
var newAgent = $('<div>').attr('id', i).addClass('que');
alert("que added");
}
//Reset Property fields
$("#lot")[0].reset();我需要一个替代方法来完成此操作，而不是上述文件中的以下行
//Display the Properties panel when the element is Clicked
$(".toolbox-titlex").show();
$(".panel").show();回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-10 16:18:09
您可以使用frame标记在一个html表单中显示另一个html表单。
<!DOCTYPE html>
<html>
<frameset cols="100%">
<frame src="form_a.htm">
</frameset>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37743190
复制相关文章
相似问题