以下是 对话框-dialogr特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Dialogr</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui.resizable.js"></script>
<script type="text/javascript" src="js/ui.dialogr.js"></script>
<script type="text/javascript" src="js/typeface-0.14.js"></script>
<script type="text/javascript" src="js/museo_700.typeface.js"></script>
<link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.dialogr.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$("#dialog").dialogr({ autoOpen: false, minHeight: 140, minWidth: 310, height: 160, width: 330 });
//$("#dialog").dialog({maximized:true,minimized:true});
//$("#dialog").dialog({maximized:true,minimized:false});
//$("#dialog").dialog({maximized:false,minimized:true});
//$("#dialog").dialog({maximized:false,minimized:false});
$("#open-btn").click(function () {
$("#dialog").dialogr( 'open' );
});
});
</script>
<style type="text/css">
<!--
/* This CSS is only for this html, it's not related to jQuery Dialogr Plugin */
body {
font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
color: #666;
margin: 0px;
padding: 0px;
background-color: #eee;
font-size:16px;
}
h1, h2, h3, h4, h5 {
font-family:"Museo","Trebuchet MS";
color:#444;
font-weight:normal;
}
h1 {
font-size:80px;
font-weight:normal;
background-color: #FFF;
padding: 15px;
margin: 0px;
}
h3 {
font-size: 24px;
margin:15px 0 25px;
}
h2 {
margin-bottom:15px;
margin-top:30px;
}
h3.big {
color: #F90;
}
h4 {
margin-bottom:5px;
margin-top:25px;
}
a {
color: #F90;
text-decoration: none;
font-weight: bold;
}
ul {
list-style-position: outside;
list-style-type: none;
list-style-image: url(img/1265223430_tick.png);
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
margin-right:15px;
}
li {
padding-left: 5px;
margin-top: -2px;
margin-bottom: 8px;
}
p {
margin:8px 0;
}
pre {
background-color: #F3F3F3;
padding: 20px;
color: #999;
font-size:12px;
}
#container {
position:relative;
width: 1000px;
background-color: #FFF;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFF;
padding: 25px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
border-left-color: #FFF;
}
#header {
text-align: right;
}
#icon img {
margin-right:10px;
border:0;
}
#note {
font-size:12px;
}
#open-btn {
background-color:#F90;
color:#fff;
padding:8px 15px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
span.open {
background:url("css/ui-lightness/images/ui-icons_ffffff_256x240.png") repeat-x scroll 50% 50% transparent;
background-position:-50px -193px;
width:16px;
height:16px;
display:block;
}
span.open.ui-icon {
display:inline-block;
vertical-align:middle;
margin-right:5px;
*display: inline;
}
-->
</style>
</head>
<body>
<div id="dialog" title="jQuery Dialogr Example">
<p>This dialog window can be moved, resized, maximized, minimized, restored and closed with the 'x' icon.</p>
</div>
<div id="container">
<div id="header">
<h1>jQuery Dialogr</h1>
<h3 class="big">Maximize. Minimize. Restore.</h3>
</div>
<div id="info" style="text-align:center">
<p><img src="img/bar.png" width="900" height="38" /></p>
<p>This plugin is a modified copy of <a href="demos/dialog" target="_blank">jQuery UI Dialog</a> widget, adding minimize, restore and maximize buttons.</p>
<p style="margin-top:30px;"><a href="#" id="open-btn"><span class="open ui-icon ui-icon-newwin"></span>Open Dialogr</a></p>
<p><img src="img/bar.png" width="900" height="38" /></p>
</div>
<h2>Usage</h2>
<p>Well, use it as any normal dialog, but with one "r" at the end:</p>
<pre>$(#dialog).dialog<strong>r</strong>();</pre>
<p> You can use it with all jQuery UI Dialog options! </p>
<p>But jQuery Master Dialog adds two other options (when false the button doesn't appear):</p>
<pre>$("#dialog").dialogr({maximized:false,minimized:false});</pre>
<p>Off course, without minimize and restore buttons, it'll be the old UI Dialog again.</p>
<h2>Download</h2>
<p><a href="jquery.dialogr.v.1.0.rar"><img src="img/1265223172_ark2.png" alt="Download" width="48" height="48" border="0" align="absmiddle" /> jQuery Dialogr</a></p>
<h2>Plugin requirements </h2>
<ul>
<li><a href=".com/" target="_blank">jQuery</a></li>
<li><a href="ui.com" target="_blank">jQuery UI</a> (Core, Draggable, Resizable)</li>
</ul>
<h2>Socialize</h2>
<p id="icon"><a href="delicious.com/save?jump=yes&v=4&partner=[partner]&noui&url=carvalhar.com/componente/jQueryDialogr/index.html;title=jQuery Dialogr" target="_blank"><img src="img/social/delicious-32x32.png" alt="Delicious" width="32" height="32" border="0" /></a><a href="twitter.com/home?status=carvalhar.com/componente/jQueryDialogr/index.html+(via+@carvalhar)" target="_blank"><img src="img/social/twitter-32x32.png" alt="Twitter" width="32" height="32" border="0" /></a><a href="www.stumbleupon.com/submit?url=carvalhar.com/componente/jQueryDialogr/index.html&title=jQuery Dialogr" target="_blank"><img src="img/social/stumbleupon-32x32.png" alt="Stumble Upon" width="32" height="32" border="0" /></a><a href="technorati.com/cosmos/search.html?url=carvalhar.com/componente/jQueryDialogr/index.html" target="_blank"><img src="img/social/technorati-32x32.png" alt="Technorati" width="32" height="32" border="0" /></a><a href="#" target="_blank"></a><a href="digg.com/submit?phase=2&url="+linkSite" target="_blank"><img src="img/social/digg-32x32.png" alt="Digg" width="32" height="32" border="0" /></a><a href="www.facebook.com/sharer.php?u=carvalhar.com/componente/jQueryDialogr/index.html&t=jQuery Dialogr" target="_blank"><img src="img/social/facebook-32x32.png" alt="Facebook" width="32" height="32" border="0" /></a><a href="www.google.com/bookmarks/mark?op=add&bkmk=carvalhar.com/componente/jQueryDialogr/index.html&title=jQuery Dialogr" target="_blank"><img src="img/social/google-32x32.png" alt="Google" width="32" height="32" border="0" /></a><a href="reddit.com/submit?urlcarvalhar.com/componente/jQueryDialogr/index.html&title=jQuery Dialogr" target="_blank"><img src="img/social/reddit-32x32.png" alt="Redd It" width="32" height="32" border="0" /></a></p>
<h2>Credits</h2>
<p>Developed by <a href="carvalhar.com" target="_blank">Carlos Carvalhar</a> with the help of <a href="voxelmidia.com.br" target="_blank">Ciro Anuncia莽茫o</a>, when they were working at <a href="pixfly.com.br" target="_blank">PixFly</a>, Brazil.</p>
<h4>Notes</h4>
<div id="note">
<p>This plugin works with IE7, IE8, Chrome, Safari and Mozilla/Firefox. Don't ask about IE6, we don't care anymore.</p>
<p>This code was based in two resources:</p>
<p><a href="www.profissionaisti.com.br/2008/11/jquery-dialog-melhorias-interessantes" target="_blank">jQuery Dialog 鈥?Melhorias Interessantes/Improvements</a> (by Jackson Caset)</p>
<p><a href="old.nabble.com/How-to-%22properly%22-extend-the-jQuery-UI-Dialog-widget-----td24182676s27240.html" target="_blank">How to "properly" extend the jQuery UI Dialog widget?</a> (by Marv4 and Scott Gonz谩lez)</p>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2874888-2");
pageTracker._initData();
</script>
</body>
</html>
JS代码(ui.draggable.js):
/* * jQuery UI Draggable 1.7.2 * * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * http://docs.jquery.com/UI/Draggables * * Depends:*ui.core.js */
(function($){
$.widget("ui.draggable",$.extend({
}
,$.ui.mouse,{
_init:function(){
if (this.options.helper == 'original' && !(/^(?:r|a|f)/).test(this.element.css("position")))this.element[0].style.position = 'relative';
(this.options.addClasses && this.element.addClass("ui-draggable"));
(this.options.disabled && this.element.addClass("ui-draggable-disabled"));
this._mouseInit();
}
,destroy:function(){
if(!this.element.data('draggable')) return;
this.element.removeData("draggable").unbind(".draggable").removeClass("ui-draggable"+ " ui-draggable-dragging"+ " ui-draggable-disabled");
this._mouseDestroy();
}
,_mouseCapture:function(event){
var o = this.options;
if (this.helper || o.disabled || $(event.target).is('.ui-resizable-handle'))return false;
//Quit if we're not on a valid handlethis.handle = this._getHandle(event);
if (!this.handle)return false;
return true;
}
,_mouseStart:function(event){
var o = this.options;
//Create and append the visible helperthis.helper = this._createHelper(event);
//Cache the helper sizethis._cacheHelperProportions();
//If ddmanager is used for droppables,set the global draggableif($.ui.ddmanager)$.ui.ddmanager.current = this;
/* * - Position generation - * This block generates everything position related - it's the core of draggables. */
//Cache the margins of the original elementthis._cacheMargins();
//Store the helper's css positionthis.cssPosition = this.helper.css("position");
this.scrollParent = this.helper.scrollParent();
//The element's absolute position on the page minus marginsthis.offset = this.element.offset();
this.offset ={
top:this.offset.top - this.margins.top,left:this.offset.left - this.margins.left}
;
$.extend(this.offset,{
click:{
//Where the click happened,relative to the elementleft:event.pageX - this.offset.left,top:event.pageY - this.offset.top}
,parent:this._getParentOffset(),relative:this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper}
);
//Generate the original positionthis.originalPosition = this._generatePosition(event);
this.originalPageX = event.pageX;
this.originalPageY = event.pageY;
//Adjust the mouse offset relative to the helper if 'cursorAt' is suppliedif(o.cursorAt)this._adjustOffsetFromHelper(o.cursorAt);
//Set a containment if given in the optionsif(o.containment)this._setContainment();
//Call plugins and callbacksthis._trigger("start",event);
//Recache the helper sizethis._cacheHelperProportions();
//Prepare the droppable offsetsif ($.ui.ddmanager && !o.dropBehaviour)$.ui.ddmanager.prepareOffsets(this,event);
this.helper.addClass("ui-draggable-dragging");
this._mouseDrag(event,true);
//Execute the drag once - this causes the helper not to be visible before getting its correct positionreturn true;
}
,_mouseDrag:function(event,noPropagation){
if (!window.minimized){
//Compute the helpers positionthis.position = this._generatePosition(event);
this.positionAbs = this._convertPositionTo("absolute");
//Call plugins and callbacks and use the resulting position if something is returnedif (!noPropagation){
var ui = this._uiHash();
this._trigger('drag',event,ui);
this.position = ui.position;
}
if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px';
if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top+'px';
if($.ui.ddmanager) $.ui.ddmanager.drag(this,event);
return false;
}
}
,_mouseStop:function(event){
//If we are using droppables,inform the manager about the dropvar dropped = false;
if ($.ui.ddmanager && !this.options.dropBehaviour)dropped = $.ui.ddmanager.drop(this,event);
//if a drop comes from outside (a sortable)if(this.dropped){
dropped = this.dropped;
this.dropped = false;
}
if((this.options.revert == "invalid" && !dropped) || (this.options.revert == "valid" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element,dropped))){
var self = this;
$(this.helper).animate(this.originalPosition,parseInt(this.options.revertDuration,10),function(){
self._trigger("stop",event);
self._clear();
}
);
}
else{
this._trigger("stop",event);
this._clear();
}
return false;
}
,_getHandle:function(event){
var handle = !this.options.handle || !$(this.options.handle,this.element).length ? true:false;
$(this.options.handle,this.element).find("*").andSelf().each(function(){
if(this == event.target) handle = true;
}
);
return handle;
}
,_createHelper:function(event){
var o = this.options;
var helper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0],[event])):(o.helper == 'clone' ? this.element.clone():this.element);
if(!helper.parents('body').length)helper.appendTo((o.appendTo == 'parent' ? this.element[0].parentNode:o.appendTo));
if(helper[0] != this.element[0] && !(/(fixed|absolute)/).test(helper.css("position")))helper.css("position","absolute");
return helper;
}
,_adjustOffsetFromHelper:function(obj){
if(obj.left != undefined) this.offset.click.left = obj.left + this.margins.left;
if(obj.right != undefined) this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
if(obj.top != undefined) this.offset.click.top = obj.top + this.margins.top;
if(obj.bottom != undefined) this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
}
,_getParentOffset:function(){
//Get the offsetParent and cache its positionthis.offsetParent = this.helper.offsetParent();
var po = this.offsetParent.offset();
// This is a special case where we need to modify a offset calculated on start,since the following happened:// 1. The position of the helper is absolute,so it's position is calculated based on the next positioned parent// 2. The actual offset parent is a child of the scroll parent,and the scroll parent isn't the document,which means that// the scroll is included in the initial calculation of the offset of the parent,and never recalculated upon dragif(this.cssPosition == 'absolute' && this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0],this.offsetParent[0])){
po.left += this.scrollParent.scrollLeft();
po.top += this.scrollParent.scrollTop();
}
if((this.offsetParent[0] == document.body) //This needs to be actually done for all browsers,since pageX/pageY includes this information|| (this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() == 'html' && $.browser.msie)) //Ugly IE fixpo ={
top:0,left:0}
;
return{
top:po.top + (parseInt(this.offsetParent.css("borderTopWidth"),10) || 0),left:po.left + (parseInt(this.offsetParent.css("borderLeftWidth"),10) || 0)}
;
}
,_getRelativeOffset:function(){
if(this.cssPosition == "relative"){
var p = this.element.position();
return{
top:p.top - (parseInt(this.helper.css("top"),10) || 0) + this.scrollParent.scrollTop(),left:p.left - (parseInt(this.helper.css("left"),10) || 0) + this.scrollParent.scrollLeft()}
;
}
else{
return{
top:0,left:0}
;
}
}
,_cacheMargins:function(){
this.margins ={
left:(parseInt(this.element.css("marginLeft"),10) || 0),top:(parseInt(this.element.css("marginTop"),10) || 0)}
;
}
,_cacheHelperProportions:function(){
this.helperProportions ={
width:this.helper.outerWidth(),height:this.helper.outerHeight()}
;
}
,_setContainment:function(){
var o = this.options;
if(o.containment == 'parent') o.containment = this.helper[0].parentNode;
if(o.containment == 'document' || o.containment == 'window') this.containment = [0 - this.offset.relative.left - this.offset.parent.left,0 - this.offset.relative.top - this.offset.parent.top,$(o.containment == 'document' ? document:window).width() - this.helperProportions.width - this.margins.left,($(o.containment == 'document' ? document:window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top];
if(!(/^(document|window|parent)$/).test(o.containment) && o.containment.constructor != Array){
var ce = $(o.containment)[0];
if(!ce) return;
var co = $(o.containment).offset();
var over = ($(ce).css("overflow") != 'hidden');
this.containment = [co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left,co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top,co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth):ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left,co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight):ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top];
}
else if(o.containment.constructor == Array){
this.containment = o.containment;
}
}
,_convertPositionTo:function(d,pos){
if(!pos) pos = this.position;
var mod = d == "absolute" ? 1:-1;
var o = this.options,scroll = this.cssPosition == 'absolute' && !(this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0],this.offsetParent[0])) ? this.offsetParent:this.scrollParent,scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
return{
top:(pos.top// The absolute mouse position+ this.offset.relative.top * mod// Only for relative positioned nodes:Relative offset from element to offset parent+ this.offset.parent.top * mod// The offsetParent's offset without borders (offset + border)- ($.browser.safari && this.cssPosition == 'fixed' ? 0:( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop():( scrollIsRootNode ? 0:scroll.scrollTop() ) ) * mod)),left:(pos.left// The absolute mouse position+ this.offset.relative.left * mod// Only for relative positioned nodes:Relative offset from element to offset parent+ this.offset.parent.left * mod// The offsetParent's offset without borders (offset + border)- ($.browser.safari && this.cssPosition == 'fixed' ? 0:( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft():scrollIsRootNode ? 0:scroll.scrollLeft() ) * mod))}
;
}
,_generatePosition:function(event){
var o = this.options,scroll = this.cssPosition == 'absolute' && !(this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0],this.offsetParent[0])) ? this.offsetParent:this.scrollParent,scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
// This is another very weird special case that only happens for relative elements:// 1. If the css position is relative// 2. and the scroll parent is the document or similar to the offset parent// we have to refresh the relative offset during the scroll so there are no jumpsif(this.cssPosition == 'relative' && !(this.scrollParent[0] != document && this.scrollParent[0] != this.offsetParent[0])){
this.offset.relative = this._getRelativeOffset();
}
var pageX = event.pageX;
var pageY = event.pageY;
/* * - Position constraining - * Constrain the position to a mix of grid,containment. */
if(this.originalPosition){
//If we are not dragging yet,we won't check for optionsif(this.containment){
if(event.pageX - this.offset.click.left < this.containment[0]) pageX = this.containment[0] + this.offset.click.left;
if(event.pageY - this.offset.click.top < this.containment[1]) pageY = this.containment[1] + this.offset.click.top;
if(event.pageX - this.offset.click.left > this.containment[2]) pageX = this.containment[2] + this.offset.click.left;
if(event.pageY - this.offset.click.top > this.containment[3]) pageY = this.containment[3] + this.offset.click.top;
}
if(o.grid){
var top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1];
pageY = this.containment ? (!(top - this.offset.click.top < this.containment[1] || top - this.offset.click.top > this.containment[3]) ? top:(!(top - this.offset.click.top < this.containment[1]) ? top - o.grid[1]:top + o.grid[1])):top;
var left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0];
pageX = this.containment ? (!(left - this.offset.click.left < this.containment[0] || left - this.offset.click.left > this.containment[2]) ? left:(!(left - this.offset.click.left < this.containment[0]) ? left - o.grid[0]:left + o.grid[0])):left;
}
}
return{
top:(pageY// The absolute mouse position- this.offset.click.top// Click offset (relative to the element)- this.offset.relative.top// Only for relative positioned nodes:Relative offset from element to offset parent- this.offset.parent.top// The offsetParent's offset without borders (offset + border)+ ($.browser.safari && this.cssPosition == 'fixed' ? 0:( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop():( scrollIsRootNode ? 0:scroll.scrollTop() ) ))),left:(pageX// The absolute mouse position- this.offset.click.left// Click offset (relative to the element)- this.offset.relative.left// Only for relative positioned nodes:Relative offset from element to offset parent- this.offset.parent.left// The offsetParent's offset without borders (offset + border)+ ($.browser.safari && this.cssPosition == 'fixed' ? 0:( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft():scrollIsRootNode ? 0:scroll.scrollLeft() )))}
;
}
,_clear:function(){
this.helper.removeClass("ui-draggable-dragging");
if(this.helper[0] != this.element[0] && !this.cancelHelperRemoval) this.helper.remove();
//if($.ui.ddmanager) $.ui.ddmanager.current = null;
this.helper = null;
this.cancelHelperRemoval = false;
}
,// From now on bulk stuff - mainly helpers_trigger:function(type,event,ui){
ui = ui || this._uiHash();
$.ui.plugin.call(this,type,[event,ui]);
if(type == "drag") this.positionAbs = this._convertPositionTo("absolute");
//The absolute position has to be recalculated after pluginsreturn $.widget.prototype._trigger.call(this,type,event,ui);
}
,plugins:{
}
,_uiHash:function(event){
return{
helper:this.helper,position:this.position,absolutePosition:this.positionAbs,//deprecatedoffset:this.positionAbs}
;
}
}
));
$.extend($.ui.draggable,{
version:"1.7.2",eventPrefix:"drag",defaults:{
addClasses:true,appendTo:"parent",axis:false,cancel:":input,option",connectToSortable:false,containment:false,cursor:"auto",cursorAt:false,delay:0,distance:1,grid:false,handle:false,helper:"original",iframeFix:false,opacity:false,refreshPositions:false,revert:false,revertDuration:500,scope:"default",scroll:true,scrollSensitivity:20,scrollSpeed:20,snap:false,snapMode:"both",snapTolerance:20,stack:false,zIndex:false}
}
);
$.ui.plugin.add("draggable","connectToSortable",{
start:function(event,ui){
var inst = $(this).data("draggable"),o = inst.options,uiSortable = $.extend({
}
,ui,{
item:inst.element}
);
inst.sortables = [];
$(o.connectToSortable).each(function(){
var sortable = $.data(this,'sortable');
if (sortable && !sortable.options.disabled){
inst.sortables.push({
instance:sortable,shouldRevert:sortable.options.revert}
);
sortable._refreshItems();
//Do a one-time refresh at start to refresh the containerCachesortable._trigger("activate",event,uiSortable);
}
}
);
}
,stop:function(event,ui){
//If we are still over the sortable,we fake the stop event of the sortable,but also remove helpervar inst = $(this).data("draggable"),uiSortable = $.extend({
}
,ui,{
item:inst.element}
);
$.each(inst.sortables,function(){
if(this.instance.isOver){
this.instance.isOver = 0;
inst.cancelHelperRemoval = true;
//Don't remove the helper in the draggable instancethis.instance.cancelHelperRemoval = false;
//Remove it in the sortable instance (so sortable plugins like revert still work)//The sortable revert is supported,and we have to set a temporary dropped variable on the draggable to support revert:'valid/invalid'if(this.shouldRevert) this.instance.options.revert = true;
//Trigger the stop of the sortablethis.instance._mouseStop(event);
this.instance.options.helper = this.instance.options._helper;
//If the helper has been the original item,restore properties in the sortableif(inst.options.helper == 'original')this.instance.currentItem.css({
top:'auto',left:'auto'}
);
}
else{
this.instance.cancelHelperRemoval = false;
//Remove the helper in the sortable instancethis.instance._trigger("deactivate",event,uiSortable);
}
}
);
}
,drag:function(event,ui){
var inst = $(this).data("draggable"),self = this;
var checkPos = function(o){
var dyClick = this.offset.click.top,dxClick = this.offset.click.left;
var helperTop = this.positionAbs.top,helperLeft = this.positionAbs.left;
var itemHeight = o.height,itemWidth = o.width;
var itemTop = o.top,itemLeft = o.left;
return $.ui.isOver(helperTop + dyClick,helperLeft + dxClick,itemTop,itemLeft,itemHeight,itemWidth);
}
;
$.each(inst.sortables,function(i){
//Copy over some variables to allow calling the sortable's native _intersectsWiththis.instance.positionAbs = inst.positionAbs;
this.instance.helperProportions = inst.helperProportions;
this.instance.offset.click = inst.offset.click;
if(this.instance._intersectsWith(this.instance.containerCache)){
//If it intersects,we use a little isOver variable and set it once,so our move-in stuff gets fired only onceif(!this.instance.isOver){
this.instance.isOver = 1;
//Now we fake the start of dragging for the sortable instance,//by cloning the list group item,appending it to the sortable and using it as inst.currentItem//We can then fire the start event of the sortable with our passed browser event,and our own helper (so it doesn't create a new one)this.instance.currentItem = $(self).clone().appendTo(this.instance.element).data("sortable-item",true);
this.instance.options._helper = this.instance.options.helper;
//Store helper option to later restore itthis.instance.options.helper = function(){
return ui.helper[0];
}
;
event.target = this.instance.currentItem[0];
this.instance._mouseCapture(event,true);
this.instance._mouseStart(event,true,true);
//Because the browser event is way off the new appended portlet,we modify a couple of variables to reflect the changesthis.instance.offset.click.top = inst.offset.click.top;
this.instance.offset.click.left = inst.offset.click.left;
this.instance.offset.parent.left -= inst.offset.parent.left - this.instance.offset.parent.left;
this.instance.offset.parent.top -= inst.offset.parent.top - this.instance.offset.parent.top;
inst._trigger("toSortable",event);
inst.dropped = this.instance.element;
//draggable revert needs that//hack so receive/update callbacks work (mostly)inst.currentItem = inst.element;
this.instance.fromOutside = inst;
}
//Provided we did all the previous steps,we can fire the drag event of the sortable on every draggable drag,when it intersects with the sortableif(this.instance.currentItem) this.instance._mouseDrag(event);
}
else{
//If it doesn't intersect with the sortable,and it intersected before,//we fake the drag stop of the sortable,but make sure it doesn't remove the helper by using cancelHelperRemovalif(this.instance.isOver){
this.instance.isOver = 0;
this.instance.cancelHelperRemoval = true;
//Prevent reverting on this forced stopthis.instance.options.revert = false;
// The out event needs to be triggered independentlythis.instance._trigger('out',event,this.instance._uiHash(this.instance));
this.instance._mouseStop(event,true);
this.instance.options.helper = this.instance.options._helper;
//Now we remove our currentItem,the list group clone again,and the placeholder,and animate the helper back to it's original sizethis.instance.currentItem.remove();
if(this.instance.placeholder) this.instance.placeholder.remove();
inst._trigger("fromSortable",event);
inst.dropped = false;
//draggable revert needs that}
}
;
}
);
}
}
);
$.ui.plugin.add("draggable","cursor",{
start:function(event,ui){
var t = $('body'),o = $(this).data('draggable').options;
if (t.css("cursor")) o._cursor = t.css("cursor");
t.css("cursor",o.cursor);
}
,stop:function(event,ui){
var o = $(this).data('draggable').options;
if (o._cursor) $('body').css("cursor",o._cursor);
}
}
);
$.ui.plugin.add("draggable","iframeFix",{
start:function(event,ui){
var o = $(this).data('draggable').options;
$(o.iframeFix === true ? "iframe":o.iframeFix).each(function(){
$('<div class="ui-draggable-iframeFix" style="background:#fff;
"></div>').css({
width:this.offsetWidth+"px",height:this.offsetHeight+"px",position:"absolute",opacity:"0.001",zIndex:1000}
).css($(this).offset()).appendTo("body");
}
);
}
,stop:function(event,ui){
$("div.ui-draggable-iframeFix").each(function(){
this.parentNode.removeChild(this);
}
);
//Remove frame helpers}
}
);
$.ui.plugin.add("draggable","opacity",{
start:function(event,ui){
var t = $(ui.helper),o = $(this).data('draggable').options;
if(t.css("opacity")) o._opacity = t.css("opacity");
t.css('opacity',o.opacity);
}
,stop:function(event,ui){
var o = $(this).data('draggable').options;
if(o._opacity) $(ui.helper).css('opacity',o._opacity);
}
}
);
$.ui.plugin.add("draggable","scroll",{
start:function(event,ui){
var i = $(this).data("draggable");
if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') i.overflowOffset = i.scrollParent.offset();
}
,drag:function(event,ui){
var i = $(this).data("draggable"),o = i.options,scrolled = false;
if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML'){
if(!o.axis || o.axis != 'x'){
if((i.overflowOffset.top + i.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity)i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop + o.scrollSpeed;
else if(event.pageY - i.overflowOffset.top < o.scrollSensitivity)i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop - o.scrollSpeed;
}
if(!o.axis || o.axis != 'y'){
if((i.overflowOffset.left + i.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity)i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft + o.scrollSpeed;
else if(event.pageX - i.overflowOffset.left < o.scrollSensitivity)i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft - o.scrollSpeed;
}
}
else{
if(!o.axis || o.axis != 'x'){
if(event.pageY - $(document).scrollTop() < o.scrollSensitivity)scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity)scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
}
if(!o.axis || o.axis != 'y'){
if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity)scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity)scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
}
}
if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour)$.ui.ddmanager.prepareOffsets(i,event);
}
}
);
$.ui.plugin.add("draggable","snap",{
start:function(event,ui){
var i = $(this).data("draggable"),o = i.options;
i.snapElements = [];
$(o.snap.constructor != String ? ( o.snap.items || ':data(draggable)' ):o.snap).each(function(){
var $t = $(this);
var $o = $t.offset();
if(this != i.element[0]) i.snapElements.push({
item:this,width:$t.outerWidth(),height:$t.outerHeight(),top:$o.top,left:$o.left}
);
}
);
}
,drag:function(event,ui){
var inst = $(this).data("draggable"),o = inst.options;
var d = o.snapTolerance;
var x1 = ui.offset.left,x2 = x1 + inst.helperProportions.width,y1 = ui.offset.top,y2 = y1 + inst.helperProportions.height;
for (var i = inst.snapElements.length - 1;
i >= 0;
i--){
var l = inst.snapElements[i].left,r = l + inst.snapElements[i].width,t = inst.snapElements[i].top,b = t + inst.snapElements[i].height;
//Yes,I know,this is insane;
)if(!((l-d < x1 && x1 < r+d && t-d < y1 && y1 < b+d) || (l-d < x1 && x1 < r+d && t-d < y2 && y2 < b+d) || (l-d < x2 && x2 < r+d && t-d < y1 && y1 < b+d) || (l-d < x2 && x2 < r+d && t-d < y2 && y2 < b+d))){
if(inst.snapElements[i].snapping) (inst.options.snap.release && inst.options.snap.release.call(inst.element,event,$.extend(inst._uiHash(),{
snapItem:inst.snapElements[i].item}
)));
inst.snapElements[i].snapping = false;
continue;
}
if(o.snapMode != 'inner'){
var ts = Math.abs(t - y2) <= d;
var bs = Math.abs(b - y1) <= d;
var ls = Math.abs(l - x2) <= d;
var rs = Math.abs(r - x1) <= d;
if(ts) ui.position.top = inst._convertPositionTo("relative",{
top:t - inst.helperProportions.height,left:0}
).top - inst.margins.top;
if(bs) ui.position.top = inst._convertPositionTo("relative",{
top:b,left:0}
).top - inst.margins.top;
if(ls) ui.position.left = inst._convertPositionTo("relative",{
top:0,left:l - inst.helperProportions.width}
).left - inst.margins.left;
if(rs) ui.position.left = inst._convertPositionTo("relative",{
top:0,left:r}
).left - inst.margins.left;
}
var first = (ts || bs || ls || rs);
if(o.snapMode != 'outer'){
var ts = Math.abs(t - y1) <= d;
var bs = Math.abs(b - y2) <= d;
var ls = Math.abs(l - x1) <= d;
var rs = Math.abs(r - x2) <= d;
if(ts) ui.position.top = inst._convertPositionTo("relative",{
top:t,left:0}
).top - inst.margins.top;
if(bs) ui.position.top = inst._convertPositionTo("relative",{
top:b - inst.helperProportions.height,left:0}
).top - inst.margins.top;
if(ls) ui.position.left = inst._convertPositionTo("relative",{
top:0,left:l}
).left - inst.margins.left;
if(rs) ui.position.left = inst._convertPositionTo("relative",{
top:0,left:r - inst.helperProportions.width}
).left - inst.margins.left;
}
if(!inst.snapElements[i].snapping && (ts || bs || ls || rs || first))(inst.options.snap.snap && inst.options.snap.snap.call(inst.element,event,$.extend(inst._uiHash(),{
snapItem:inst.snapElements[i].item}
)));
inst.snapElements[i].snapping = (ts || bs || ls || rs || first);
}
;
}
}
);
$.ui.plugin.add("draggable","stack",{
start:function(event,ui){
var o = $(this).data("draggable").options;
var group = $.makeArray($(o.stack.group)).sort(function(a,b){
return (parseInt($(a).css("zIndex"),10) || o.stack.min) - (parseInt($(b).css("zIndex"),10) || o.stack.min);
}
);
$(group).each(function(i){
this.style.zIndex = o.stack.min + i;
}
);
this[0].style.zIndex = o.stack.min + group.length;
}
}
);
$.ui.plugin.add("draggable","zIndex",{
start:function(event,ui){
var t = $(ui.helper),o = $(this).data("draggable").options;
if(t.css("zIndex")) o._zIndex = t.css("zIndex");
t.css('zIndex',o.zIndex);
}
,stop:function(event,ui){
var o = $(this).data("draggable").options;
if(o._zIndex) $(ui.helper).css('zIndex',o._zIndex);
}
}
);
}
)(jQuery);
CSS代码(jquery.dialogr.css):
@charset "utf-8";/* CSS Document */
.ui-widget-content{color:#666;font-size:14px;background:url("images/ui-bg_highlight-soft_100_eeeeee_1x100.png") repeat-x scroll 50% top #FFF3DF;border:1px solid #FF9900;}
#dialog-restore span{background-image:url(ui-lightness/images/ui-icons_ffffff_256x240.png);height:16px;width:16px;background-repeat:no-repeat;overflow:hidden;text-indent:-99999px;background-position:-49px -82px;display:block;}
#dialog-maximize span{background-image:url(ui-lightness/images/ui-icons_ffffff_256x240.png);height:16px;width:16px;background-repeat:no-repeat;overflow:hidden;text-indent:-99999px;background-position:-32px -82px;display:block;}
#dialog-minimize span{background-image:url(ui-lightness/images/ui-icons_ffffff_256x240.png);height:16px;width:16px;background-repeat:no-repeat;overflow:hidden;text-indent:-99999px;background-position:-47px -132px;display:block;}
#dialog-minimize{height:18px;margin:-10px 0 0;padding:1px;position:absolute;right:2.8em;top:50%;width:19px;}
#dialog-maximize{height:18px;margin:-10px 0 0;padding:1px;position:absolute;right:1.5em;top:50%;width:19px;}
#dialog-restore{height:18px;margin:-10px 0 0;padding:1px;position:absolute;right:1.5em;top:50%;width:19px;}
分享到QQ
分享到微博
微信扫一扫
