如何创建停靠面板 [英] How to create a Docking Panel
本文介绍了如何创建停靠面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何创建停靠面板?我正在使用示例中的代码
在查看器停靠面板功能中，this"似乎是指窗口元素.也许它应该是别的东西?例如，当查看器创建搜索窗口时，它似乎指的是某个 div.
解决方案
我没有遇到像您这样的错误，但我遇到了另一个由空内容引起的问题.所以我明确地创建了一个 div 作为内容作为参数.此外，宽度 &高度也是必需的，否则面板将不显示.
Panel 类如下.
SimplePanel = function(parentContainer, id, title, content, x, y){this.content = 内容；Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, title,{shadow:false});//自动适应内容并且不允许调整大小.给定坐标的位置.//this.container.style.height = "150px";this.container.style.width = "450px";this.container.style.resize = "auto";this.container.style.left = x + "px";this.container.style.top = y + "px";};SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);SimplePanel.prototype.constructor = SimplePanel;SimplePanel.prototype.initialize = function(){this.title = this.createTitleBar(this.titleLabel || this.container.id);this.container.appendChild(this.title);this.container.appendChild(this.content);this.initializeMoveHandlers(this.container);this.closer = this.createCloseButton();this.title.appendChild(this.closer);var op = {left:false,heightAdjustment:45,marginTop:0};this.scrollcontainer = this.createScrollContainer(op);var html = ['','<div class="panel panel-default">','','<头>','<名称</th><th>状态</th><th>Found</th><th>Approved By</th><th>Description</th>','</thead>','','<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td</tr>','<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td</tr>','<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td</tr>','<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td</tr>','<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td</tr>','<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td</tr>','<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td</tr>','</tbody>','</表>','</div>','</div>'].join('
');$(this.scrollContainer).append(html);this.initializeMoveHandlers(this.title);this.initializeCloseHandler(this.closer);};我在控制台脚本上加载了这个面板.
var content = document.createElement('div');var mypanel = new SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content);mypanel.setVisible(true);
如果问题仍然存在，请提供一个小的示例文件.我可以在我身边进行测试.
How to create a docking panel? I am using the code from the example https://developer.autodesk.com/en/docs/viewer/v2/reference/javascript/dockingpanel/
that should inherit and override needed methods.
SimplePanel = function(parentContainer, id, title, content, x, y)
{
this.content = content;
Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, '');
// Auto-fit to the content and don't allow resize. Position at the coordinates given.
//
this.container.style.height = "auto";
this.container.style.width = "auto";
this.container.style.resize = "none";
this.container.style.left = x + "px";
this.container.style.top = y + "px";
};
SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;
SimplePanel.prototype.initialize = function()
{
// Override DockingPanel initialize() to:
// - create a standard title bar
// - click anywhere on the panel to move
// - create a close element at the bottom right
//
this.title = this.createTitleBar(this.titleLabel || this.container.id);
this.container.appendChild(this.title);
this.container.appendChild(this.content);
this.initializeMoveHandlers(this.container);
this.closer = document.createElement("div");
this.closer.className = "simplePanelClose";
this.closer.textContent = "Close";
this.initializeCloseHandler(this.closer);
this.container.appendChild(this.closer);
};
After this I am calling the created simple panel with:
var parent = document.getElementsByClassName('adsk-viewing-viewer')[0];
var panel = SimplePanel(parent, 'panel1', 'panel1');
It is returning error:
"Uncaught TypeError: this.setVisible is not a function at DockingPanel (viewer3D.js?v=2.11:34343)"
It seems to go from
Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, '');
to
var DockingPanel = function (parentContainer, id, title, options) {
and crash inside that.
Inside the viewer docking panel function "this" seems to be referring to the window element. Maybe it should be something else? When the viewer is creating the search window for example it seems to be referring to some div.
解决方案 I did not get such error like yours, but I hit another issue that is caused by empty content. So I explicitly created a div as the content to be the argument. In addition, width & height are also required, otherwise the panel will not show up.
The Panel class is as below.
SimplePanel = function(parentContainer, id, title, content, x, y)
{
this.content = content;
Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, title,{shadow:false});
// Auto-fit to the content and don't allow resize. Position at the coordinates given.
//
this.container.style.height = "150px";
this.container.style.width = "450px";
this.container.style.resize = "auto";
this.container.style.left = x + "px";
this.container.style.top = y + "px";
};
SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;
SimplePanel.prototype.initialize = function()
{
this.title = this.createTitleBar(this.titleLabel || this.container.id);
this.container.appendChild(this.title);
this.container.appendChild(this.content);
this.initializeMoveHandlers(this.container);
this.closer = this.createCloseButton();
this.title.appendChild(this.closer);
var op = {left:false,heightAdjustment:45,marginTop:0};
this.scrollcontainer = this.createScrollContainer(op);
var html = [
'<div class="uicomponent-panel-controls-container">',
'<div class="panel panel-default">',
'<table class="table table-hover table-responsive" id = "clashresultstable">',
'<thead>',
'<th>Name</th><th>Status</th><th>Found</th><th>Approved By</th><th>Description</th>',
'</thead>',
'<tbody>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'</tbody>',
'</table>',
'</div>',
'</div>'
].join('
');
$(this.scrollContainer).append(html);
this.initializeMoveHandlers(this.title);
this.initializeCloseHandler(this.closer);
};
I loaded this panel on console script.
var content = document.createElement('div');
var mypanel = new SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content);
mypanel.setVisible(true);
If you still have the issue, please provide a small sample file. I can give a test at my side.
这篇关于如何创建停靠面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆