| Autor | Zpráva | ||
|---|---|---|---|
| Clint Profil |
Ahoj, měl bych dotaz, mám stránku s odkazy a pokud kliknu na příslušný odkaz, tak my vyskočí na stránkách modální okno. Které můžu minimalizovat, maximalizovat, posouvat po stránce a samozřejmě zavřít.
Můj dotaz zní nevíte někdo, jak by se dalo vyřešit, abych mohl modální okno zvětšovat nebo zmenšovat podobným způsobem, jak je to ve widlích. používám nyní tuto fci: function resizeWindow(windowData) {
$('.resizeWindow').mousedown(function(event){
var mleft = event.pageX;
var mtop = event.pageY;
$("#info").text(mleft+", "+mtop);
$('#modal-window-' + windowData['id']).css('width', mleft).css('height', mtop);
});
}bohužel to reaguje na kliknutí myši, chci abych to reagovalo, když na příslušným elementu podržím tlačítko myši a budu táhnout, dále bohužel nevím, jak zjistit souřadnice myši k aktuálnímu modálnímu oknu. Díky za radu |
||
| Witiko Profil |
#2 · Zasláno: 15. 2. 2011, 18:08:17
Mohl bych požádat o kód, kterým modální okno otevíráš? :-)
|
||
| Chamurappi Profil |
#3 · Zasláno: 15. 2. 2011, 18:21:37
Reaguji na Clinta:
„Které můžu minimalizovat, maximalizovat, posouvat po stránce“ To se u modálního okna opravdu hodí, když s ničím mimo něj nic dělat nejde :-) „bohužel nevím, jak zjistit souřadnice myši k aktuálnímu modálnímu oknu“ Nepotřebuješ je. Při onmousedown si zapamatuješ aktuální souřadnice (vzhledem k něčemu neměnnému) a pak při onmousemove zvětšíš velikost okna z té původní o rozdíl současných souřadnic a těch zapamatovaných. Při onmouseup zrušíš sledování onmousemove. Nějak takhle.
|
||
| Clint Profil |
To: Witiko
takže tady je kód mám to v rozpracované fázi: nejdříve html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/modal.css">
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollFollow.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/modalTwo.js"></script>
<title>jQuery klouzací modální okna</title>
<script type="text/javascript">
var windowDataText = new Array();
// id modalniho okna musi byt jedinecny znaci id modalniho okna (modal-window-text) posledni slovo "text"
windowDataText["id"] = "text";
// sirka modalniho okna
windowDataText["width"] = "500";
// vyska modalniho okna (pokud nebude zadana bude se okno prizpusobovat obsahu)
windowDataText["height"] = "";
// umisteni modalniho okna z leva (pokud nebude zadano sirky)
windowDataText["windowLeft"] = "100";
// umisteni modalniho okna ze shora (pokud nebude zadano vypocte se na zaklade vysky, min. vydalenost od horniho okrahje je 50px )
windowDataText["windowTop"] = "100";
// povolit automaticky scroling (modalni okno bude scrollovat po obrazovce)
windowDataText["scrollButton"] = "Y";
// povolit min. a max. modalniho okna
windowDataText["min_maxButton"] = "Y";
// povoli zavrani modalniho okna
windowDataText["closeButton"] = "Y";
// povoli pretahovani modalniho okna po obrazovce
windowDataText["moveWindows"] = "Y";
</script>
</head>
<body>
<div id="page">
<ul>
<li><a href="#" onClick="showModalWindow(windowDataText); return false;">ukaz okno s textem</a></li>
</ul>
<div class="content-site">
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
</div>
<!-- textove modalni okno -->
<div id="modal-window-text" class="modal-window max-window" style="display: none;">
<div class="topWindow">
<strong>- Nadpis modálního okna -</strong>
<script type="text/javascript">if (windowDataText["closeButton"] == "Y") document.write('<div class="close" onclick="closeModal(windowDataText); return false;"></div>');</script>
<script type="text/javascript">if (windowDataText["min_maxButton"] == "Y") document.write('<div class="maximalize" onclick="maxModal(windowDataText); return false;"></div>');</script>
<script type="text/javascript">if (windowDataText["min_maxButton"] == "Y") document.write('<div class="minimalize" onclick="minModal(windowDataText); return false;"></div>');</script>
<script type="text/javascript">if (windowDataText["scrollButton"] == "Y") document.write('<div class="exampleLink scroling"></div>');</script>
<div class="cleaner"></div>
</div>
<div class="window-content">
<p>
Text v modálním okně, zadán přímo v kódu nebo pomoci wysiwyg editoru. Toto okno lze
využít k vložení celého wsw obsahu. Pokud chceme, aby text v okně byl naformátovaný
je pořeba vytvořit pro toto styly.
</p>
</div>
</div>
<!-- /textove modalni okno -->
</div>
</body>
</html> |
||
| Clint Profil |
a teď modalTwo.js, ostatní jsou knihovny:
// funkce zobrazi modalni okno
function showModalWindow(windowData) {
// umistime okno na stranku
sizeModal(windowData);
// zobrazime okno, aby bylo viditelne
showModal(windowData);
// presouvani okna
if (windowData['moveWindows'] == "Y") {
$('#modal-window-' + windowData['id'] + ' .topWindow').addClass('moveModal');
// akce pri premistovani okna pomoci mysi
$('#modal-window-' + windowData['id'] + ' .topWindow').mousedown(function() {
$('#modal-window-' + windowData['id']).draggable();
$('#modal-window-' + windowData['id']).css('z-index', '50').css('opacity', '.75');
});
// pri odjeti mysi
$('#modal-window-' + windowData['id'] + ' .topWindow').mouseout(function() {
$('#modal-window-' + windowData['id']).css('z-index', '10').css('opacity', '1');
});
}
// scroling modalniho okna
if (windowData['scrollButton'] == "Y") {
$('#modal-window-' + windowData['id']).scrollFollow({
speed: 1000, // rychlost klouzani
offset: 50, // na kolik pixel bude ustupovat klouzaci okno od horni casti prohlizece
killSwitch: 'exampleLink', // class objektu povolujici/zakazujici posun
onText: 'off', // text zobrazen pri zapnutem rolovani
offText: 'on' // text zobrazen pri vypnutem rolovani
});
// akce na kliknuti na ikonu scroling
$('#modal-window-' + windowData['id'] + ' .scroling').click(function() {
$('#modal-window-' + windowData['id'] + ' .scroling').toggleClass('scroling-off');
});
}
}
// funkce nastavi umisteni modalniho okna na strance
function sizeModal(windowData) {
// Umisteni modalniho okna
var windowTop = windowData['windowTop'];
var windowLeft = windowData['windowLeft'];
// Rozměry modálního okna.
var modalWidth = windowData['width'];
var modalHeight = windowData['height'];
// vypocitame pozici okna odsazeni ze shora
if (windowTop) {
var modalTop = windowTop + 'px';
} else {
var modalTop = Math.floor(modalHeight / 2) + 'px';
}
// vypocitame pozici okna odsazeni z leva
if (windowLeft) {
var modalLeft = windowLeft + 'px';
} else {
var modalLeft = Math.floor(modalWidth / 2) + 'px';
}
// Nastavíme modální okno
$('#modal-window-' + windowData['id']).css('width', modalWidth).css('height', modalHeight).css('top', modalTop).css('left', modalLeft).css('position', 'absolute');
}
// funkce zobrazi okno
function showModal(windowData) {
$('#modal-window-' + windowData['id']).fadeIn(500);
$('#modal-window-' + windowData['id'] + ' .window-content').fadeIn(250);
}
// funkce uzavre okno
function closeModal(windowData) {
$('#modal-window-' + windowData['id'] + ' .window-content').fadeOut(250);
$('#modal-window-' + windowData['id']).fadeOut(500);
}
// funkce minimalizuje modalni okno
function minModal(windowData) {
$('#modal-window-' + windowData['id']).toggleClass('min-window');
$('#modal-window-' + windowData['id']).removeClass('max-window');
$('#modal-window-' + windowData['id']).each(function(idx,el){
el.style.position='absolute';
el.style.left = '';
el.style.top = '0';
el.style.right = '0';
el.style.width = '300px';
el.style.height = '27px';
});
}
// funkce maximalizuje modalni okno
function maxModal(windowData) {
$('#modal-window-' + windowData['id']).removeClass('min-window');
$('#modal-window-' + windowData['id']).toggleClass('max-window');
$('#modal-window-' + windowData['id']).each(function(idx,el){
el.style.position='absolute';
el.style.right = '';
el.style.width = '';
el.style.height = '';
});
// umisteni okna pri opetovne maximalizaci
sizeModal(windowData);
}
// zmena resize okna
function resizeWindow(windowData) {
$('.resizeWindow').mousedown(function(event){
var mleft = event.pageX;
var mtop = event.pageY;
$("#info").text(mleft+", "+mtop);
$('#modal-window-' + windowData['id']).css('width', mleft).css('height', mtop);
});
}má to navíc i automatický scroling, takže pokud je na stránce dlouhý text a my scrolujeme, tak modální okno jede spolu se stránkou, lze Moderátor Chamurappi: Rozděleno na dva příspěvky kvůli přidání [pre]… a stejně to bylo i v tom jednom useknuté.
|
||
| Witiko Profil |
#6 · Zasláno: 15. 2. 2011, 20:08:06 · Upravil/a: Witiko
Clint:
Array v javascriptu není asociativní pole, stačí si vytvořit instanci prostého objektu, tzn.: var windowDataText = new Object(); nebo var windowDataText = {
id: "text",
width: "500",
height: "",
windowLeft: "100",
windowTop: "100",
scrollButton: "Y",
min_maxButton: "Y",
closeButton: "Y",
moveWindows: "Y"
};Instance objektu Array se liší od prostého objektu pouze tím, že dědí metody na manipulaci s poli od prototypu objektu Array a má vlastnost length, jejíž getter reflektuje počet prvků v poli. Za prvek se ale bere pouze prvek označený číselným indexem, tedy pole[celé číslo]. Jak už jsem říkal, pole nejsou asociativní. Ani tomu není potřeba, jelikož prostý objekt díky nestatičnosti objektového modelu javascriptu k tomuto účelu dostačuje. Jinak celkový návrh kódu mi přijde mírně kostrbatý. Toto si říká o objektové zpracování, kdy si vytvoříme prototyp ModálníOkno, na něž budou navázány veškeré metody a vlastnosti, které se zde nacházejí v globálním jmenném prostoru. Jednotlivá okna pak budou instance tohoto prototypu. Jinak souřadnice myši k modálnímu oknu zjistíš snadno: Zjistíš si pozici myši vůči levému hornímu rohu dokumentu. Zjistíš si pozici modálního okna vůči levému hornímu rohu dokumentu. (pozici okna poupravíš o výšku / šířku modálního okna podle toho za jaký roh je taháno) Hodnoty odečteš. |
||
| Clint Profil |
#7 · Zasláno: 15. 2. 2011, 21:18:21
díky moc, je pravda, že to ještě projde čistící metodou :-), abych řekl pravdu jsem v jS a jQuery zatím začátečník, ale poslední dobou do toho pronikám docela rychle, tak jsem si i našel cestu k tomu, abych se to naučil rychle, zajímavé je, že jsem to tolik let odsuzoval a najednou mi to připadá jako dobrá věc. Ještě jednou díky za rady
|
||
| Clint Profil |
ještě menší dotaz už se mi modální okno roztahuje, ale nedaří se mi pokud pustím tlačítko, aby se změna zastavila, přikládám funkci, díky za radu
// zmena resize okna
function resizeWindow(windowData) {
$('html').mousemove(function(event){
var mouseleft = event.pageX;
var mousetop = event.pageY;
var modalWidthNew = mouseleft - windowData['windowLeft'];
var modalHeightNew = mousetop - windowData['windowLeft'];
$('#modal-window-' + windowData['id']).css('width', modalWidthNew).css('height', modalHeightNew);
});
$('#modal-window-' + windowData['id']).mouseup(function() {
// zastaveni ???
});
} |
||
| Clint Profil |
tak jsem to už vyřešil stačilo přidat:
$('html').mouseup(function(event){
$('html').unbind('mousemove');
});teď už opravit, aby se to neresizovalo pokkud budu okno přemistovat Moderátor Chamurappi: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na
 ). |
||
| Chamurappi Profil |
#10 · Zasláno: 16. 2. 2011, 13:11:31
Reaguji na Clinta:
„stačilo přidat“ Stačilo se podívat na můj odkaz a převzít tamní logiku. V kódu nevidím nic, co by naznačovalo, že to modální okno je opravdu modální. Je skutečně modální? |
||
| Clint Profil |
#11 · Zasláno: 16. 2. 2011, 13:22:06
Chamurappi:Chtěl jsem to mít pořešený v jQuery
|
||
| Chamurappi Profil |
#12 · Zasláno: 16. 2. 2011, 13:59:32
Reaguji na Clinta:
Nerozumím, na co je to reakce. Logika skriptu je naprosto stejná nehledě na přítomnost frameworku a okno není modální, pokud jeho přítomnost neblokuje práci se zbytkem aplikace/stránky. |
||
| Clint Profil |
#13 · Zasláno: 16. 2. 2011, 14:41:47
Chamurappi:
> Reaguji na Clinta: > Nerozumím, na co je to reakce. Logika skriptu je naprosto stejná nehledě na přítomnost frameworku a okno není modální, pokud jeho přítomnost neblokuje práci se zbytkem aplikace/stránky. okno neblokuje práci se stránkou, text na stránce lze označovat kopírovat, rolovat stránku apod. |
||
| Chamurappi Profil |
#14 · Zasláno: 16. 2. 2011, 14:46:47 · Upravil/a: Chamurappi
Reaguji na Clinta:
V tom případě to ale není modální okno. (Citovat celý příspěvek je mimochodem docela divný zlozvyk… když už rejpu :-)) |
||
| Clint Profil |
#15 · Zasláno: 16. 2. 2011, 15:48:09 · Upravil/a: Clint
no jak se říká zase jsem se snažil vynalézt kolo a už to někdo přede mnou udělal :-) http://jqueryui.com/home, ale zase na druhou stranu jsem se naučil pracovat s JS a jQuery, není to až na takové skvělé úrovni, ale lepší něco než nic
|
||
| Chamurappi Profil |
#16 · Zasláno: 16. 2. 2011, 16:10:20
Reaguji na Clinta:
„a už to někdo přede mnou udělal :-)“ To je ale překvapení. Před tebou jsem to udělal třeba i já, už někdy před téměř osmi lety. Je to tak triviální, že skoro ani nemá cenu se zdržovat hledáním. „ale lepší něco než nic“ Lepší něco malého než líná stokilová knihovna. Proč ve svém skriptu tolikrát vyhledáváš elementy podle id? Proč si uchováváš id a ne reference na již nalezené elementy? Okno, které vytváříš skriptem, přeci vůbec nepotřebuje atribut id.
|
||
| Clint Profil |
#17 · Zasláno: 17. 2. 2011, 11:24:56
Chamurappi:
jak jsem psal, s jQuery jsem začal, tak to není až na takové úrovni, jak by si každý představoval, jinak si vážím všech rad a věřím že další moje věc v jQuery bude o poznání lepší |
||
| Witiko Profil |
#18 · Zasláno: 17. 2. 2011, 16:22:18
Clint:
Tvé faktické mezery se nepojí pouze s jQuery, což je pouze abstraktizační nadstavba na javascript. Ten studuj. :) |
||
|
Časová prodleva: 13 let
|
|||
0