[转]JQuery ui 实现类似于confirm的功能

转载

mob604756e97f09 2014-04-18 11:03:00

今天在改进参加一个全国比赛的项目作品时，发现使用了大量的alert和comfirm，于是自己想实现了弹出一个图形化的对话框，这样会变的非常友好，因为时间不多，直接黏贴代码，分享一下

`//当页面加载完毕时添加一个隐藏的div` `$(``function``(){` `var` `boardDiv =` `"<div id='message' style='display:none;'><span id='spanmessage'></span></div>"``;` `$(document.body).append(boardDiv);` `});` `//只是提示信息alert` `function` `message(text) {` `$(``"#spanmessage"``).text(text);` `$(``"#message"``).dialog({` `title:``"企业信息管理系统，提示您"``,` `modal:` `true``,` `buttons: {` `"确定"``:` `function``() {` `$(``this``).dialog(``"close"``);` `}` `}` `});` `}` `//类似于confirm的功能` `//说明callback是如果要选择是，要执行的方法` `function` `queren(text, callback) {` `$(``"#spanmessage"``).text(text);` `$(``"#message"``).dialog({` `title:` `"企业信息管理系统，提示您"``,` `modal:` `true``,` `resizable:` `false``,` `buttons: {` `"否"``:` `function``() {` `$(``this``).dialog(``"close"``);` `},` `"是"``:` `function``() {` `callback.call();``//方法回调` `$(``this``).dialog(``"close"``);` `}` `}` `});` `}`

　　使用示例（一个静态删除功能的示例）

1、先引用JQuery库如（ <script src="http://www.cnblogs.com/js/jquery-1.4.2.js" type="text/javascript"></script>）

2、在引用JQuery ui库

type="text/css" />

3、写处理代码

`$(``"a[delete=true]"``).click(function() {` `var` `id = $(``this``).attr(``"curId"``);` `queren(``"确认要删除吗？"``, function() {` `$.post(``"productDel.ashx"``, {` `"action"``:` `"delete"``,` `"id"``: id }, function(data, status) {` `if` `(data ==` `"ok"``) {` `message(``"删除成功！"``);` `$(``"a[curId='"` `+ id +` `"']"``).parent().parent().parent().parent().remove();` `}` `});` `});` `});`

看看效果怎么样（还没有做美工）

[转]JQuery ui 实现类似于confirm的功能_图形化

[转]JQuery ui 实现类似于confirm的功能_jquery_02

`//当页面加载完毕时添加一个隐藏的div` `$(``function``(){` `var` `boardDiv =` `"<div id='message' style='display:none;'><span id='spanmessage'></span></div>"``;` `$(document.body).append(boardDiv);` `});` `//只是提示信息alert` `function` `message(text) {` `$(``"#spanmessage"``).text(text);` `$(``"#message"``).dialog({` `title:``"企业信息管理系统，提示您"``,` `modal:` `true``,` `buttons: {` `"确定"``:` `function``() {` `$(``this``).dialog(``"close"``);` `}` `}` `});` `}` `//类似于confirm的功能` `//说明callback是如果要选择是，要执行的方法` `function` `queren(text, callback) {` `$(``"#spanmessage"``).text(text);` `$(``"#message"``).dialog({` `title:` `"企业信息管理系统，提示您"``,` `modal:` `true``,` `resizable:` `false``,` `buttons: {` `"否"``:` `function``() {` `$(``this``).dialog(``"close"``);` `},` `"是"``:` `function``() {` `callback.call();``//方法回调` `$(``this``).dialog(``"close"``);` `}` `}` `});` `}`

　　使用示例（一个静态删除功能的示例）

1、先引用JQuery库如（ <script src="http://www.cnblogs.com/js/jquery-1.4.2.js" type="text/javascript"></script>）

2、在引用JQuery ui库

type="text/css" />

3、写处理代码

`$(``"a[delete=true]"``).click(function() {` `var` `id = $(``this``).attr(``"curId"``);` `queren(``"确认要删除吗？"``, function() {` `$.post(``"productDel.ashx"``, {` `"action"``:` `"delete"``,` `"id"``: id }, function(data, status) {` `if` `(data ==` `"ok"``) {` `message(``"删除成功！"``);` `$(``"a[curId='"` `+ id +` `"']"``).parent().parent().parent().parent().remove();` `}` `});` `});` `});`