实例介绍
【实例简介】基于jquery的在线尺子, 仿PhotoShop界面屏幕标尺插件
【实例截图】
【核心代码】
(function ($) {
$.widget("ef.ruler", {
options: {
unit: 'px',
tickMajor: 100,
tickMinor: 20,
tickMicro: 10,
showLabel: true,
arrowStyle: 'line'
},
_$el: null,
_$container: null,
_$corner: null,
_$topRuler: null,
_$leftRuler: null,
_$topArrow: null,
_$leftArrow: null,
_$stage: null,
_scrollTop: 0,
_scrollLeft: 0,
_scrollBarWidth: 0,
_unitDiv: 1,
_lastTopRulerPos: 0,
_lastLeftRulerPos: 0,
/**
* px - pixel
* mm - millimeter
* cm - centimeter
* in - inch
*/
_units: ['px', 'mm', 'cm', 'in'],
_create: function () {
var self = this;
/* Options */
this.options.unit = this._constrainUnit(this.options.unit);
this.options.tickMajor = this._constrainTick(this.options.tickMajor);
this.options.tickMinor = this._constrainTick(this.options.tickMinor);
this.options.tickMicro = this._constrainTick(this.options.tickMicro);
/* Calculate scrollbar width */
this._scrollBarWidth = this._calcScrollBarWidth();
/* Create container */
var $container = $(document.createElement('div')).addClass('ef-ruler');
/* corner */
var $corner = $(document.createElement('div')).addClass('corner');
$corner.appendTo($container);
/* Top ruler */
var $topRuler = $(document.createElement('div')).addClass('ruler').addClass('top');
$topRuler.appendTo($container);
var toparrowClass, leftarrowClass
switch (this.options.arrowStyle) {
case 'arrow':
toparrowClass = 'top-arrow';
leftarrowClass = 'left-arrow';
break;
case 'line':
toparrowClass = 'top-line';
leftarrowClass = 'left-line';
break;
case 'none':
toparrowClass = 'top-none';
leftarrowClass = 'left-none';
break;
}
var $topArrow = $(document.createElement('div')).addClass(toparrowClass);
$topArrow.appendTo($topRuler);
/* Left ruler */
var $leftRuler = $(document.createElement('div')).addClass('ruler').addClass('left');
$leftRuler.appendTo($container);
var $leftArrow = $(document.createElement('div')).addClass(leftarrowClass);
$leftArrow.appendTo($leftRuler);
/* stage */
var $stage = $(document.createElement('div')).addClass('stage');
$stage.appendTo($container);
$stage.append(this.element.contents());
$container.appendTo(this.element);
this._$container = $container;
this._$corner = $corner;
this._$topRuler = $topRuler;
this._$leftRuler = $leftRuler;
this._$topArrow = $topArrow;
this._$leftArrow = $leftArrow;
this._$stage = $stage;
this.refresh();
/* events */
$container.scroll(function () {
self._scrollTop = $container.scrollTop();
self._scrollLeft = $container.scrollLeft();
self._fixRulerPosition();
});
this.element.mousemove(function (event) {
self._fixArrowsPosition(event.clientX, event.clientY);
});
$(window).resize(function () {
self._fixRulerSize();
self._updateRulerTicks();
});
},
_destroy: function () {
/* Unbind */
this._$container.unbind('scroll');
this.element.unbind('mousemove');
$(window).unbind('resize');
/* Restore element contents */
this.element.prepend(this._$stage.contents());
/* Remove created elements */
this._$container.remove();
},
_setOption: function (key, value) {
switch (key) {
case 'unit':
value = this._constrainUnit(value);
break;
case 'tickMajor':
case 'tickMinor':
case 'tickMicro':
value = this._constrainTick(value);
break;
}
this._super(key, value);
},
_setOptions: function (options) {
this._super(options);
this.refresh();
},
_constrainUnit: function (unit) {
if (typeof unit === 'string') {
unit = unit.toLowerCase();
this._units.every(function (sUnit) {
if (unit === sUnit)
return false;
return true;
});
} else {
unit = 'px'
}
return unit;
},
_constrainTick: function (tick) {
if (isNaN(tick) || tick < 0)
return 0;
return tick;
},
_calcScrollBarWidth: function () {
var $tmpEl = $(document.createElement('div')).css({
position: 'absolute',
top: '-999px',
left: '-999px',
width: '100px',
height: '100px',
overflow: 'hidden'
});
this.element.append($tmpEl);
var w1 = $tmpEl[0].offsetWidth;
$tmpEl.css('overflow', 'scroll');
var w2 = $tmpEl[0].offsetWidth;
if (w1 == w2) w2 = $tmpEl[0].clientWidth;
$tmpEl.remove();
return (w1 - w2);
},
_calcPixelsPerMM: function () {
var $tmpEl = $(document.createElement('div')).css({
position: 'absolute',
top: '-999px',
left: '-999px',
width: '1mm',
height: '1mm'
});
this.element.append($tmpEl);
var px = $tmpEl.width();
$tmpEl.remove();
return px;
},
_fixRulerPosition: function () {
this._$corner.css({
top: this._scrollTop,
left: this._scrollLeft
});
/* Fix rulers position */
this._$topRuler.css('top', this._scrollTop);
this._$leftRuler.css('left', this._scrollLeft);
},
_fixRulerSize: function () {
var wContainer = this._$container.width(),
hContainer = this._$container.height(),
wStage = this._$stage.width(),
hStage = this._$stage.height();
/* Fix rulers size */
this._$topRuler.width(
(wContainer < wStage) ?
wStage :
wContainer - this._$corner.width() - this._scrollBarWidth);
this._$leftRuler.height((hContainer < hStage) ? hStage : hContainer - this._scrollBarWidth);
this._updateRulerTicks();
},
_updateRulerTicks: function (reset) {
if (reset === true) {
this._$topRuler.find('.tick').remove();
this._$leftRuler.find('.tick').remove();
this._lastTopRulerPos = this._lastLeftRulerPos = 0;
}
var $tick = null;
var unitPos;
/* Top ruler */
unitPos = this._lastTopRulerPos * this._unitDiv;
var topRulerWidth = this._$topRuler.width() 100;
while (this._lastTopRulerPos < topRulerWidth) {
if (this.options.tickMajor > 0 && (unitPos % this.options.tickMajor) === 0) {
$tick = $(document.createElement('div'))
.addClass('tick').addClass('major')
.css('left', this._lastTopRulerPos 'px');
if (this.options.showLabel === true)
$tick.text(unitPos);
$tick.appendTo(this._$topRuler);
} else if (this.options.tickMinor > 0 && (unitPos % this.options.tickMinor) === 0) {
$tick = $(document.createElement('div'))
.addClass('tick').addClass('minor')
.css('left', this._lastTopRulerPos 'px');
$tick.appendTo(this._$topRuler);
} else if (this.options.tickMicro > 0 && (unitPos % this.options.tickMicro) === 0) {
$tick = $(document.createElement('div'))
.addClass('tick').addClass('micro')
.css('left', this._lastTopRulerPos 'px');
$tick.appendTo(this._$topRuler);
}
this._lastTopRulerPos = this._unitDiv;
unitPos ;
}
/* Left ruler */
unitPos = this._lastLeftRulerPos * this._unitDiv;
var leftRulerHeight = this._$leftRuler.height() 100;
while (this._lastLeftRulerPos < leftRulerHeight) {
if (this.options.tickMajor > 0 && (unitPos % this.options.tickMajor) === 0) {
$tick = $(document.createElement('div'))
.addClass('tick').addClass('major')
.css('top', this._lastLeftRulerPos 'px');
if (this.options.showLabel === true)
$tick.append('<span>' unitPos '</span>')
$tick.appendTo(this._$leftRuler);
} else if (this.options.tickMinor > 0 && (unitPos % this.options.tickMinor) === 0) {
$tick = $(document.createElement('div'))
.addClass('tick').addClass('minor')
.css('top', this._lastLeftRulerPos 'px');
$tick.appendTo(this._$leftRuler);
} else if (this.options.tickMicro > 0 && (unitPos % this.options.tickMicro) === 0) {
$tick = $(document.createElement('div'))
.addClass('tick').addClass('micro')
.css('top', this._lastLeftRulerPos 'px');
$tick.appendTo(this._$leftRuler);
}
this._lastLeftRulerPos = this._unitDiv;
unitPos ;
}
},
_fixArrowsPosition: function (mouseX, mouseY) {
var arrowX = mouseX - this.element.offset().left - this._$corner.width() - Math.round(this._$topArrow.outerWidth() / 2) parseInt($('.ef-ruler').parents().eq(1).css('padding-left'),10);
var arrowY = mouseY - this.element.offset().top - this._$corner.height() - Math.round(this._$leftArrow.outerHeight() / 2) parseInt($('.ef-ruler').parents().eq(1).css('padding-top'),10);
this._$topArrow.css('left', arrowX this._scrollLeft);
this._$leftArrow.css('top', arrowY this._scrollTop);
},
refresh: function () {
switch (this.options.unit) {
case 'px':
this._unitDiv = 1;
break;
case 'mm':
this._unitDiv = this._calcPixelsPerMM();
break;
case 'cm':
this._unitDiv = this._calcPixelsPerMM() * 10;
break;
case 'in':
this._unitDiv = this._calcPixelsPerMM() * 25.4;
break;
}
this._fixRulerPosition();
this._fixRulerSize();
this._fixArrowsPosition(0, 0);
this._updateRulerTicks(true);
}
});
})(jQuery);
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论