


Exemple d'utilisation du plug-in jQuery jQuery de couche de masque de page Web légère
May 16, 2016 pm 03:47 PML'exemple de cet article décrit l'utilisation du plug-in jQuery léger de couche de masque de page Web. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
L'avantage d'utiliser jQuery est que de nombreuses personnes écrivent des composants pour celui-ci, et vous pouvez également trouver des composants pour compléter les fonctions requises par le projet.
Il existe désormais une exigence selon laquelle lorsque l'utilisateur clique sur un bouton, il n'est autorisé à effectuer aucune opération. Au lieu de cela, un calque de masque apparaît pour afficher une boîte d'invite de chargement. L'effet est le suivant.
En fait, cette exigence est très simple, mais de nombreux composants sont trop volumineux pour cette exigence. J'ai erré sur Internet et j'ai trouvé un assez bon composant. L'auteur n'est pas mentionné ci-dessus. Analysons maintenant le code source et l'utilisation de ce composant
/** * @部分参数说明 */ (function($){ $.fn.extend({ //主函数 toggleLoading: function(options){ // 找到遮罩层 var crust = this.children(".x-loading-wanghe"); // 当前操作的元素 var thisjQuery = this; // 实现toogle(切换遮罩层出现与消失)效果的判断方法 if(crust.length>0){ if(crust.is(":visible")){ crust.fadeOut(500); }else{ crust.fadeIn(500); } return this; } // 扩展参数 var op = $.extend({ z: 9999, msg:'数据加载中...', iconUrl:'images/loading.gif', width:18, height:18, borderColor:'#6bc4f5', opacity:0.5, agentW:thisjQuery.outerWidth(), agentH:thisjQuery.outerHeight() },options); if(thisjQuery.css("position")=="static") thisjQuery.css("position","relative"); //var w = thisjQuery.outerWidth(),h = thisjQuery.outerHeight(); var w = op.agentW,h = op.agentH; crust = $("<div></div>").css({//外壳 'position': 'absolute', 'z-index': op.z, 'display':'none', 'width':w+'px', 'height':h+'px', 'text-align':'center', 'top': '0px', 'left': '0px', 'font-family':'arial', 'font-size':'12px', 'font-weight':'500' }).attr("class","x-loading-wanghe"); var mask = $("<div></div>").css({//蒙版 'position': 'absolute', 'z-index': op.z+1, 'width':'100%', 'height':'100%', 'background-color':'#333333', 'top': '0px', 'left': '0px', 'opacity':op.opacity }); //71abc6,89d3f8,6bc4f5 var msgCrust = $("<span></span>").css({//消息外壳 'position': 'relative', 'top': (h-30)/2+'px', 'z-index': op.z+2, 'height':'24px', 'display':'inline-block', 'background-color':'#cadbe6', 'padding':'2px', 'color':'#000000', 'border':'1px solid '+op.borderColor, 'text-align':'left', 'opacity':0.9 }); var msg = $("<span>"+op.msg+"</span>").css({//消息主体 'position': 'relative', 'margin': '0px', 'z-index': op.z+3, 'line-height':'22px', 'height':'22px', 'display':'inline-block', 'background-color':'#efefef', 'padding-left':'25px', 'padding-right':'5px', 'border':'1px solid '+op.borderColor, 'text-align':'left', 'text-indent':'0' }); var msgIcon = $("<img src="+op.iconUrl+" />").css({//图标 'position': 'absolute', 'top': '3px', 'left':'3px', 'z-index': op.z+4, 'width':'18px', 'height':'18px' }); // 拼装遮罩层 msg.prepend(msgIcon); msgCrust.prepend(msg); crust.prepend(mask); crust.prepend(msgCrust); thisjQuery.prepend(crust); // alert(thisjQuery.html()); crust.fadeIn(500); //模态设置 return this; } }); })(jQuery);
Configuration associée
Configurer et configurer
全部配置 | 默认值 | 说明 |
z: | 9999 | 图层z-index,当蒙版遮罩不住时候适当增大其值 |
msg: | 数据加载中... | 提示信息 |
iconUrl: | images/loading.gif | 提示图片url |
height: | 18 | 图标默认高(px) |
width: | 18 | 图标默认宽(px) |
borderColor | #6bc4f5 | 提示的边框颜色 |
opacity: | 0.5 | 蒙版的透明度 |
agentW: | 当前元素的宽度 | 蒙版的宽度 |
agentH: | 当前元素的高度 | 蒙版的高度 |
J'espère que cet article sera utile à la programmation jquery de chacun.

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

Quel est le répertoire d'installation de l'extension du plug-in Chrome ?

Partagez trois solutions expliquant pourquoi le navigateur Edge ne prend pas en charge ce plug-in

Comment utiliser la méthode de requête PUT dans jQuery ?

Comment supprimer l'attribut height d'un élément avec jQuery ?

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page

Utilisez jQuery pour modifier le contenu textuel de toutes les balises

Comment gérer les messages d'erreur lorsque l'installation du plug-in WordPress échoue ?

Comment ajouter des plug-ins à Firefox Comment ajouter des plug-ins
