3

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

4

1 回答 1

4

这个问题的金矿是发布在这个tidesdk google groups线程上的答案：https ://groups.google.com/forum/#!topic/tidesdk/jW664E2lPlc

首先，您需要提供自己的方式让用户移动窗口——您自己的版本，例如 Windows 8 Metro 风格的 top-is-draggable-where-the-title-bar-used-to-be。例如（不担心样式），例如

  <div id="windowTitleBar">
    <button id="windowMinimize" class="windowMaxMinButtons">[_]</button>
    <button id="windowClose" class="windowMaxMinButtons">[X]</button>
  </div>

其次，在您的 javascript 中，您可以利用Ti.UIAPI 提供自己的拖动处理。这是我所做的概念验证示例。
（注意在下面，最小化功能有一个小技巧（？），以使窗口在恢复后工作。如果您找到更好的方法，请添加您的修复，以便每个人都受益！）

$(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();
    });
});
于 2013-09-18T22:06:48.363 回答