mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
moved magnifier to experimental branch
This commit is contained in:
Richard Worth
parent
9d802d0651
commit
542bbbb473
@ -64,7 +64,6 @@
|
|||||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
|
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
|
||||||
<script type="text/javascript" src="../../ui/ui.magnifier.js"></script>
|
|
||||||
<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
|
<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
|
||||||
<script type="text/javascript" src="../../ui/ui.selectable.js"></script>
|
<script type="text/javascript" src="../../ui/ui.selectable.js"></script>
|
||||||
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
|
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
|
||||||
@ -222,7 +221,6 @@
|
|||||||
<li><a href="#ui.colorpicker" title="Goto Colorpicker's Component Page">Colorpicker</a></li>
|
<li><a href="#ui.colorpicker" title="Goto Colorpicker's Component Page">Colorpicker</a></li>
|
||||||
<li><a href="#ui.datepicker" title="Goto Datepicker's Component Page">Datepicker</a></li>
|
<li><a href="#ui.datepicker" title="Goto Datepicker's Component Page">Datepicker</a></li>
|
||||||
<li><a href="#ui.dialog" title="Goto Dialog's Component Page">Dialog</a></li>
|
<li><a href="#ui.dialog" title="Goto Dialog's Component Page">Dialog</a></li>
|
||||||
<li><a href="#ui.magnifier" title="Goto Magnifier Component Page">Magnifier</a></li>
|
|
||||||
<li><a href="#ui.progressbar" title="Goto ProgressBar Component Page">Progressbar</a></li>
|
<li><a href="#ui.progressbar" title="Goto ProgressBar Component Page">Progressbar</a></li>
|
||||||
<li><a href="#ui.slider" title="Goto Slider Component Page">Slider</a></li>
|
<li><a href="#ui.slider" title="Goto Slider Component Page">Slider</a></li>
|
||||||
<li><a href="#ui.spinner" title="Goto Spinner Component Page">Spinner</a></li>
|
<li><a href="#ui.spinner" title="Goto Spinner Component Page">Spinner</a></li>
|
||||||
|
|||||||
@ -1,52 +0,0 @@
|
|||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var model = {
|
|
||||||
|
|
||||||
renderAt: '#containerDemo',
|
|
||||||
|
|
||||||
title: 'Magnifier Demos',
|
|
||||||
|
|
||||||
demos: [
|
|
||||||
|
|
||||||
{
|
|
||||||
title: 'Simple Magnifier',
|
|
||||||
desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
|
|
||||||
html: '<div id="magnifier"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',
|
|
||||||
destroy: '$("#magnifier").magnifier("destroy");',
|
|
||||||
options: [
|
|
||||||
{ desc: 'Attach a magnifier', source: '$("#magnifier").magnifier();' },
|
|
||||||
{ desc: 'Small magnification', source: '$("#magnifier").magnifier({magnification:1.5});' },
|
|
||||||
{ desc: 'Disable the magnifier', source: '$("#magnifier").magnifier("disable");' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
title: 'Opacity Magnifier',
|
|
||||||
desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
|
|
||||||
html: '<div id="magnifier2"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',
|
|
||||||
destroy: '$("#magnifier2").magnifier("destroy");',
|
|
||||||
options: [
|
|
||||||
{ desc: 'Opacity option', source: '$("#magnifier2").magnifier({opacity:{min:0.4,max:1.0}});' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
title: 'Overlap Magnifier',
|
|
||||||
desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
|
|
||||||
html: '<div style="height:16px;"> </div><div id="magnifier3"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div><div style="height:84px;"> </div>',
|
|
||||||
destroy: '$("#magnifier3").magnifier("destroy");',
|
|
||||||
options: [
|
|
||||||
{ desc: 'Overlap option', source: '$("#magnifier3").magnifier({overlap:true});' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
$(function(){
|
|
||||||
|
|
||||||
uiRenderDemo(model);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Language" content="en" />
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<title>Magnifier Demo</title>
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
|
|
||||||
body,html {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: Arial;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.playground {
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#example1 img,
|
|
||||||
#example2 img,
|
|
||||||
#example3 img,
|
|
||||||
#example4 img {
|
|
||||||
float:left;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
|
||||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
|
||||||
<script type="text/javascript" src="../../ui/ui.magnifier.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<h2>1. Default, no options</h2>
|
|
||||||
<div class="playground">
|
|
||||||
<div id='example1' class="ui-wrapper example" style="width: 580px; padding: 20px;">
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>2. Magnification set to 1.5 (default: 2)</h2>
|
|
||||||
<div class="playground">
|
|
||||||
<div id='example2' class="ui-wrapper example" style="width: 580px; padding: 20px;">
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>3. Advanced example: overlap: true, zIndex: 10, opacity: { min: 0.6, max: 1 }, baseline: -1</h2>
|
|
||||||
<div class="playground">
|
|
||||||
<div id='example3' class="ui-wrapper example" style="width: 580px; padding: 20px;">
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>4. Advanced example: The direction doesn't have to be horizontal!</h2>
|
|
||||||
<div class="playground">
|
|
||||||
<div id='example4' class="ui-wrapper example" style="width: 150px; padding: 20px; height: 150px;">
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
<img src="../images/clock.png" width="48" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
if(!window.console) {
|
|
||||||
window.console = {
|
|
||||||
log: function() {
|
|
||||||
alert(arguments[0]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$(window).bind("load",function(){
|
|
||||||
|
|
||||||
$('#example1').magnifier();
|
|
||||||
$('#example2').magnifier({ magnification: 1.5 });
|
|
||||||
$('#example3').magnifier({ magnification: 1.5, overlap: true, zIndex: 10, opacity: { min: 0.6, max: 1 }, baseline: -1 });
|
|
||||||
$('#example4').magnifier({ magnification: 1.5, overlap: true, zIndex: 10, opacity: { min: 0.6, max: 1 }, distance: 30 });
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
/*
|
|
||||||
* jQuery UI Magnifier @VERSION
|
|
||||||
*
|
|
||||||
* Copyright (c) 2008 jQuery
|
|
||||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
|
||||||
* and GPL (GPL-LICENSE.txt) licenses.
|
|
||||||
*
|
|
||||||
* http://docs.jquery.com/UI/Magnifier
|
|
||||||
*
|
|
||||||
* Depends:
|
|
||||||
* ui.core.js
|
|
||||||
*/
|
|
||||||
(function($) {
|
|
||||||
|
|
||||||
var counter = 0;
|
|
||||||
|
|
||||||
$.widget("ui.magnifier", {
|
|
||||||
_init: function() {
|
|
||||||
var self = this,
|
|
||||||
o = this.options;
|
|
||||||
|
|
||||||
this.element
|
|
||||||
.addClass("ui-magnifier")
|
|
||||||
.bind('click.magnifier', function(e) {
|
|
||||||
(!self.disabled && o.click && o.click.apply(this, [e, {
|
|
||||||
options: self.options,
|
|
||||||
current: self.current[0],
|
|
||||||
currentOffset: self.current[1]
|
|
||||||
}]));
|
|
||||||
});
|
|
||||||
|
|
||||||
// the element must have relative or absolute positioning
|
|
||||||
if (!(/^(r|a)/).test(this.element.css("position"))) {
|
|
||||||
this.element.css("position", "relative");
|
|
||||||
}
|
|
||||||
|
|
||||||
this.items = [];
|
|
||||||
this.element.find(o.items).each(function() {
|
|
||||||
var $this = $(this);
|
|
||||||
// TODO: use a hash so references to this data is readable
|
|
||||||
self.items.push([
|
|
||||||
this,
|
|
||||||
$this.offset(),
|
|
||||||
[$this.width(),$this.height()],
|
|
||||||
(o.overlap ? $this.position() : null)
|
|
||||||
]);
|
|
||||||
|
|
||||||
(o.opacity && $this.css('opacity', o.opacity.min));
|
|
||||||
});
|
|
||||||
|
|
||||||
// absolutize
|
|
||||||
(o.overlap && $.each(this.items, function() {
|
|
||||||
$(this[0]).css({
|
|
||||||
position: "absolute",
|
|
||||||
top: this[3].top,
|
|
||||||
left: this[3].left
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.identifier = ++counter;
|
|
||||||
$(document).bind("mousemove.magnifier"+this.identifier, function(e) {
|
|
||||||
(self.disabled || self._magnify.apply(self, [e]));
|
|
||||||
});
|
|
||||||
|
|
||||||
this.pp = this.element.offset();
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function() {
|
|
||||||
this.reset();
|
|
||||||
this.element
|
|
||||||
.removeClass("ui-magnifier ui-magnifier-disabled")
|
|
||||||
.unbind(".magnifier");
|
|
||||||
$(document).unbind("mousemove.magnifier"+this.identifier);
|
|
||||||
},
|
|
||||||
|
|
||||||
disable: function() {
|
|
||||||
this.reset();
|
|
||||||
$.widget.prototype.disable.apply(this, arguments);
|
|
||||||
},
|
|
||||||
|
|
||||||
reset: function(e) {
|
|
||||||
var o = this.options;
|
|
||||||
|
|
||||||
$.each(this.items, function() {
|
|
||||||
var item = this;
|
|
||||||
$(item[0]).css({
|
|
||||||
width: item[2][0],
|
|
||||||
height: item[2][1],
|
|
||||||
top: (item[3] ? item[3].top : 0),
|
|
||||||
left: (item[3] ? item[3].left : 0)
|
|
||||||
});
|
|
||||||
|
|
||||||
(o.opacity && $(item[0]).css('opacity', o.opacity.min));
|
|
||||||
(o.zIndex && $(item[0]).css("z-index", ""));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
_magnify: function(e) {
|
|
||||||
var p = [e.pageX,e.pageY], o = this.options, c, distance = 1;
|
|
||||||
this.current = this.items[0];
|
|
||||||
|
|
||||||
// Compute the parent's distance
|
|
||||||
// we don't need to fire anything if we are not near the parent
|
|
||||||
var overlap = ((p[0] > this.pp.left-o.distance) &&
|
|
||||||
(p[0] < this.pp.left + this.element[0].offsetWidth + o.distance) &&
|
|
||||||
(p[1] > this.pp.top-o.distance) &&
|
|
||||||
(p[1] < this.pp.top + this.element[0].offsetHeight + o.distance));
|
|
||||||
if (!overlap) { return false; }
|
|
||||||
|
|
||||||
for (var i=0; i<this.items.length; i++) {
|
|
||||||
c = this.items[i];
|
|
||||||
|
|
||||||
var olddistance = distance;
|
|
||||||
if (!o.axis) {
|
|
||||||
distance = Math.sqrt(
|
|
||||||
Math.pow(p[0] - ((c[3] ? this.pp.left : c[1].left) + parseInt(c[0].style.left,10)) - (c[0].offsetWidth/2), 2)
|
|
||||||
+ Math.pow(p[1] - ((c[3] ? this.pp.top : c[1].top ) + parseInt(c[0].style.top,10)) - (c[0].offsetHeight/2), 2)
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
if(o.axis == "y") {
|
|
||||||
distance = Math.abs(p[1] - ((c[3] ? this.pp.top : c[1].top ) + parseInt(c[0].style.top,10)) - (c[0].offsetHeight/2));
|
|
||||||
} else {
|
|
||||||
distance = Math.abs(p[0] - ((c[3] ? this.pp.left : c[1].left) + parseInt(c[0].style.left,10)) - (c[0].offsetWidth/2));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (distance < o.distance) {
|
|
||||||
this.current = distance < olddistance ? c : this.current;
|
|
||||||
|
|
||||||
if (!o.axis || o.axis != "y") {
|
|
||||||
$(c[0]).css({
|
|
||||||
width: c[2][0]+ (c[2][0] * (o.magnification-1)) - (((distance/o.distance)*c[2][0]) * (o.magnification-1)),
|
|
||||||
left: (c[3] ? (c[3].left + o.verticalLine * ((c[2][1] * (o.magnification-1)) - (((distance/o.distance)*c[2][1]) * (o.magnification-1)))) : 0)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!o.axis || o.axis != "x") {
|
|
||||||
$(c[0]).css({
|
|
||||||
height: c[2][1]+ (c[2][1] * (o.magnification-1)) - (((distance/o.distance)*c[2][1]) * (o.magnification-1)),
|
|
||||||
top: (c[3] ? c[3].top : 0) + (o.baseline-0.5) * ((c[2][0] * (o.magnification-1)) - (((distance/o.distance)*c[2][0]) * (o.magnification-1)))
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (o.opacity) {
|
|
||||||
$(c[0]).css('opacity', o.opacity.max-(distance/o.distance) < o.opacity.min ? o.opacity.min : o.opacity.max-(distance/o.distance));
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
$(c[0]).css({
|
|
||||||
width: c[2][0],
|
|
||||||
height: c[2][1],
|
|
||||||
top: (c[3] ? c[3].top : 0),
|
|
||||||
left: (c[3] ? c[3].left : 0)
|
|
||||||
});
|
|
||||||
|
|
||||||
(o.opacity && $(c[0]).css('opacity', o.opacity.min));
|
|
||||||
}
|
|
||||||
|
|
||||||
(o.zIndex && $(c[0]).css("z-index", ""));
|
|
||||||
}
|
|
||||||
|
|
||||||
(o.zIndex && $(this.current[0]).css("z-index", o.zIndex));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$.extend($.ui.magnifier, {
|
|
||||||
version: "@VERSION",
|
|
||||||
defaults: {
|
|
||||||
distance: 150,
|
|
||||||
magnification: 2,
|
|
||||||
baseline: 0,
|
|
||||||
verticalLine: -0.5,
|
|
||||||
items: "> *"
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
})(jQuery);
|
|
||||||
Loading…
Reference in New Issue
Block a user