tidesdk - 用tidesdk做一个可拖动的透明窗口-6ren

tidesdk - 用tidesdk做一个可拖动的透明窗口

转载作者：行者123 更新时间：2023-12-04 02:56:04

27

4

使用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

首先，您需要提供您自己的方式来让用户四处移动窗口——您自己的版本，例如 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();
    });
});

关于tidesdk - 用tidesdk做一个可拖动的透明窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16699266/

27

4

0

文章推荐： angularjs - 如何以 Angular 手动获取$attr

文章推荐： perl - 可以使用 Perl 的 Text::CSV_XS 从 CSV 中删除列吗？

文章推荐： dataset - 多维数据聚类

文章推荐： ruby-on-rails - rails : strong_params and getter/setter methods

tidesdk - TideSDK 已经失效了吗？
我对使用 HTML5+webkit 创建桌面应用程序感兴趣，并且希望能够为各种目标平台构建独立的可执行文件，例如适用于 Windows 的 .exe 文件和适用于 Mac OS 的 .dmg 镜像。我
tidesdk - tidesdk 的单一安全可执行文件
我刚开始调查 TideSdk并注意到当我“编译”(或打包)一个项目(在 Win-7 中)时，我得到了所有这些依赖项，它们实际上是应用程序的未编译源代码。有什么办法可以: 让Tide SDK把一个文件
tidesdk - 在 TideSDK 应用程序上检测窗口鼠标离开
我正在使用 TideSDK 开发我的第一个应用程序。我有一些类似工具栏的按钮，我希望它们在鼠标离开窗口时淡出。不幸的是，看起来 TideSDK 不会触发 mouseout或 mouseleave事件
tidesdk - 有没有办法让 TideSDK 窗口在屏幕中居中？
使用 TideSDK 窗口时，您可以控制它们在屏幕中的位置。但是，我找不到任何方法来检索屏幕的大小，也找不到使窗口居中的方法。有没有办法做到这一点？最佳答案您可以使用 window.screen
tidesdk - 在后台运行 TIdeSDK 应用程序
当用户单击后台运行应用程序按钮时，我想在后台运行潮汐SDK应用程序。我怎样才能做到这一点。所以该应用程序不会显示在前面。 tideSDK中可以实现这个功能吗？任何实现这一目标的指示都会很棒。最佳答案
tidesdk - 有没有办法让 TideSDK 窗口在屏幕中居中？
使用 TideSDK 窗口时，您可以控制它们在屏幕中的位置。但是，我找不到任何方法来检索屏幕的大小，也找不到使窗口居中的方法。有没有办法做到这一点？最佳答案您可以使用 window.screen
tidesdk - TideSDK 和 TideKit 在平台支持上的核心区别是什么？
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 9 年前。 Improve
tidesdk - 在 Windows 上使用 TideSDK 打包应用程序时需要帮助
我在 Windows 上使用 TideSDK 开发了一个应用程序，当我单击 LaunchApp 时它工作正常。现在我开始打包它并根据在 Windows 上打包的需要安装 ImageMagick 和 W
tidesdk - 用tidesdk做一个可拖动的透明窗口
使用TideSDK，如何让窗口没有Windows风格的边框，并且保持可拖动？我尝试了两件事: 首先像这样配置我的 tiapp.xml 3000 3000 0 1280 1280 0 false tr
TideSDK - 代码混淆
是否有一些指南可以用于混淆我的代码，尤其是 TideSDK 中的 php，有哪些可能的选项？最佳答案在我们为所有应用程序资源开发更永久的解决方案的同时，通过向tidebuilder.py CLI实
php - TideSDK PHP通过SSH连接
是否有可能使用tidesdk中的php通过ssh连接到服务器。我正在尝试使用 $session = ssh2_connect($server, 22); 但是发生了一个错误 Fatal error
javascript - TideSDK:有没有办法将数据传递给子窗口？
当我从我的主窗口创建一个子窗口时，我想向它传递一个 JavaScript 对象，但我不确定是否真的有办法做到这一点？用 TideSDK 创建的两个窗口都有自己的 JavaScript 环境，就像两个
postgresql - TideSDK - postgreSQL？
有没有办法连接到 postgreSQL 数据库？我注意到 PHP 模块没有 postgres 扩展，因此无法动态加载它。还有别的办法吗？外部 PHP 脚本将是最糟糕的解决方案。亚历克斯最佳答案
javascript - TideSDK:有没有办法设置菜单样式？
我正在使用 TidSDK 的菜单... var menu2 = Ti.UI.createMenu(); //Create menu items var subMenu1 = menu2.addItem
javascript - 移除焦点轮廓 TideSDK
当我在我的 TideSDK 应用程序中按下一个按钮时，我得到一个丑陋的焦点轮廓。有什么办法可以禁用/删除它吗？我试过将大纲设置为无，但它似乎没有做任何事情。 :focus, :active {
printing - 使用 TideSDK 进行静默打印
更新:我决定在我的项目中使用 appjs，而不是 TideSDK。使用 AppJS，您可以轻松制作节点模块，您可以在其中添加 C++ 模块，以便轻松使用静默打印。我建议任何对该主题感兴趣的人检查一下。
titanium - 使用 tidesdk 为其他平台构建桌面应用程序
我在尝试为其他平台构建 Tidesdk 桌面项目时遇到问题。我使用 linux，为 linux 构建完美。我是这样做的: ./tibuild.py -d /home/rooter/theapp/ -
javascript - 如何在 TideSdk 应用程序中去除窗口类似窗口的边框？
如何在 TideSdk 应用程序的窗口中去除类似窗口的边框？我在 API 中找不到解决方案... Screenshot. 抱歉英语不好。提前致谢! 最佳答案这是您在 tiapp.xml 文件中配置
css - Tidesdk 不支持 CSS
我不能在 tidesdk 中使用 css 做一些事情我尝试做一个 css 圆圈，我使用的是 1.3.1-beta，但它不起作用，我不知道我做错了什么。你能帮帮我吗？ S
python - 在 TideSDK 中订购菜单项
我正在向我的应用程序添加主菜单项。但是，它们仅在默认的“编辑”菜单项之后添加。 new_menu = Ti.UI.createMenu() fileItem = new_menu.addItem('F

首页

博学

6Ren·AI

商城

tidesdk - 用tidesdk做一个可拖动的透明窗口