bob体育官方平台
ui.resizable.js(原版,未做改动)

请看浏览器有下角

关闭

$.ui.plugin.add("resizable", "ghost", {
    start: function(e, ui) {
        var o = ui.options, self = $(this).data("resizable"), pr = o.proportionallyResize, cs = self.size;
        if (!pr) self.ghost = self.element.clone();
        else self.ghost = pr.clone();
        self.ghost.css(
            { opacity: .25, display: 'block', position: 'relative', height: cs.height, width: cs.width, margin: 0, left: 0, top: 0 }
        )
        .addClass('ui-resizable-ghost').addClass(typeof o.ghost == 'string' ? o.ghost : '');
        self.ghost.appendTo(self.helper);
    },
    resize: function(e, ui){
        var o = ui.options, self = $(this).data("resizable"), pr = o.proportionallyResize;
        if (self.ghost) self.ghost.css({ position: 'relative', height: self.size.height, width: self.size.width });
    },
    stop: function(e, ui){
        var o = ui.options, self = $(this).data("resizable"), pr = o.proportionallyResize;
        if (self.ghost && self.helper) self.helper.get(0).removeChild(self.ghost.get(0));
    }
});

实现右下角提示框的Jquery插件

$.ui.plugin.add("resizable", "animate", {
    stop: function(e, ui) {
        var o = ui.options, self = $(this).data("resizable");
        var pr = o.proportionallyResize, ista = pr && (/textarea/i).test(pr.get(0).nodeName),
                        soffseth = ista && $.ui.hasScroll(pr.get(0), 'left') /* TODO - jump height */ ? 0 : self.sizeDiff.height,
                            soffsetw = ista ? 0 : self.sizeDiff.width;
        var style = { width: (self.size.width - soffsetw), height: (self.size.height - soffseth) },
                    left = (parseInt(self.element.css('left'), 10) + (self.position.left - self.originalPosition.left)) || null,
                        top = (parseInt(self.element.css('top'), 10) + (self.position.top - self.originalPosition.top)) || null;
        self.element.animate(
            $.extend(style, top && left ? { top: top, left: left } : {}), {
                duration: o.animateDuration || "slow", easing: o.animateEasing || "swing",
                step: function() {
                    var data = {
                        width: parseInt(self.element.css('width'), 10),
                        height: parseInt(self.element.css('height'), 10),
                        top: parseInt(self.element.css('top'), 10),
                        left: parseInt(self.element.css('left'), 10)
                    };
                    if (pr) pr.css({ width: data.width, height: data.height });
                    // propagating resize, and updating values for each animation step
                    self._updateCache(data);
                    self.propagate("animate", e);
                }
            }
        );
    }
});

jquery右下角pop弹窗

$.ui.plugin.add("resizable", "grid", {
    resize: function(e, ui) {
        var o = ui.options, self = $(this).data("resizable"), cs = self.size, os = self.originalSize, op = self.originalPosition, a = self.axis, ratio = o._aspectRatio || e.shiftKey;
        o.grid = typeof o.grid == "number" ? [o.grid, o.grid] : o.grid;
        var ox = Math.round((cs.width - os.width) / (o.grid[0]||1)) * (o.grid[0]||1), oy = Math.round((cs.height - os.height) / (o.grid[1]||1)) * (o.grid[1]||1);
        if (/^(se|s|e)$/.test(a)) {
            self.size.width = os.width + ox;
            self.size.height = os.height + oy;
        }
        else if (/^(ne)$/.test(a)) {
            self.size.width = os.width + ox;
            self.size.height = os.height + oy;
            self.position.top = op.top - oy;
        }
        else if (/^(sw)$/.test(a)) {
            self.size.width = os.width + ox;
            self.size.height = os.height + oy;
            self.position.left = op.left - ox;
        }
        else {
            self.size.width = os.width + ox;
            self.size.height = os.height + oy;
            self.position.top = op.top - oy;
            self.position.left = op.left - ox;
        }
    }
});

复制代码 代码如下:

/*
* jQuery UI Resizable
*
* Copyright (c) 2008 Paul Bakaus
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
*
*
* Depends:
*    ui.core.js
*/
(function($) {

复制代码 代码如下://兼容ie6的fixed代码 //jQuery{ // $j.positionFixed{ $j.positionFixed = function.each{ new fixed return el; } $j.fn.positionFixed = function(){ return $j.positionFixed } var fixed = $j.positionFixed.impl = function{ var o=this; o.sts={ target : $j.css, container : $j } o.sts.currentCss = { top : o.sts.target.css, right : o.sts.target.css, bottom : o.sts.target.css, left : o.sts.target.cssreturn; o.bindEvent(); } $j.extend(fixed.prototype,{ ie6 : $.browser.msie && $.browser.version < 7.0, bindEvent : function(){ var o=this; o.sts.target.css('position','absolute') o.overRelative; o.sts.target.css o.sts.container.scroll.resize; o.setPos(); }, overRelative : function(){ var o=this; var relative = o.sts.target.parents{ if.css=='relative')return this; }) ifrelative.after return o; }, initBasePos : function(){ var o=this; o.sts.basePos = { top: o.sts.target.offset().top - (o.sts.currentCss.top=='auto'?o.sts.container.scrollTop, left: o.sts.target.offset().left - (o.sts.currentCss.left=='auto'?o.sts.container.scrollLeft } return o; }, setPos : function(){ var o=this; o.sts.target.css({ top: o.sts.container.scrollTop() + o.sts.basePos.top, left: o.sts.container.scrollLeft() + o.sts.basePos.left }) }, scrollEvent : function(){ var o=this; return function; } }, resizeEvent : function(){ var o=this; return function(){ setTimeout{ o.sts.target.css o.initBasePos } } }) }) jQuery{ $j.positionFixed //pop右下角弹窗函数 function Pop{ this.title=title; this.url=url; this.intro=intro; this.apearTime=1000; this.hideTime=500; this.delay=10000; //添加信息 this.addInfo(); //显示 this.showDiv(); //关闭 this.closeDiv(); } Pop.prototype={ addInfo:function.attr.html; $.html; $.attr; }, showDiv:function{ if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) { $.slideDown.delay.fadeOut;; } else{//调用jquery.fixed.js,解决ie6不能用fixed $; jQuery{ $j.positionFixed } }, closeDiv:function.click.hide; } }

  • "px",
                width: (el.width() - o.borderDif[1] - o.borderDif[3]) + "px"
            });
        },
        _renderProxy: function() {
            var el = this.element, o = this.options;
            this.elementOffset = el.offset();
            if(o.helper) {
                this.helper = this.helper || $('<div style="overflow:hidden;"></div>');
                // fix ie6 offset
                var ie6 = $.browser.msie && $.browser.version < 7, ie6offset = (ie6 ? 1 : 0),
                pxyoffset = ( ie6 ? 2 : -1 );
                this.helper.addClass(o.helper).css({
                    width: el.outerWidth() + pxyoffset,
                    height: el.outerHeight() + pxyoffset,
                    position: 'absolute',
                    left: this.elementOffset.left - ie6offset +'px',
                    top: this.elementOffset.top - ie6offset +'px',
                    zIndex: ++o.zIndex
                });
                this.helper.appendTo("body");
                if (o.disableSelection)
                    $.ui.disableSelection(this.helper.get(0));
            } else {
                this.helper = el;
            }
        },
        _change: {
            e: function(e, dx, dy) {
                return { width: this.originalSize.width + dx };
            },
            w: function(e, dx, dy) {
                var o = this.options, cs = this.originalSize, sp = this.originalPosition;
                return { left: sp.left + dx, width: cs.width - dx };
            },
            n: function(e, dx, dy) {
                var o = this.options, cs = this.originalSize, sp = this.originalPosition;
                return { top: sp.top + dy, height: cs.height - dy };
            },
            s: function(e, dx, dy) {
                return { height: this.originalSize.height + dy };
            },
            se: function(e, dx, dy) {
                return $.extend(this._change.s.apply(this, arguments), this._change.e.apply(this, [e, dx, dy]));
            },
            sw: function(e, dx, dy) {
                return $.extend(this._change.s.apply(this, arguments), this._change.w.apply(this, [e, dx, dy]));
            },
            ne: function(e, dx, dy) {
                return $.extend(this._change.n.apply(this, arguments), this._change.e.apply(this, [e, dx, dy]));
            },
            nw: function(e, dx, dy) {
                return $.extend(this._change.n.apply(this, arguments), this._change.w.apply(this, [e, dx, dy]));
            }
        }
    }));

温馨提示

这里是标题
这里是内容简介

查看 »

jquery右下角弹窗

希望本文所述对大家的javascript程序设计有所帮助。

$.ui.plugin.add("resizable", "containment", {
    start: function(e, ui) {
        var o = ui.options, self = $(this).data("resizable"), el = self.element;
        var oc = o.containment,    ce = (oc instanceof $) ? oc.get(0) : (/parent/.test(oc)) ? el.parent().get(0) : oc;
        if (!ce) return;
        self.containerElement = $(ce);
        if (/document/.test(oc) || oc == document) {
            self.containerOffset = { left: 0, top: 0 };
            self.containerPosition = { left: 0, top: 0 };
            self.parentData = {
                element: $(document), left: 0, top: 0,
                width: $(document).width(), height: $(document).height() || document.body.parentNode.scrollHeight
            };
        }
        // i'm a node, so compute top, left, right, bottom
        else{
            self.containerOffset = $(ce).offset();
            self.containerPosition = $(ce).position();
            self.containerSize = { height: $(ce).innerHeight(), width: $(ce).innerWidth() };
            var co = self.containerOffset, ch = self.containerSize.height,    cw = self.containerSize.width,
                        width = ($.ui.hasScroll(ce, "left") ? ce.scrollWidth : cw ), height = ($.ui.hasScroll(ce) ? ce.scrollHeight : ch);
            self.parentData = {
                element: ce, left: co.left, top: co.top, width: width, height: height
            };
        }
    },
    resize: function(e, ui) {
        var o = ui.options, self = $(this).data("resizable"),
                ps = self.containerSize, co = self.containerOffset, cs = self.size, cp = self.position,
                pRatio = o._aspectRatio || e.shiftKey, cop = { top:0, left:0 }, ce = self.containerElement;
        if (ce[0] != document && /static/.test(ce.css('position')))
            cop = self.containerPosition;
        if (cp.left < (o.helper ? co.left : cop.left)) {
            self.size.width = self.size.width + (o.helper ? (self.position.left - co.left) : (self.position.left - cop.left));
            if (pRatio) self.size.height = self.size.width * o.aspectRatio;
            self.position.left = o.helper ? co.left : cop.left;
        }
        if (cp.top < (o.helper ? co.top : 0)) {
            self.size.height = self.size.height + (o.helper ? (self.position.top - co.top) : self.position.top);
            if (pRatio) self.size.width = self.size.height / o.aspectRatio;
            self.position.top = o.helper ? co.top : 0;
        }
        var woset = (o.helper ? self.offset.left - co.left : (self.position.left - cop.left)) + self.sizeDiff.width,
                    hoset = (o.helper ? self.offset.top - co.top : self.position.top) + self.sizeDiff.height;
        if (woset + self.size.width >= self.parentData.width) {
            self.size.width = self.parentData.width - woset;
            if (pRatio) self.size.height = self.size.width * o.aspectRatio;
        }
        if (hoset + self.size.height >= self.parentData.height) {
            self.size.height = self.parentData.height - hoset;
            if (pRatio) self.size.width = self.size.height / o.aspectRatio;
        }
    },
    stop: function(e, ui){
        var o = ui.options, self = $(this).data("resizable"), cp = self.position,
                co = self.containerOffset, cop = self.containerPosition, ce = self.containerElement;
        var helper = $(self.helper), ho = helper.offset(), w = helper.innerWidth(), h = helper.innerHeight();
        if (o.helper && !o.animate && /relative/.test(ce.css('position')))
            $(this).css({ left: (ho.left - co.left), top: (ho.top - co.top), width: w, height: h });
        if (o.helper && !o.animate && /static/.test(ce.css('position')))
            $(this).css({ left: cop.left + (ho.left - co.left), top: cop.top + (ho.top - co.top), width: w, height: h });
    }
});

本文实例讲述了js实现右下角提示框的方法。分享给大家供大家参考。具体实现方法如下:

})(jQuery);

返回顶部