recherche
Maisoninterface Webjs tutorielTri par glisser-souris Li ou Table_jquery implémenté par jquery

1. Page frontale

Copier le code Le code est le suivant :






广告管理























value="保存顺序" />

提示:按住鼠标拖动链接,之后单击保存按钮就可以完成对链接的排列










2、CSS样式

[css] view plaincopy在CODE上查看代码片派生到我的代码片

body,div,dl,dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding: 0;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}

a{color:#333;text- decoration:none;}
a:hover{color:#f30;text-decoration:underline}

body{font-family:"宋体",Arail,verdana;font-size:12px;line -hauteur:1,5em;couleur:#222;arrière-plan:#fff ;}


.clearfix:after{content:".";affichage:bloc;hauteur:0;clair:les deux;visibilité :hidden;}
.clearfix{display:block;}
* html .clearfix{height:1%;}
.clear{clear:both;}

/*文本对齐*/
.tr{text-align:right}
.tl{text-align:left;}
.tc{text-align:center;}

/*浮动* /
.fn-fl{float:left;}
.fn-fr{float:right;}

.m5{margin:5px;} .m10{margin:10px;}
.mt5 { margin-top:5px;}.mr5 { margin-right:5px;}.mb5 { margin-bottom:5px;}.ml5 { margin-left:5px;}
.mt10 { margin- top:10px;}.mr10 { margin-right:10px;}.mb10 { margin-bottom:10px;}.ml10 { margin-left:10px;}

.p5{padding:5px;} . p10{padding:10px;}
.pt5 { padding-top:5px;}.pr5 { padding-right:5px;}.pb5 { padding-bottom:5px;}.pl5 { padding-left:5px;}
.pt10 { padding-top:10px;}.pr10 { padding-right:10px;}.pb10 { padding-bottom:10px;}.pl10 { padding-left:10px;}

. mt30{margin-top:30px;}.mb30{margin-bottom:30px;}
.pt30{padding-top:30px;}.pb30{padding-bottom:30px;}

/*无效状态*/
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {background-color: #eee;cursor: not-allowed; box-shadow:aucun;opacité:0,5}

/*下拉列表*/
select{border:1px solid #ccc;border-radius:3px;padding:1px 2px;}

/*输入框*/
input:-moz-placeholder,textarea:-moz-placeholder {color: #999999;}
input:-ms-input-placeholder,textarea:-ms-input- placeholder {couleur : #999999;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {couleur : #999999;}

.txt,textarea,input[ type="text"], input[type="password"] {border: 1px solid #ccc;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;transition : border 0.2s linéaire 0s, box-shadow 0,2s linéaire 0s;border-radius:3px;padding:2px 3px;}
.txt:focus,textarea:focus,input[type="text"]:focus, input[type="password" ]:focus {border: 1px solid #2C5193;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(44, 81, 147, 0.6);}
.txta {font-size:12px;line-height:18px;}
.txt20{width:20px;}
.txt30{width:30px;}
.txt50{width:50px;}
.txt75{largeur:75px;}
.txt85{largeur:85px;}
.txt100{largeur:100px;}
.txt125{largeur:125px;}
.txt150{largeur:150px ;}
.txt175{width:175px;}
.txt200{width:200px;}
.txt250{width:250px;}
.txt280{width:280px;}
. txt300{width:300px;}
.txt350{width:350px;}
.txt400{width:400px;}

/*标准表格*/
.fn-table{width :100%;}
.fn-table>tbody>tr>td{padding:3px;background:#fff;border:1px solid #CEDCED;}
.fn-table>tbody>tr>th{ background:#E3F5FF;padding:2px;border:1px solid #CEDCED;font-weight:bold;}

.fn-table-space>tbody>tr:nth-child(2n 1)>td {background:#efefef;}

/*细线表格*/
.fn-table-line>tbody>tr>td{}

/*鼠标hover表格*/
.fn-table-mouse>tbody>tr:nth-child(2n 1)>td{background:#efefef;}
.fn-table tr.on>tbody>tr>td,.fn -table-mouse>tbody>tr:hover>td{background:#FCF8E3;}

/*功能表格*/
.fn-table-function>tbody>tr>td:nth-child (2n 1){background :#E3F5FF;text-align:right;font-weight:bold;}
.fn-table-function>tbody>tr>td:first-child{background:#E3F5FF;text- align:right;font-weight:bold;}

/*干净表格*/
.fn-table-clear{}
.fn-table-clear>tbody>tr>td{ padding:3px;background:#fff;border:none;}
.fn-table-clear>tbody>tr>th{background:#E3F5FF;padding:3px;border:none;}

/*iframe 头部样式,仅后台部分案例*/
.fn-iframe-hd{padding:2px 5px;background:#2C5193;margin-bottom:30px;line-height:22px;height:22px;color :#fff;position:fixed;left:0;top:0;width:100%;}
.fn-iframe-hd .close{background:url(/Manager/Themes/images/icons/closed.png ) centre sans répétition;float:right;width:14px;height:13px;cursor:pointer;padding:4px 5px;margin-right:10px;}
.fn-iframe-hd .close:hover{opacity :0.8;}
.fn-iframe-hd .tt{float:left;font-weight:bold;}

/*标准Tab选项卡*/
.fn-tab .hd li{float:left;margin-right:2px;padding:2px 5px;border:1px solid #2C5193;border-radius :5px 5px 0 0;cursor:pointer;background:#2C5193;color:#fff;}
.fn-tab .hd li.on{background:#4B8AF9;color:#fff;border:1px solid #4B8AF9 ;border-bottom:0;}
.fn-tab .bd{border:1px solid #ddd;padding:3px;margin-top:-1px;}
.fn-tab .bd div.item{ display:aucun;}
.fn-tab .bd div.on{display:block;}

/*搜索框*/
.fn-searchbar{border:1px solid #CEDCED; padding:2px;border-radius:3px;}
.fn-searchbar input,.fn-searchbar select{vertical-align:middle;}

/*分页*/
.fn- pager{background:#E3F5FF;border:1px solid #CEDCED;margin:0 0 5px;border-top:0;}
.fn-pager div{line-height:26px;white-space:nowrap;word- break:break-all;}
.fn-pager input{margin-left:5px;}
.fn-pager a{border:1px solid #E3F5FF;padding:3px 5px;}
.fn -pager span.on{background:#2C5193;border:1px solid #2C5193;color:#fff;padding:3px 5px;font-weight:bold;}
.fn-pager a:hover{background:#2C5193 ;border:1px solid #2C5193;color:#fff;}
entrée .fn-pager, .fn-pager select, .fn-pager a, .fn-pager span{vertical-align:middle;}
.fn-pagerExt{float:right;margin-top:-22px;}
.fn-pagerExt input{vertical-align:middle;}

/*按钮*/
.btn ,.fn-pager input[type='submit']{border-radius:3px;padding:1px 2px;border:1px solid #B3B3B3;cursor:pointer;background-image: Linear-gradient(vers le bas, #fff, #e6e6e6); box-shadow : 0 1px 0 rgba(255, 255, 255, 0.2) encart, 0 1px 2px rgba(0, 0, 0, 0.05);color:#666;line-height:20px;vertical-align:middle; text-decoration:none;padding:1px 3px ;}
a.btn{padding:3px 6px;}
.btn:hover{background:#eee;text-decoration:none;}

.btn-on,.fn-pager input[type='submit']{background-image:linear-gradient(vers le bas,#4b8af9,#2C5193);color:#fff;border-color:rgba(0, 0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.1);background-color:#2C5193;border:1px solid #2C5193 ;}
.btn-on : survol,.fn-pager input[type='submit']:hover{background:#4b8af9;color:#fff;}

.btn-gray{background:linear-gradient(to bottom,#ccc ,#efefef);color:#fff;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.1);curseur:non autorisé ;}
.btn-gray:hover{background:#eee;text-decoration:none;}

.btn:active{box-shadow:inset 0 1px 2px rgba(0,0,0 ,.25),encart 0 1px 3px rgba(0,0,0,0.15);}

#tooltip{position : absolue;bordure : 1px solide #333;arrière-plan : #f7f5d1;padding : 2px 5px ;color: #333;affichage: aucun;largeur: 500px;}
#tooltip{position:absolute;color:#333;display:block;background-color:#fff;border:1px solid #555;box- ombre:0 0 10px rgba(0,0,0,.3);border-radius:5px;padding:3px;min-width:160px;min-height:80px;}
#tooltip img{border-radius :5px;}

/*文字大小*/
.font12{font-size:12px;}
.font13{font-size:13px;}
.font14{font- taille:14px;}
.font15{font-size:15px;}
.font16{font-size:16px;}
.font17{font-size:17px;}
.font18{ font-size:18px;}
/*文字颜色*/
.font-red{color:Red;}
.font-green{color:Green;}
.font-white{ color:White;}
.font-gray{color:Gray;}

/*鼠标标记*/
.hand{cursor:pointer;}


3、主要js

jquery.js

ui.core.js

[javascript] view plaincopy et CODE上查看代码片派生到我的代码片

/*
* jQuery UI 1.7.1
*
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Double licence sous le MIT (MIT-LICENSE.txt)
* et licences GPL (GPL-LICENSE.txt).
*
* http://docs.jquery.com/UI
*/
;jQuery.ui || (function($) {

var _remove = $.fn.remove,
isFF2 ​​= $.browser.mozilla && (parseFloat($.browser.version)
//Fonctions d'assistance et objet ui
$.ui = {
version : "1.7.1",

// $.ui.plugin est obsolète. Utilisez plutôt le modèle de proxy.
plugin : {
ajouter : function(module, option, set) {
var proto = $.ui[module].prototype
for(var i in set) {
proto .plugins[i] = proto.plugins[i] || [];
proto.plugins[i].push([option, set[i]]);
}
},
call: function(instance, name, args) {
var set = instance.plugins[name];
if(!set || !instance.element[0].parentNode) { return }

for (var i = 0; i if (instance.options[set[i][0]]) {
set[i][1] .apply(instance.element, args);
}
}
}
},

contient : function(a, b) {
return document.compareDocumentPosition
? >
//Si le débordement est masqué, l'élément peut avoir du contenu supplémentaire, mais l'utilisateur souhaite le masquer
if ($(el).css('overflow') == 'hidden') { return false ; }

var scroll = (a && a == 'gauche') ? 'scrollLeft' : 'scrollTop',
has = false;

if (el[scroll] > 0) { return true; }

// À FAIRE : déterminer quels cas provoquent réellement cela
// si l'élément n'a pas le défilement défini, voir s'il est possible de
// définir le défilement
el[défilement] = 1;
has = (el[scroll] > 0);
el[défilement] = 0;
le retour a;
},

isOverAxis: function(x, reference, size) {
//Détermine quand la coordonnée x est sur l'axe de l'élément "b"
return (x > référence) && ( x },

isOver: function(y, x, top, left, height, width) {
//Détermine quand les coordonnées x, y sont sur l'élément "b"
return $ .ui.isOverAxis(y, top, height) && $.ui.isOverAxis(x, left, width);
},

keyCode : {
BACKSPACE : 8,
CAPS_LOCK : 20,
COMMA : 188,
CONTROL : 17,
DELETE : 46,
BAS : 40,
FIN : 35,
ENTER : 13,
ÉCHAP : 27,
ACCUEIL : 36,
INSÉRER : 45,
GAUCHE : 37,
NUMPAD_ADD : 107,
NUMPAD_DECIMAL : 110,
NUMPAD_DIVIDE : 111,
NUMPAD_ENTER : 108,
NUMPAD_MULTIPLY : 106,
NUMPAD_SUBTRACT : 109,
PAGE_DOWN : 34,
PAGE_UP : 33,
PÉRIODE : 190,
DROITE : 39,
MAJ : 16,
ESPACE : 32,
TAB : 9,
HAUT : 38
}
} ;

// Normalisation WAI-ARIA
if (isFF2) {
var attr = $.attr,
removeAttr = $.fn.removeAttr,
ariaNS = "http:/ /www.w3.org/2005/07/aaa",
ariaState = /^aria-/,
ariaRole = /^wairole:/;

$.attr = function(elem, nom, valeur) {
var set = valeur !== non défini;

return (name == 'role'
? (set
? attr.call(this, elem, name, "wairole:" value)
: (attr.apply(this , arguments) || "").replace(ariaRole, ""))
 : (ariaState.test(name)
? (set
? elem.setAttributeNS(ariaNS,
name.replace (ariaState, "aaa:"), valeur)
: attr.call(this, elem, name.replace(ariaState, "aaa:")))
: attr.apply(this, arguments))) ;
} ;

$.fn.removeAttr = function(name) {
return (ariaState.test(name)
? this.each(function() {
this.removeAttributeNS(ariaNS, name) .replace(ariaState, ""));
}) : removeAttr.call(this, name));
} ;
}

//plugins jQuery
$.fn.extend({
remove: function() {
// Safari a un événement de suppression natif qui supprime en fait les éléments DOM,
// nous devons donc utiliser triggerHandler au lieu de trigger (#3037
$("*", this).add(this).each(function() {
$(this). triggerHandler("remove");
});
return _remove.apply(this, arguments );

enableSelection: function() {
renvoie ceci
.attr('unselectable', 'off')
.css('MozUserSelect', '')
.unbind('selectstart.ui');
},

disableSelection : function() {
renvoie ceci
.attr('unselectable', 'on')
.css('MozUserSelect', 'none')
.bind('selectstart.ui', function() { return false; });
},

scrollParent : function() {
var scrollParent;($.browser.msie && (/(static| relatif)/).test(this.css('position'))) || (/absolute/).test(this.css('position'))) {
scrollParent = this.parents().filter (function() {
return (/(relative|absolute|fixed)/).test($.curCSS(this,'position',1)) && (/(auto|scroll)/).test($ .curCSS(this,'overflow',1) $.curCSS(this,'overflow-y',1) $.curCSS(this,'overflow-x',1));
}).eq(0);
} else {
scrollParent = this.parents().filter(function() {
return (/(auto|scroll)/).test($.curCSS(this,'overflow',1 ) $.curCSS(this,'overflow-y',1) $.curCSS(this,'overflow-x',1));
}).eq(0);
}

return (/fixed/).test(this.css('position')) || !scrollParent.longueur ? $(document) : scrollParent;
}
});


//Sélecteurs supplémentaires
$.extend($.expr[':'], {
data: function(elem, i, match) {
return !! $.data(elem, match[3]);
},

focusable : function(element) {
var nodeName = element.nodeName.toLowerCase(),
tabIndex = $ .attr(element, 'tabindex');
return (/input|select|textarea|button|object/.test(nodeName)
? !element.disabled
: 'a' == nodeName | | 'area' == nodeName
? element.href || !isNaN(tabIndex)
: !isNaN(tabIndex))
// l'élément et tous ses ancêtres doivent être visibles
/ / le navigateur peut signaler que la zone est masquée
&& !$(element)['area' == nodeName 'parents' : 'closest'](':hidden').length
},

tabbable : function(element) {
var tabIndex = $.attr(element, 'tabindex');
return (isNaN(tabIndex) || tabIndex >= 0) && $(element) .is(':focusable');
}
});


// $.widget est une usine pour créer des plugins jQuery
// en retirant du code passe-partout du code du plugin
fonction getter (espace de noms, plugin, méthode, args) {
function getMethods(type) {
var méthodes = $[namespace][plugin][type] || [] ;
return (typeof méthodes == 'string' ? méthodes.split(/,?s /) : méthodes);
}

var méthodes = getMethods('getter');
if (args.length == 1 && typeof args[0] == 'string') {
methods = METHODS.concat(getMethods('getterSetter'));
}
return ($.inArray(méthode, méthodes) != -1);
}

$.widget = function(name, prototype) {
var namespace = name.split(".")[0];
nom = nom.split(".")[1];

// créer une méthode de plugin
$.fn[name] = function(options) {
var isMethodCall = (typeof options == 'string'),
args = Array.prototype .slice.call(arguments, 1);

// empêcher les appels aux méthodes internes
if (isMethodCall && options.substring(0, 1) == '_') {
return this;
}

// gérer les méthodes getter
if (isMethodCall && getter(namespace, name, options, args)) {
var instance = $.data(this[0], name );
return (instance ? instance[options].apply(instance, args)
: undefined);
}

// gère l'initialisation et les méthodes non-getter
return this.each(function() {
var instance = $.data(this, name);

// constructeur
(!instance && !isMethodCall &&
$.data(this, name, new $[namespace][name](this, options))._init()
// appel de méthode
(instance && isMethodCall && $.isFunction(instance[options]) &&
instance[options].apply(instance, args)
});
} ;

// créer un constructeur de widget
$[namespace] = $[namespace] || {} ;
$[namespace][name] = function(element, options) {
var self = this;

this.namespace = espace de noms;
this.widgetName = nom;
this.widgetEventPrefix = $[namespace][name].eventPrefix || nom;
this.widgetBaseClass = nom de l'espace de noms '-' ;

this.options = $.extend({},
$.widget.defaults,
$[namespace][name].defaults,
$.metadata && $.metadata. get(element)(nom],
options);

this.element = $(element)
.bind('setData.' name, function(event, key, value) {
if (event.target == element) {
return self._setData(key, value);
}
})
.bind('getData.' name, function(event, key) {
if (event.target == element ) {
return self._getData(key);
}
})
.bind('remove', function() {
return self.destroy();
} );
} ;

// ajouter un prototype de widget
$[namespace][name].prototype = $.extend({}, $.widget.prototype, prototype);

// TODO : fusionner les propriétés getter et getterSetter du prototype de widget
// et du prototype de plugin
$[namespace][name].getterSetter = 'option';
} ;

$.widget.prototype = {
_init : function() {},
destroy : function() {
this.element.removeData(this.widgetName)
. removeClass(this.widgetBaseClass '-disabled' ' ' this.namespace '-state-disabled')
.removeAttr('aria-disabled');
},

option : function(clé, valeur) {
var options = clé,
self = this ;

if (typeof key == "string") {
if (value === undefined) {
return this._getData(key);
}
options = {};
options[clé] = valeur ;
}

$.each(options, function(clé, valeur) {
self._setData(clé, valeur);
});
},
_getData : function(key) {
return this.options[key] ;
},
_setData : function(clé, valeur) {
this.options[clé] = valeur ;

if (key == 'disabled') {
this.element
[value ? 'addClass' : 'removeClass'](
this.widgetBaseClass '-disabled' ' '
this.namespace '-state-disabled')
.attr("aria-disabled", value);
}
},

enable: function() {
this._setData('disabled', false);
},
disable : function() {
this._setData('disabled', true);
},

_trigger : function(type, event, data) {
var callback = this.options[type],
eventName = (type == this.widgetEventPrefix
? tapez : ce type.widgetEventPrefix );

événement = $.Événement(événement);
event.type = eventName;

// copier les propriétés d'origine de l'événement vers le nouvel événement
// cela se produirait si nous pouvions appeler $.event.fix au lieu de $.Event
// mais nous n'en avons pas un moyen de forcer la correction d'un événement plusieurs fois
if (event.originalEvent) {
for (var i = $.event.props.length, prop; i;) {
prop = $. event.props[--i];
event[prop] = event.originalEvent[prop];
}
}

this.element.trigger(événement, données);

return !($.isFunction(callback) && callback.call(this.element[0], event, data) === false
|| event.isDefaultPrevented());
}
} ;

$.widget.defaults = {
désactivé : faux
} ;


/**Plugin d'interaction avec la souris **/

$.ui.mouse = {
_mouseInit: function() {
var self = this;

this.element
.bind('mousedown.' this.widgetName, function(event) {
return self._mouseDown(event);
})
.bind( 'cliquez.' this.widgetName, function(event) {
if(self._preventClickEvent) {
self._preventClickEvent = false;
event.stopImmediatePropagation(); }
});

// Empêcher la sélection de texte dans IE
if ($.browser.msie) {
this._mouseUnselectable = this.element.attr('unselectable');
this.element.attr('unselectable', 'on');
}

this.started = false;
},

// À FAIRE : assurez-vous que la destruction d'une instance de la souris ne gâche pas
// d'autres instances de la souris
_mouseDestroy: function() {
this.element.unbind( '.' this.widgetName);

// Restaurer la sélection de texte dans IE
($.browser.msie
&& this.element.attr('unselectable', this._mouseUnselectable));
},

_mouseDown : function(event) {
// ne laissez pas plus d'un widget gérer mouseStart
// TODO : découvrez pourquoi nous devons utiliser originalEvent
event.originalEvent = événement.originalEvent || {} ;
if (event.originalEvent.mouseHandled) { return ; }

// nous avons peut-être manqué mouseup (hors fenêtre)
(this._mouseStarted && this._mouseUp(event));

this._mouseDownEvent = event;

var self = this,
btnIsLeft = (event.which == 1),
elIsCancel = (typeof this.options.cancel == "string" ? $(event.target). parents().add(event.target).filter(this.options.cancel).length : false);
if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
return true;
}

this.mouseDelayMet = !this.options.delay;
if (!this.mouseDelayMet) {
this._mouseDelayTimer = setTimeout(function() {
self.mouseDelayMet = true;
}, this.options.delay);
}

if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
this._mouseStarted = (this._mouseStart(event) !== false);
if (!this._mouseStarted) {
event.preventDefault();
retourne vrai ;
}
}

// ces délégués sont tenus de garder le contexte
this._mouseMoveDelegate = function(event) {
return self._mouseMove(event);
} ;
this._mouseUpDelegate = function(event) {
return self._mouseUp(event);
} ;
$(document)
.bind('mousemove.' this.widgetName, this._mouseMoveDelegate)
.bind('mouseup.' this.widgetName, this._mouseUpDelegate);

// verifyDefault() est utilisé pour empêcher la sélection de texte ici -
// cependant, dans Safari, cela empêche les zones de sélection d'être sélectionnables
//, donc ce correctif est nécessaire
($.browser.safari || event.preventDefault());

event.originalEvent.mouseHandled = true;
retourne vrai ;
},

_mouseMove : function(event) {
// Vérification de la souris IE - la souris s'est produite lorsque la souris était hors de la fenêtre
if ($.browser.msie && !event.button ) {
return this._mouseUp(event);
}

if (this._mouseStarted) {
this._mouseDrag(event);
return event.preventDefault();
}

if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
this._mouseStarted =
(this._mouseStart(this._mouseDownEvent, event) != = faux);
(this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
}

return !this._mouseStarted;
},

_mouseUp : function(event) {
$(document)
.unbind('mousemove.' this.widgetName, this._mouseMoveDelegate)
.unbind(' mouseup.' this.widgetName, this._mouseUpDelegate);

if (this._mouseStarted) {
this._mouseStarted = false;
this._preventClickEvent = (event.target == this._mouseDownEvent.target);
this._mouseStop(event);
}

return false ;
},

_mouseDistanceMet : function(event) {
return (Math.max(
Math.abs(this._mouseDownEvent.pageX - event.pageX),
Math. abs(this._mouseDownEvent.pageY - event.pageY)
) >= this.options.distance
);
},

_mouseDelayMet : function(event) {
return this.mouseDelayMet ;
},

// Ce sont des méthodes d'espace réservé, à remplacer en étendant le plugin
_mouseStart : function(event) {},
_mouseDrag : function(event) {},
_mouseStop : function(event) {},
_mouseCapture : function(event) { return true ; }
} ;

$.ui.mouse.defaults = {
annulation : null,
distance : 1,
délai : 0
} ;

})(jQuery);


ui.sortable.js


[javascript] view plaincopy在CODE上查看代码片派生到我的代码片

/*
* jQuery UI Sortable 1.7.1
*
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Double licence sous le MIT (MIT-LICENSE.txt )
* et licences GPL (GPL-LICENSE.txt).
*
* http://docs.jquery.com/UI/Sortables
*
* Dépend :
* ui.core.js
*/
(fonction ($) {

$.widget("ui.sortable", $.extend({}, $.ui.mouse, {
_init: function() {

var o = this.options;
this.containerCache = {};
this.element.addClass("ui-sortable");

//Obtenir les éléments
this.refresh( );

//Déterminons si les éléments flottent
this.floating = this.items.length (/left|right/).test(this.items[0].item.css ? ('float')) : false;

//Déterminons le décalage du parent
this.offset = this.element.offset();

//Initialisons les événements de la souris pour l'interaction
this._mouseInit();

},

destroy: function() {
this.element
.removeClass("ui-sortable ui-sortable-disabled")
.removeData("sortable")
. délier(".triable");
this._mouseDestroy();

for ( var i = this.items.length - 1; i >= 0; i-- )
this.items[i].item.removeData("sortable-item");
},

_mouseCapture : function(event, overrideHandle) {

if (this.reverting) {
return false;
}

if(this.options.disabled || this.options.type == 'static') return false;

//Nous devons d'abord actualiser les données des éléments
this._refreshItems(event);

//Découvrez si le nœud cliqué (ou l'un de ses parents) est un élément réel dans this.items
var currentItem = null, self = this, nodes = $(event.target). parents().each(function() {
if($.data(this, 'sortable-item') == self) {
currentItem = $(this);
return false;
}
});
if($.data(event.target, 'sortable-item') == self) currentItem = $(event.target);

if(!currentItem) renvoie false ;
if(this.options.handle && !overrideHandle) {
var validHandle = false;

$(this.options.handle, currentItem).find("*").andSelf().each(function() { if(this == event.target) validHandle = true; });
if(!validHandle) renvoie false ;
}

this.currentItem = currentItem;
this._removeCurrentsFromItems();
retourne vrai ;

},

_mouseStart: function(event, overrideHandle, noActivation) {

var o = this.options, self = this;
this.currentContainer = this;

//Nous avons seulement besoin d'appeler rafraîchissementPositions, car l'appel rafraîchissementItems a été déplacé vers mouseCapture
this.refreshPositions();

//Créer et ajouter l'assistant visible
this.helper = this._createHelper(event);

//Cache la taille de l'assistant
this._cacheHelperProportions();

/*
* - Génération de position -
* Ce bloc génère tout ce qui concerne la position - c'est le cœur des éléments déplaçables.
*/

//Cache les marges de l'élément d'origine
this._cacheMargins();

//Obtenir le prochain parent défilant
this.scrollParent = this.helper.scrollParent();

//La position absolue de l'élément sur la page moins les marges
this.offset = this.currentItem.offset();
this.offset = {
top : this.offset.top - this.margins.top,
gauche : this.offset.left - this.margins.left
} ;

// Ce n'est qu'après avoir obtenu le décalage que nous pouvons changer la position de l'assistant en absolue
// À FAIRE : Il reste encore à trouver un moyen de rendre possible le tri relatif
this.helper.css ("position", "absolu");
this.cssPosition = this.helper.css("position");

$.extend(this.offset, {
click : { //Où le clic s'est produit, par rapport à l'élément
left : event.pageX - this.offset.left,
top : event.pageY - this.offset.top
},
parent : this._getParentOffset(),
relative : this._getRelativeOffset() //Il s'agit d'une position relative à la position absolue moins la position réelle calcul - utilisé uniquement pour l'assistant positionné relatif
});

//Générer la position d'origine
this.originalPosition = this._generatePosition(event);
this.originalPageX = event.pageX;
this.originalPageY = event.pageY;

//Ajustez le décalage de la souris par rapport à l'assistant si 'cursorAt' est fourni
if(o.cursorAt)
this._adjustOffsetFromHelper(o.cursorAt);

//Cache l'ancienne position DOM
this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] };

//Si l'assistant n'est pas l'original, cachez l'original pour qu'il ne joue aucun rôle pendant le glisser, cela ne causera rien de mal de cette façon
if(this.helper[0] != this.currentItem[0]) {
this.currentItem.hide();
}

//Créez l'espace réservé
this._createPlaceholder();

//Définir un confinement s'il est indiqué dans les options
if(o.containment)
this._setContainment();

if(o.cursor) { // option du curseur
if ($('body').css("cursor")) this._storedCursor = $('body').css(" curseur");
$('body').css("cursor", o.cursor);
}

if(o.opacity) { // option d'opacité
if (this.helper.css("opacity")) this._storedOpacity = this.helper.css("opacity" );
this.helper.css("opacity", o.opacity);
}

if(o.zIndex) { // Option zIndex
if (this.helper.css("zIndex")) this._storedZIndex = this.helper.css("zIndex" );
this.helper.css("zIndex", o.zIndex);
}

//Préparer le défilement
if(this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML')
this.overflowOffset = this.scrollParent.offset();

//Rappels d'appel
this._trigger("start", event, this._uiHash());

//Remettre en cache la taille de l'assistant
if(!this._preserveHelperProportions)
this._cacheHelperProportions();


//Publier les événements 'activate' dans les conteneurs possibles
if(!noActivation) {
for (var i = this.containers.length - 1; i >= 0; i--) { this.containers[i]._trigger("activate", event, self._uiHash(this)); }
}

//Préparer les éventuels droppables
if($.ui.ddmanager)
$.ui.ddmanager.current = this;

if ($.ui.ddmanager && !o.dropBehaviour)
$.ui.ddmanager.prepareOffsets(this, event);

this.dragging = true;

this.helper.addClass("ui-sortable-helper");
this._mouseDrag(event); //Exécuter le glisser une fois - cela fait que l'assistant n'est pas visible avant d'avoir obtenu sa position correcte
return true;

},

_mouseDrag: function(event) {

//Calculez la position des assistants
this.position = this._generatePosition(event);
this.positionAbs = this._convertPositionTo("absolute");

if (!this.lastPositionAbs) {
this.lastPositionAbs = this.positionAbs;
}

//Faire le défilement
if(this.options.scroll) {
var o = this.options, scrolled = false;
if(this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML') {

if((this.overflowOffset.top this.scrollParent[0] .offsetHeight) - event.pageY this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop o.scrollSpeed;
else if(event.pageY - this.overflowOffset.top this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;

if((this.overflowOffset.left this.scrollParent[0].offsetWidth) - event.pageX this.scrollParent[0].scrollLeft = scrolled = this.scrollParent [0].scrollLeft o.scrollSpeed ;
else if(event.pageX - this.overflowOffset.left this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;

} else {

if(event.pageY - $(document).scrollTop() scrolled = $(document).scrollTop($(document ).scrollTop() - o.scrollSpeed);
else if($(window).height() - (event.pageY - $(document).scrollTop()) scrolled = $(document).scrollTop($(document ).scrollTop() o.scrollSpeed);

if(event.pageX - $(document).scrollLeft() scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed );
else if($(window).width() - (event.pageX - $(document).scrollLeft()) scrolled = $(document).scrollLeft($(document ).scrollLeft() o.scrollSpeed);

}

if(fait défiler !== false && $.ui.ddmanager && !o.dropBehaviour)
$.ui.ddmanager.prepareOffsets(this, event);
}

//Régénérer la position absolue utilisée pour les contrôles de position
this.positionAbs = this._convertPositionTo("absolute");

//Définir la position de l'assistant
if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position .left 'px';
if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top 'px';

//Réorganiser
for (var i = this.items.length - 1; i >= 0; i--) {

//Variables de cache et intersection, continuer si pas d'intersection
var item = this.items[i], itemElement = item.item[0], intersection = this._intersectsWithPointer(item);
if (!intersection) continue ;

if(itemElement != this.currentItem[0] //ne peut pas se croiser avec lui-même
&& this.placeholder[intersection == 1 ? "next" : "prev"]()[0] ! = itemElement //aucune action inutile qui a été effectuée auparavant
&& !$.ui.contains(this.placeholder[0], itemElement) //aucune action si l'élément déplacé est le parent de l'élément coché
&& (this.options.type == 'semi-dynamique' ? !$.ui.contains(this.element[0], itemElement) : true)
) {

this.direction = intersection == 1 ? "en bas" : "en haut";

if (this.options.tolerance == "pointer" || this._intersectsWithSides(item)) {
this._rearrange(event, item);
} else {
pause ;
}

this._trigger("change", event, this._uiHash());
pause;
}
}

//Publier des événements dans des conteneurs
this._contactContainers(event);

//Interconnexion avec les droppables
if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);

//Rappels d'appel
this._trigger('sort', event, this._uiHash());

this.lastPositionAbs = this.positionAbs;
retour faux ;

},

_mouseStop : function(event, noPropagation) {

if(!event) return;

//Si nous utilisons des droppables, informez le responsable du drop
if ($.ui.ddmanager && !this.options.dropBehaviour)
$.ui.ddmanager.drop(this , événement);

if(this.options.revert) {
var self = this;
var cur = self.placeholder.offset();

self.reverting = true;

$(this.helper).animate({
gauche : cur.left - this.offset.parent.left - self.margins.left (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollLeft),
top : cur.top - this.offset.parent.top - self.margins.top (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollTop)
}, parseInt(this.options.revert, 10) || 500, function() {
self._clear(event);
});
} else {
this._clear(event, noPropagation);
}

return false ;

},

annuler : function() {

var self = this;

if(this.dragging) {

this._mouseUp();

if(this.options.helper == "original")
this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper");
else
this.currentItem.show();

//Publier les événements de désactivation dans les conteneurs
pour (var i = this.containers.length - 1; i >= 0; i--){
this.containers[i]. _trigger("désactiver", null, self._uiHash(this));
if(this.containers[i].containerCache.over) {
this.containers[i]._trigger("out", null, self._uiHash(this));
this.containers[i].containerCache.over = 0;
}
}

}

//$(this.placeholder[0]).remove(); aurait été la méthode jQuery - malheureusement, cela dissocie TOUS les événements du nœud d'origine !
if(this.placeholder[0].parentNode) this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
if(this.options.helper != "original" && this.helper && this.helper[0].parentNode) this.helper.remove();

$.extend(this, {
helper : null,
glisser : false,
revenir : false,
_noFinalSort : null
});

if(this.domPosition.prev) {
$(this.domPosition.prev).after(this.currentItem);
} else {
$(this.domPosition.parent).prepend(this.currentItem);
}

retour vrai ;

},

sérialiser : function(o) {

var items = this._getItemsAsjQuery(o && o.connected);
var str = []; o = o || {} ;

$(items).each(function() {
var res = ($(o.item || this).attr(o.attribute || 'id') || '') .match(o.expression || (/(. )[-=_](. )/));
if(res) str.push((o.key || res[1] '[]' ) '=' (o.key && o.expression ? res[1] : res[2]));

return str.join('&');

},

toArray : function(o) {

var items = this._getItemsAsjQuery(o && o.connected);
var ret = []; o = o || {} ;

items.each(function() { ret.push($(o.item || this).attr(o.attribute || 'id') || ''); });
retour ret;

},

/* Soyez prudent avec les fonctions de base suivantes */
_intersectsWith: function(item) {

var x1 = this.positionAbs.left,
x2 = x1 this.helperProportions.width,
y1 = this.positionAbs.top,
y2 = y1 this.helperProportions.height;

var l = item.left,
r = l item.width,
t = item.top,
b = t item.height;

var dyClick = this.offset.click.top,
dxClick = this.offset.click.left;

var isOverElement = (y1 dyClick) > t && (y1 dyClick) l && (x1 dxClick)
if( this.options.tolerance == "pointeur"
|| this.options.forcePointerForContainers
|| (this.options.tolerance != "pointeur" && this.helperProportions[this .floating ? 'width' : 'height'] > item[this.floating ? 'width' : 'height'])
) {
return isOverElement;
} else {

return (l && x2 - (this.helperProportions.width / 2) && t && y2 - (this.helperProportions.height / 2)
}
},

_intersectsWithPointer : function(item) {

var isOverElementHeight = $.ui.isOverAxis(this.positionAbs.top this .offset.click.top, item.top, item.height),
isOverElementWidth = $.ui.isOverAxis(this.positionAbs.left this.offset.click.left, item.left, item.width),
isOverElement = isOverElementHeight && isOverElementWidth,
verticalDirection = this._getDragVerticalDirection(),
horizontalDirection = this._getDragHorizontalDirection();

if (!isOverElement)
return false;

retourner ceci.floating ?
( ((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1 )
: ( verticalDirection && (verticalDirection == "down" ? 2 : 1) );

},

_intersectsWithSides : function(item) {

var isOverBottomHalf = $.ui.isOverAxis(this.positionAbs.top this.offset.click.top, item .top (item.height/2), item.height),
isOverRightHalf = $.ui.isOverAxis(this.positionAbs.left this.offset.click.left, item.left (item.width/2), item.width),
verticalDirection = this._getDragVerticalDirection(),
horizontalDirection = this._getDragHorizontalDirection();

if (this.floating && horizontalDirection) {
return ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
} else {
return verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf));
}

},

_getDragVerticalDirection : function() {
var delta = this.positionAbs.top - this.lastPositionAbs.top;
retour delta != 0 && (delta > 0 ? "down" : "up");
},

_getDragHorizontalDirection: function() {
var delta = this.positionAbs.left - this.lastPositionAbs.left;
retour delta != 0 && (delta > 0 ? "right" : "left");
},

refresh : function(event) {
this._refreshItems(event);
this.refreshPositions();
},

_connectWith : function() {
var options = this.options;
return options.connectWith.constructor == String
? [options.connectWith]
 : options.connectWith ;
},

_getItemsAsjQuery : function(connected) {

var self = this ;
var éléments = [];
var requêtes = [];
var connectWith = this._connectWith();

if(connectWith && connecté) {
for (var i = connectWith.length - 1; i >= 0; i--){
var cur = $(connectWith[i] );
for (var j = cur.length - 1; j >= 0; j--){
var inst = $.data(cur[j], 'sortable');
if(inst && inst != this && !inst.options.disabled) {
queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element ) : $(inst.options.items, inst.element).not(".ui-sortable-helper"), inst]);
}
} ;
} ;
}

queries.push([$.isFunction(this.options.items) ? this.options.items.call(this.element, null, { options: this.options, item: this .currentItem }) : $(this.options.items, this.element).not(".ui-sortable-helper"), this]);

for (var i = queries.length - 1; i >= 0; i--){
queries[i][0].each(function() {
items. pousser(ce);
});
} ;

return $(articles);

},

_removeCurrentsFromItems: function() {

var list = this.currentItem.find(":data(sortable-item)");

pour (var i=0; i
pour (var j=0; j if(list[j] == this.items[i].item[0])
this.items.splice(i,1);
} ;

} ;

},

_refreshItems : function(event) {

this.items = [];
this.containers = [this];
var items = this.items;
var self = this;
var requêtes = [[$.isFunction(this.options.items) ? this.options.items.call(this.element[0], event, { item: this.currentItem }) : $(this.options.items, this.element), this]];
var connectWith = this._connectWith();

if(connectWith) {
for (var i = connectWith.length - 1; i >= 0; i--){
var cur = $(connectWith[i]);
for (var j = cur.length - 1; j >= 0; j--){
var inst = $.data(cur[j], 'sortable');
if(inst && inst != this && !inst.options.disabled) {
queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element [0], événement, { item: this.currentItem }) : $(inst.options.items, inst.element), inst]);
this.containers.push(inst);
}
} ;
} ;
}

for (var i = queries.length - 1; i >= 0; i--) {
var targetData = queries[i][1];
var _queries = requêtes[i][0];

for (var j=0, queriesLength = _queries.length; j var item = $(_queries[j]);

item.data('sortable-item', targetData); // Données pour la vérification de la cible (gestionnaire de souris)

items.push({
item: item,
instance: targetData,
width: 0, height: 0,
left : 0, haut : 0
});
} ;
} ;

},

refreshPositions: function(fast) {

//Cela doit être refait car en raison du déplacement de l'élément vers/vers l'offsetParent, la position de offsetParent changera
if(this.offsetParent && this.helper) {
this.offset.parent = this._getParentOffset();
}

pour (var i = this.items.length - 1; i >= 0; i--){
var item = this.items[i];

//Nous ignorons le calcul des positions de tous les conteneurs connectés lorsque nous ne les survolons pas
if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this .currentItem[0])
continuer ;

var t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item;

if (!fast) {
item.width = t.outerWidth();
item.height = t.outerHeight();
}

var p = t.offset();
item.left = p.left;
item.top = p.top;
} ;

if(this.options.custom && this.options.custom.refreshContainers) {
this.options.custom.refreshContainers.call(this);
} else {
for (var i = this.containers.length - 1; i >= 0; i--){
var p = this.containers[i].element.offset( );
this.containers[i].containerCache.left = p.left;
this.containers[i].containerCache.top = p.top;
this.containers[i].containerCache.width = this.containers[i].element.outerWidth();
this.containers[i].containerCache.height = this.containers[i].element.outerHeight();
} ;
}

},

_createPlaceholder: function(that) {

var self = that || ceci, o = self.options ;

if(!o.placeholder || o.placeholder.constructor == String) {
var className = o.placeholder;
o.placeholder = {
element: function() {

var el = $(document.createElement(self.currentItem[0].nodeName))
.addClass(className | | self.currentItem[0].className " ui-sortable-placeholder")
.removeClass("ui-sortable-helper")[0];

if(!className)
el.style.visibility = "hidden";

retourner el;
},
update: function(container, p) {

// 1. Si un nom de classe est défini comme option d'espace réservé, nous ne forçons pas les tailles - la classe en est responsable
// 2. L'option 'forcePlaceholderSize peut être activée pour le forcer même si un nom de classe est spécifié
if(className && !o.forcePlaceholderSize) return;

//Si l'élément n'a pas de hauteur réelle par lui-même (sans styles provenant d'une feuille de style), il reçoit la hauteur en ligne de l'élément glissé
if(!p.height()) { p.height(self.currentItem.innerHeight() - parseInt(self.currentItem.css('paddingTop')||0, 10) - parseInt(self.currentItem.css('paddingBottom')||0, 10) ); } ;
if(!p.width()) { p.width(self.currentItem.innerWidth() - parseInt(self.currentItem.css('paddingLeft')||0, 10) - parseInt(self.currentItem. css('paddingRight')||0, 10)); } ;
}
} ;
}

//Créer l'espace réservé
self.placeholder = $(o.placeholder.element.call(self.element, self.currentItem));

//Ajoutez-le après l'élément actuel
self.currentItem.after(self.placeholder);

//Mettre à jour la taille de l'espace réservé (TODO : Logique vers flou, voir ligne 316/317)
o.placeholder.update(self, self.placeholder);

},

_contactContainers : function(event) {
for (var i = this.containers.length - 1; i >= 0; i--){

if(this._intersectsWith(this.containers[i].containerCache)) {
if(!this.containers[i].containerCache.over) {

if(this.currentContainer != this.containers[i]) {

//Lors de la saisie d'un nouveau conteneur, nous trouverons l'élément avec le moins de distance et ajouterons notre élément à proximité
var dist = 10000; var itemWithLeastDistance = null; var base = this.positionAbs[this.containers[i].floating ? 'gauche' : 'haut'];
for (var j = this.items.length - 1; j >= 0; j--) {
if(!$.ui.contains(this.containers[i].element[0] , this.items[j].item[0])) continue ;
var cur = this.items[j][this.containers[i].floating ? 'gauche' : 'haut'];
if(Math.abs(cur - base) dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];
}
}

if(!itemWithLeastDistance && !this.opt
Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Javascript et le web: fonctionnalité de base et cas d'utilisationJavascript et le web: fonctionnalité de base et cas d'utilisationApr 18, 2025 am 12:19 AM

Les principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.

Comprendre le moteur JavaScript: détails de l'implémentationComprendre le moteur JavaScript: détails de l'implémentationApr 17, 2025 am 12:05 AM

Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.

Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisationPython vs JavaScript: la courbe d'apprentissage et la facilité d'utilisationApr 16, 2025 am 12:12 AM

Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.

Python vs JavaScript: communauté, bibliothèques et ressourcesPython vs JavaScript: communauté, bibliothèques et ressourcesApr 15, 2025 am 12:16 AM

Python et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.

De C / C à JavaScript: comment tout cela fonctionneDe C / C à JavaScript: comment tout cela fonctionneApr 14, 2025 am 12:05 AM

Le passage de C / C à JavaScript nécessite de s'adapter à la frappe dynamique, à la collecte des ordures et à la programmation asynchrone. 1) C / C est un langage dactylographié statiquement qui nécessite une gestion manuelle de la mémoire, tandis que JavaScript est dynamiquement typé et que la collecte des déchets est automatiquement traitée. 2) C / C doit être compilé en code machine, tandis que JavaScript est une langue interprétée. 3) JavaScript introduit des concepts tels que les fermetures, les chaînes de prototypes et la promesse, ce qui améliore la flexibilité et les capacités de programmation asynchrones.

Moteurs JavaScript: comparaison des implémentationsMoteurs JavaScript: comparaison des implémentationsApr 13, 2025 am 12:05 AM

Différents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.

Au-delà du navigateur: Javascript dans le monde réelAu-delà du navigateur: Javascript dans le monde réelApr 12, 2025 am 12:06 AM

Les applications de JavaScript dans le monde réel incluent la programmation côté serveur, le développement des applications mobiles et le contrôle de l'Internet des objets: 1. La programmation côté serveur est réalisée via Node.js, adaptée au traitement de demande élevé simultané. 2. Le développement d'applications mobiles est effectué par le reactnatif et prend en charge le déploiement multiplateforme. 3. Utilisé pour le contrôle des périphériques IoT via la bibliothèque Johnny-Five, adapté à l'interaction matérielle.

Construire une application SaaS multi-locataire avec next.js (intégration backend)Construire une application SaaS multi-locataire avec next.js (intégration backend)Apr 11, 2025 am 08:23 AM

J'ai construit une application SAAS multi-locataire fonctionnelle (une application EdTech) avec votre outil technologique quotidien et vous pouvez faire de même. Premièrement, qu'est-ce qu'une application SaaS multi-locataire? Les applications saas multi-locataires vous permettent de servir plusieurs clients à partir d'un chant

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel

Dreamweaver Mac

Dreamweaver Mac

Outils de développement Web visuel