Сделай прозрачное прозрачное окно с помощью tidesdk

Question

Сделай прозрачное прозрачное окно с помощью tidesdk

Используя 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>

Это выглядит лучше, но я теряю перетаскиваемый элемент управления на своих окнах. И я не знаю, как можно перетащить окна TidesDK с JavaScript. Может быть, есть решение для создания собственного "хрома"?

3

tidesdk

Источник

user1932710 22 май '13 в 18:38

1 ответ

Другие вопросы по тегам tidesdk

user135114 18 сен '13 в 22:06 2013-09-18 22:06 · Answer 1 · 2013-09-18 22:06

Золотая жила для этого вопроса - ответы, опубликованные в этой ветке групп tidesdk google: https://groups.google.com/forum/

Во-первых, вы должны предоставить свой собственный способ, позволяющий пользователю перемещать окно, - свою собственную версию чего-то вроде стиля Windows 8 "верхний-на-перетаскиваемый-где-то-заголовок-строка-используется-быть". Для примера (не заботясь о моделировании), например

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