使用TideSDK,如何拥有一个没有Windows风格边框的窗口,并保持可拖动?
我尝试两件事:
首先像这样配置我的 tiapp.xml
<width>3000</width>
<max-width>3000</max-width>
<min-width>0</min-width>
<height>1280</height>
<max-height>1280</max-height>
<min-height>0</min-height>
<fullscreen>false</fullscreen>
<resizable>true</resizable>
<transparency >1.0</transparency >
<transparent-background>true</transparent-background>
并将我的应用程序包含在这样的 div 中:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#draggable { width: 150px; height: 150px; left: 10px}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
这很酷,因为我有完整的 css 可自定义窗口可拖动,但如果我希望它在双屏中工作,我必须将最大宽度设置为 ~4000,并且它看起来最多限制为 3000。 (即使我在 tiapp.xml 文件中设置了更大的值)。请注意,如果我没有设置很大的宽度和高度,当我的应用程序(div)接近限制时,我的桌面上会出现一个滚动条。
我尝试快速执行其他操作来添加标签
<chrome>false</chrome>
这看起来是一个更好的方法,但是,我失去了窗口上的可拖动控件。我不知道如何用javascript拖动tidesdk窗口。可能有解决方案来创建我自己的“chrome”吗?
这个问题的金矿是这个tidesdk google groups帖子上发布的答案:https://groups.google.com/forum/#!topic/tidesdk/jW664E2lPlc https://groups.google.com/forum/#!topic/tidesdk/jW664E2lPlc
首先,您需要提供自己的方式来让用户移动窗口 - 您自己的版本,例如 Windows 8 Metro 风格的顶部可拖动的位置,标题栏曾经是这样的。
举例来说(不用担心样式),例如
<div id="windowTitleBar">
<button id="windowMinimize" class="windowMaxMinButtons">[_]</button>
<button id="windowClose" class="windowMaxMinButtons">[X]</button>
</div>
其次,在您的 javascript 中,您提供自己的拖动处理,利用Ti.UI
API。这是我所做的概念验证的示例。
(下面请注意,最小化功能有一个小技巧(?)以使窗口恢复后可以工作。如果您找到更好的方法,请添加您的修复程序,以便每个人都能受益!)
$(document).ready(function() {
/*
* WINDOW HIDE
*/
$("#windowMinimize").click(function()
{
event.preventDefault();
// From http://developer.appcelerator.com/question/131596/minimize-unminimize-under-windows-7
// One user found if we follow this magical sequence (max-unmax-min), the
// window will be responsive after restore. Confirmed on my Win 7
Ti.UI.getMainWindow().maximize();
Ti.UI.getMainWindow().unmaximize();
Ti.UI.getMainWindow().minimize();
});
$(".maximize").click(function() {
event.preventDefault();
if(!Ti.UI.getMainWindow().isMaximized())
{
Ti.UI.getMainWindow().maximize();
} else {
Ti.UI.getMainWindow().unmaximize();
}
});
/*
* WINDOW CLOSE
*/
$("#windowClose").click(function()
{
event.preventDefault();
Ti.UI.getMainWindow().close();
//system.window.target.hide();
Ti.App.exit();
});
/*
* WINDOW "Title Bar"
*/
$("#windowTitleBar").mousedown ( function ( event )
{
event.preventDefault();
if(!Ti.UI.getMainWindow().isMaximized())
{
var diffX = event.pageX;
var diffY = event.pageY;
$(document).mousemove ( function ( event )
{
event.preventDefault();
if (event.screenY - diffY < screen.height-100)
Ti.UI.getMainWindow().moveTo(event.screenX - diffX, event.screenY - diffY);
});
}
});
$(document).mouseup ( function ( event )
{
event.preventDefault();
$(document).unbind('mousemove');
});
$("#windowTitleBar").dblclick ( function ( event )
{
event.preventDefault();
if (!Ti.UI.getMainWindow().isMaximized())
Ti.UI.getMainWindow().maximize();
else
Ti.UI.getMainWindow().unmaximize();
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)