EDIT: I Mettez cet extrait de code dans JSBIN: http://jsbin.com/ Eneru J'essaie de laisser l'utilisateur redimensionner (verticalement) un élément div avec jQuery. J'ai lu sur JQuery Ui, je l'ai essayé et, dans certaines minutes, je l'avais du travail. Mais la bibliothèque ajoute une surcharge de 25 kb que je voudrais éviter, car je ne veux que de simples redimensionnement vertical. J'ai donc essayé de le faire seul. Ici c'est le HTML, j'utilise le style inline pour clarté: Comme vous pouvez le constater, il y a une petite barre sous l'élément div. L'utilisateur peut donc le faire glisser. haut ou bas pour redimensionner la div. Ici c'est le code JavaScript (à l'aide de jQuery): Ça fonctionne, plus ou moins, mais si vous faites glisser la barre trop rapide, il s'arrête après le mouvement de la souris et tout pauses. C'est la première fois que j'essaie de faire quelque chose sérieux (ahem) avec JS et JQuery, donc je ferais peut-être quelque chose d'idiot. Si oui, s'il vous plaît, dites-moi :)
4 Réponses :
vous Entends-moi, écoutez-moi: JavaScript sur les navigateurs est une chose horrible et horrible. Il existe de nombreux moteurs dans de nombreuses versions avec de nombreux systèmes d'exploitation différents, qui ont toutes de nombreuses subtilités, qui font tout ce qui rend javascript à travailler avec. Il y a une raison parfaitement bonne raison pour laquelle les bibliothèques telles que JQuery (et leurs extensions) ont explosé en popularité: beaucoup de grands programmeurs ont passé de nombreuses heures à abstraire toutes ces incohérences horribles éloignées afin de ne pas avoir à s'y inquiéter. < / p>
Maintenant, je ne suis pas sûr de votre base d'utilisateurs, peut-être que vous traitez de vieilles femmes au foyer qui ont toujours un numéro de numérotation. Mais pour la plupart en ce jour-là et âge, les 25 kb ont été touchés sur la charge de la page initiale (comme il sera mis en cache ensuite) pour la tranquillité d'esprit que cela va travailler dans tous les navigateurs de manière constante est un petit prix à payer. Il n'y a rien de tel que "simple" redimensionnement lorsqu'il s'agit de JavaScript, vous feriez donc mieux d'utiliser l'interface utilisateur.
D'accord. Si vous payez déjà le prix de la mise en jQuery, apportant le noyau et la redoublement n'est pas que beaucoup plus de charge. En outre, si vous connaissez que vos utilisateurs auront accès à Internet, vous pouvez utiliser l'API Google Ajax Bibliothèques pour apporter JQuery UI, disponible sur code.google.com/apis/ajaxlibs - et si vos utilisateurs ont déjà frappé un site en l'utilisant, ce sera déjà mis en cache, apportant efficacement zéro téléchargement supplémentaire à ce stade.
Vous avez raison, ce n'est pas si beaucoup, et j'ai noté qu'il est difficile d'obtenir la compatibilité des traversiers. Quoi qu'il en soit, ce n'est pas mon site, alors je ne me suis donc pas réalisé que ils servent des tonnes de javascript sans minier ni gzipper . Alors j'ai tout comprimé et maintenant, même avec JQuery Ui, il est plus petit qu'avant! Merci.
D'accord. Mais il y a des bibliothèques plus petites qui font le même travail que JQuery Ui!
N'apprenez pas à conduire - sans parler de la réparation - une voiture. Il suffit de prendre un taxi. Moins 1.
Je suis d'accord avec Paolo sur l'utilisation de l'interface utilisateur, mais voici quelques modifications à votre code pour le faire fonctionner:
$(document).ready(function(){
var resizing = false;
var frame = $("#frame");
$(document).mouseup(function(e) {
resizing = false;
});
$("#frame-grip").mousedown(function(e) {
e.preventDefault();
resizing = true;
});
$(document).mousemove(function(e) {
if(resizing) {
var origHeightFrame = frame.height();
var origPosYGrip = $("#frame-grip").offset().top;
var gripHeight = $("#frame-grip").height();
frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
}
});
});
Vous pouvez enregistrer avoir un gestionnaire de ne rien appelle lorsque vous ne redimensionnez pas, en liant uniquement la fonction MOUSEMOVE lorsque vous faites glisser: (échantillon à
Cela ne fonctionne pas très bien avec le chrome 3.0.190.4. Cela montre que j'essayais de réinventer la roue, la compatibilité des traverses croiseurs est une douleur: p
J'ai travaillé sur une chose similaire et j'ai réussi à le faire fonctionner avec une hauteur maximale et minimale et que je semble fonctionner très fluide, c'était mon code.
$(document).ready(function()
{
var resizing = false;
var frame = $("#frame").height();
$(document).mouseup(function(event)
{
resizing = false;
frame = $("#frame").height();
});
$("#frame-grip").mousedown(function(event)
{
resizing = event.pageY;
});
$(document).mousemove(function(event)
{
if (resizing)
{
$("#frame").height(frame + resizing - event.pageY);
}
});
});
Peut-être expliquer comment votre code s'appliquerait à cette question. Les lignes de commentaire dans le code aideraient également.
Si vous aviez déjà travaillé, ne vous inquiétez pas pour cela. Inquiétez lorsque les gens commencent à se plaindre ou que vous avez 5 000 utilisateurs une minute frappant le site et cela commence à vous coûter quelque chose. Ne pas optimiser tôt!
Merci. En fait, le site compte environ 100 000 pages quotidiennes, et il servait près de 100 Ko de JavaScript non compressé. Je mets dans l'interface utilisateur JQuery et quand minifiée et gzippée, elle est plus petite qu'avant :)