2016-07-31 18 views
6

Czy to możliwe, i czy istnieją jakieś struktury obsługujące widżety odrywania w przeglądarce internetowej? W Visual Studio można wziąć dowolne okno i wyciągnąć je z głównego okna, aby utworzyć osobne okno przestawne.Widżety odrywania w ramce sieci?

Mamy natywną aplikację, do której przenosimy części do internetu. Obecnie mamy możliwość pobrania niektórych okien i przeciągnięcia ich z głównego okna, aby utworzyć osobne okno. Chcielibyśmy wspierać coś podobnego do tego w naszej internetowej wersji aplikacji.

Nie jesteśmy obecnie związani z żadną konkretną strukturą javascript dla interfejsu użytkownika, więc każdy wgląd w aktualny stan struktur Web UI w odniesieniu do tej funkcjonalności byłby doceniony.

+0

sprawdź to https://github.com/STRML/react-grid-layout (dotyczy struktury React) – Lojka

+0

To jest układ siatki. Szukamy okien narzędziowych do odrywania. – bpeikes

+0

Używasz przeglądarki w przeglądarce tak? Nie ma nikogo, o czym kiedykolwiek słyszałem. Zabawne jest to, że możesz to zrobić. Trzeba trochę smaru kolanowego, żeby obliczyć mechanikę. Po pierwsze, twoje "widżety" musiałyby być zaprojektowane tak, aby mogły być samodzielne w nowym oknie przeglądarki. – gforce301

Odpowiedz

0

Jest to możliwe w Internecie.

Myślę, że to zły pomysł. Oto dlaczego:

pop up, mechanizm na tarło nowych okien, potencjalnie zostać zablokowane,

jest rzadkością w praktyce, więc będzie przerwa oczekiwania użytkowników,

może to zająć trochę czasu, aby pracę prawidłowo

alternatywą byłoby mieć wirtualne okna wewnątrz strony internetowej, co mam na myśli to, aby coś podobnego, z wyjątkiem korzystania div wewnątrz strony, które mogą być zminimalizowane i przeniósł ale wewnątrz strony tylko

0

zgadzam w ith @Walle. Podejście "wirtualne okna" jest lepsze niż użycie wyskakujących okienek. Chciałbym rzucić okiem na Sencha i ich platformę Ext JS: Sencha Ext JS

Nigdy nie używałam tego, ponieważ jest zastrzeżona, jednak dema wyglądają bardzo obiecująco. Oto jeden pokazano „wirtualną”: Web Desktop

+0

Jest to fajna technologia do pracy, ale wymaga od programisty ponownego przemyślenia swojego podejścia (jak w przypadku wielu innych frameworków). Mają bardzo deklaratywne podejście, a ich dokumentacja nie jest najlepsza, jednak pracowałem z nią rok lub dwa lata temu, a kiedy już to zrozumiesz, jest to bardzo przyjemne środowisko. Jeśli jesteś gotów za to zapłacić, to kolejna rzecz, wiele innych darmowych frameworków zapewnia podobne technologie – Icepickle

1

To naprawdę zależy od tego, co chcesz osiągnąć, ale tutaj jest tępy przykład z jQuery:

function popup(id) { 
 
    $('#' + id + '-pop').prop('disabled', true); 
 

 
    var popup = window.open('', 'popup', 'resizable=yes'); 
 
    var content = $('#' + id).detach(); 
 
    $(popup.document.body).append(content); 
 

 
    popup.onbeforeunload = function() { 
 
    $('#' + id + '-pop').prop('disabled', false); 
 
    content.appendTo($('#' + id + '-parent')); 
 
    }; 
 
}
.tearable-parent { 
 
    border: 1px #000 solid; 
 
    display: inline-block; 
 
    padding: 5px; 
 
    margin: 5px; 
 
} 
 

 
button { 
 
    display: block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<body> 
 
    <div id="t1-parent" class="tearable-parent"> 
 
    <div id="t1"> 
 
     <span>This is tearable.</span> 
 
    </div> 
 
    </div> 
 
    <button id="t1-pop" onclick="popup('t1')">Pop me up</button> 
 
</body>

Nie można uruchomić przykład tutaj, ponieważ wyskakujące okienko nie jest dozwolone, ale tutaj jest fiddle link, gdzie możesz go wypróbować. Po zamknięciu popup przesuwa zawartość z powrotem. Pamiętaj, że możesz potrzebować dodatkowego okablowania, jeśli planujesz przenieść zawartość dynamiczną.

0

Jeśli przenosisz aplikację Windows do aplikacji internetowej (co robię przez ostatnie kilka lat), nie ma na rynku nic podobnego do extjs, szczególnie jeśli jest to aplikacja dla przedsiębiorstw.