Question

使用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”吗？

Answer 1

这个问题的金矿是这个tidesdk google群组帖子上发布的答案：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提供自己的拖动处理功能。这是我做过的概念验证的样本。
（请注意，以下内容中，最小化功能有一点点破解（？），以便在恢复后使窗口工作。如果找到更好的方法，请添加修复程序，以便每个人都能受益！） < / p>

$(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();
    });
});

使用tidesdk创建一个可拖动的透明窗口

1 个答案: