为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能

2016-02-19 14:42 80 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

代码如下:
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
position: [PosX, PosY], //alert 出来为:" , "(不含双引号),或者报错,不知什么原因。
height: 300,
modal: true,
buttons: {
'创建新账号': function() {
var bValid = true;
allFields.removeClass('ui-state-error');

bValid = bValid && checkLength(name, "username", 3, 16);
bValid = bValid && checkLength(email, "email", 6, 80);
bValid = bValid && checkLength(password, "password", 5, 16);

bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp(email, /^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i, "eg. ui@jquery.com");
bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");

if (bValid) {
$('#users tbody').append('tr' +
'td' + name.val() + '/td' +
'td' + email.val() + '/td' +
'td' + password.val() + '/td' +
'/tr');
$(this).dialog('close');
};
},
取消: function() {
$(this).dialog('close');
}
},

close: function() {
allFields.val('').removeClass('ui-state-error');
}
});

后来参考"wind"的为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能。,在他的建议下,完全照葫芦画瓢写了个jquery.ui.dialog的重载方法,实现在鼠标当前位置打开dialog

代码如下
代码如下:
///////////////////////////////////
//指定 jquery.ui.dialog打开时的位置
///////////////////////////////////
(function($) {
var originOpen = $.ui.dialog.prototype.open
$.ui.dialog.prototype.open = function() {
//var event= window.event || arguments.callee.caller.arguments[0];
//var event = event || window.event;
var event = getEvent();
//alert(event) // ie 和 ff下,都显示 "[object]"
var PosX = 0;
var PosY = 0;
if (event.pageX || event.pageY) {
PosX = event.pageX;
PosY = event.pageY;
}
else {
PosX = event.clientX + document.body.scrollLeft - document.body.clientLeft;
PosY = event.clientY + document.body.scrollTop - document.body.clientTop;
};
this.options.position = [PosX, PosY];
//alert(this.options.position);
originOpen.apply(this, arguments);
};

function getEvent() { //同时兼容ie和ff的写法
if (document.all) return window.event;
func = getEvent.caller;
while (func != null) {
var arg0 = func.arguments[0];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent)
|| (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
return arg0;
}
}
func = func.caller;
}
return null;
}
})(jQuery);

再次感谢"wind"。感谢 jww测试。(已兼容ie7,8,firefox3.5,chrome4)

来源:http://www.tulaoshi.com/n/20160219/1607641.html

延伸阅读
jquery-ui怎样制作折叠菜单 1、引入 jquery 和 jquery-ui 文件 注 jquery-ui 要放在jquery引入之后。因为要引入自己的外部样式文件和脚本文件,以下是我的head部分代码。 2、写面板布局 使用一个div来包裹我们的面板,这里给他一个id ="panel",h2是我们点击时面板伸缩和折叠,h2下方的div是当点击h2时面...
标签: Web开发
网上这种插件很多,但是没一个合适的,大部分都做得很大,功能齐全。于是自己做了这个小插件,顺便学习下jQuery插件的写法。 原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置。再通过适当的加工美化就成了。   代码如下: !-- 背景遮盖层 -- div...
标签: Web开发
原文地址 文章日期:2006/9/10 对YUI-EXT GIRD功能需求最强烈的是内置可编辑的支持。市场上大多数收费的JAVASCRIPT GIRD,我看过的那些可编辑支持,并没有给我留下太深的印象。它给你一个基本的TEXT FIELD,一些CHECKBOXS或者是Select fields,这导致了你一边单击某个字段在编辑,另一边厢插入一个FORM到这个单元格之中,不知不觉地,会出现越...
标签: Web开发
1. 每个ui插件现在都有自己单独的css文件,但是要根据情况与ui.theme.css ui.core.css结合使用,否则有些效果还是显示不出来的。 eg. datepicker就必须同时引用上述两个css文件;accordion 只须引入ui.theme.css即可。这个我会把每个插件独立的demo放在我的资源里边的。 2. ui.accordion HTML 代码要遵循一定的格式要求: 代码如下: ul i...
标签: Web开发
代码如下: script type="text/javascript" $(function() { var options = { changeMonth: true, //显示月份下拉框 changeYear: true, //显示年份下拉框 firstDay: 0, //第一天的索引(星期天放前面)(星期天到星期六对应的索引为:0~6) showOtherMonths: true, //显示其他月份的日期 showMonthAfterYear: false, //年份下拉框放在月...

经验教程

904

收藏

92
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部