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

做 Passport nodejs时的javascript语法
我有一个关于 JavaScript 语法的问题。实际上，我在自学 MEAN 堆栈教程时想出了编码(https://thinkster.io/mean-stack-tutorial#adding-aut
Perl && 做 { 最后; };
在我的书中它使用了这样的东西: for($ARGV[0]) { Expression && do { print "..."; last; }; ... } for 循环不完整吗？另外，do 的意义何
c - 做 while 循环过早退出
我已经编写了读取开关状态的代码，如果按 3 次 # 则退出。 void allkeypadTest(void) { static uint8_t modeKeyCount=0; do
Java 做 while 猜谜游戏
因此，对于上周我必须做的作业，我必须使用 4 个 do-while 循环和 if 语句在 Java 中制作一个猜谜游戏。我无法成功完成它，类(class)已经继续，没有为我提供任何帮助。如果有人可以查
c - 做 while 和右移没有效果
int i=1,j=0,n=10,k; do{ j+=i; i<<1; printf("%d\n",i); // printf("%d\n",12<<1); }while
java - 做 while 循环问题
此代码用于基本杂货计算器的按钮。当我按下按钮时，一个输入对话框会显示您输入商品价格的位置。我遇到的问题是我无法弄清楚如何获得 do ... while 循环以使输入对话框在输入后弹出。我希望它始终恢
c++ - 做 while 循环和其他
当我在循环中修改字符串或另一个变量时，它的条件是否每次都重新计算？或者在循环开始前一次 std::string a("aa"); do { a = "aaaa"; } while(a.size<10)
C 编程做 while
我刚刚写了这个，但我找不到问题。我使用代码块并编写了这个问题 error: expected 'while' before '{' token === Build finished: 1 errors
c 做 while 循环不起作用？
do { printf("Enter number (0-6): ", ""); scanf("%d", &Num); }while(Num >= 0 && Num 表示“超过”，<表
C++ 做 while 循环
我有一个包含 10 个项目的 vector (为简单起见，所有项目都属于同一类，称其为“a”)。我想要做的是检查“A”不是 a) 隐藏墙壁或 b) 隐藏另一个“A”。我有一个碰撞函数可以做到这一点。
Android 做 while 循环
嗨，这是我的第二个问题。我有下表 |-----|-------|------|------| |._id.|..INFO.|.DONE.|.LAST.| |..1..|...A...|...N..|.
C:做 {...} while(0)？
这个问题在这里已经有了答案: 关闭 12 年前。 Possible Duplicates: Why are there sometimes meaningless do/while and if/e
f# - 让!/做!总是在新线程中运行异步对象？
来自 wikibook在 F# 上有一小部分它说: What does let! do?# let! runs an async object on its own thread, then it i
haskell - (某事-> 做)的意思
我在 Real World Haskell 书中遇到了以下函数: namesMatching pat | not (isPattern pat) = do exists do
r - 做 arrangeGrob 时是否可以裁剪图？
我有一个类似于下面的用例，我创建了多个图并使用 gridExtra 将它们排列到一些页面布局中，最后使用 ggsave 将其保存为 PDF : p1 % mutate(label2
clojure - 打嗝代码没有响应没有(做(每个级别的html5
当我使用具有 for 循环的嵌套 let 语句时，如果没有 (do (html5 ..))，我将无法运行内部 [:tr]。 (defpartial column-settings-layout [&
virtualbox - 做 vagrant up 时出错
执行 vagrant up 时出现此错误: anr@anr-Lenovo-G505s ~ $ vagrant up Bringing machine 'default' up with 'virtua
perl - 错误消息:无法对未定义的值调用方法“做”
# ################################################# # Subroutine to add data to the table Blas
powershell - 做…直到-使用ValidPattern读取主机
我想创建一个检查特定日期格式的读取主机。此外，目标是检查用户输入是否正确，如果不正确，则提示应再次弹出。当我刚接触编程时，发现了这段代码，这似乎很合适。我仍然在努力“直到” do {
tensorflow - 做 Tensorflow 教程时出错
我关注这个tutorial在谷歌云机器学习引擎上进行培训。我一步一步地跟着它，但是在将 ml 作业提交到云时我遇到了错误。我运行了这个命令。 sam@sam-VirtualBox:~/models/r

首页

博学

6Ren·AI

商城

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