Προς το περιεχόμενο

jquery plugin - loader


zinas

Προτεινόμενες αναρτήσεις

Ακολουθεί ένα plugin της jQuery που έχω φτιάξει. Είναι ένας απλός loader

 

Αναλυτικότερα, το tutorial που αναλύει τι γίνεται, στο blog μου

 

>(function($) {
   $.fn.loader = function(action, custom_options) {
       var options = $.extend({}, $.fn.loader.defaults, custom_options);

       if (action == "close") {
           $(this).children("div.loader-removal-hook").remove();
           $(this).children("div.blocker").remove();
           return $(this).each(function() {});
       }

       if (action == "open") {
           if ($(this).css("position") != "absolute" && $(this).css("position") != "fixed") {
               $(this).css("position", "relative");
           }

           $(this).children("div.loader-removal-hook").remove();
           $(this).children("div.blocker").remove();
           var ldr = $("<div class=\"loader-removal-hook\"></div>");
           ldr.addClass(options.cssclass);
           ldr.html("<div style=\"padding: 3px; text-align: center; line-height: " + options.height + "px; font-size: 12px;\">" + options.text + "</div>");
           ldr.height(options.height);
           ldr.width(options.width);
           ldr.css({
               position: "absolute",
           });
           switch (options.vertical) {
           case "top":
               ldr.css("top", "5px");
               break;
           case "bottom":
               ldr.css("bottom", "5px");
               break;
           default:
               ldr.css("top", (($(this).height() - options.height) / 2) + "px");
           }
           switch (options.horizontal) {
           case "left":
               ldr.css("left", "5px");
               break;
           case "right":
               ldr.css("right", "5px");
               break;
           default:
               ldr.css("left", (($(this).width() - options.width) / 2) + "px");
           }

           if (options.modal) {
               var bg = $("<div class=\"blocker\"></div>");
               bg.css({
                   position: "absolute",
                   top: "0px",
                   left: "0px",
                   zIndex: 9,
                   background: options.bgcolor,
                   width: "100%",
                   height: "100%"
               });
               bg.fadeTo(0, options.bgopacity);
               $(this).append(bg);
               ldr.css("z-index", "10");
           }
           $(this).append(ldr);
           return $(this).each(function() {});
       }
   };

   $.fn.loader.defaults = {
       cssclass: "loader",
       height: 50,
       width: 50,
       modal: true,
       vertical: "middle",
       horizontal: "middle",
       bgopacity: 0.5,
       bgcolor: "#000",
       text: ""
   };
})(jQuery);

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

  • Δημιουργία νέου...