121 lines
4.4 KiB
JavaScript
121 lines
4.4 KiB
JavaScript
/**
|
|
* ScrollView - jQuery plugin 0.1
|
|
*
|
|
* This plugin supplies contents view by grab and drag scroll.
|
|
*
|
|
* Copyright (c) 2009 Toshimitsu Takahashi
|
|
*
|
|
* Released under the MIT license.
|
|
*
|
|
* == Usage =======================
|
|
* // apply to block element.
|
|
* $("#map").scrollview();
|
|
*
|
|
* // with setting grab and drag icon urls.
|
|
* // grab: the cursor when mouse button is up.
|
|
* // grabbing: the cursor when mouse button is down.
|
|
* //
|
|
* $("#map".scrollview({
|
|
* grab : "images/openhand.cur",
|
|
* grabbing : "images/closedhand.cur"
|
|
* });
|
|
* ================================
|
|
*/
|
|
(function() {
|
|
function ScrollView(){ this.initialize.apply(this, arguments) }
|
|
ScrollView.prototype = {
|
|
initialize: function(container, config){
|
|
// setting cursor.
|
|
var gecko = navigator.userAgent.indexOf("Gecko/") != -1;
|
|
var opera = navigator.userAgent.indexOf("Opera/") != -1;
|
|
var mac = navigator.userAgent.indexOf("Mac OS") != -1;
|
|
if (opera) {
|
|
this.grab = "default";
|
|
this.grabbing = "move";
|
|
} else if (!(mac && gecko) && config) {
|
|
if (config.grab) {
|
|
this.grab = "url(\"" + config.grab + "\"),default";
|
|
}
|
|
if (config.grabbing) {
|
|
this.grabbing = "url(" + config.grabbing + "),move";
|
|
}
|
|
} else if (gecko) {
|
|
this.grab = "-moz-grab";
|
|
this.grabbing = "-moz-grabbing";
|
|
} else {
|
|
this.grab = "default";
|
|
this.grabbing = "move";
|
|
}
|
|
|
|
// Get container and image.
|
|
this.m = $(container);
|
|
this.i = this.m.children().css("cursor", this.grab);
|
|
|
|
this.isgrabbing = false;
|
|
|
|
// Set mouse events.
|
|
var self = this;
|
|
this.i.mousedown(function(e){
|
|
self.startgrab();
|
|
this.xp = e.pageX;
|
|
this.yp = e.pageY;
|
|
return false;
|
|
}).mousemove(function(e){
|
|
if (!self.isgrabbing) return true;
|
|
self.scrollTo(this.xp - e.pageX, this.yp - e.pageY);
|
|
this.xp = e.pageX;
|
|
this.yp = e.pageY;
|
|
return false;
|
|
})
|
|
.mouseout(function(){ self.stopgrab() })
|
|
.mouseup(function(){ self.stopgrab() })
|
|
.dblclick(function(){
|
|
var _m = self.m;
|
|
var off = _m.offset();
|
|
var dx = this.xp - off.left - _m.width() / 2;
|
|
if (dx < 0) {
|
|
dx = "+=" + dx + "px";
|
|
} else {
|
|
dx = "-=" + -dx + "px";
|
|
}
|
|
var dy = this.yp - off.top - _m.height() / 2;
|
|
if (dy < 0) {
|
|
dy = "+=" + dy + "px";
|
|
} else {
|
|
dy = "-=" + -dy + "px";
|
|
}
|
|
_m.animate({ scrollLeft: dx, scrollTop: dy },
|
|
"normal", "swing");
|
|
});
|
|
|
|
this.centering();
|
|
},
|
|
centering: function(){
|
|
var _m = this.m;
|
|
var w = this.i.width() - _m.width();
|
|
var h = this.i.height() - _m.height();
|
|
_m.scrollLeft(w / 2).scrollTop(h / 2);
|
|
},
|
|
startgrab: function(){
|
|
this.isgrabbing = true;
|
|
this.i.css("cursor", this.grabbing);
|
|
},
|
|
stopgrab: function(){
|
|
this.isgrabbing = false;
|
|
this.i.css("cursor", this.grab);
|
|
},
|
|
scrollTo: function(dx, dy){
|
|
var _m = this.m;
|
|
var x = _m.scrollLeft() + dx;
|
|
var y = _m.scrollTop() + dy;
|
|
_m.scrollLeft(x).scrollTop(y);
|
|
}
|
|
};
|
|
|
|
jQuery.fn.scrollview = function(config){
|
|
return this.each(function(){
|
|
new ScrollView(this, config);
|
|
});
|
|
};
|
|
})(jQuery);
|