`

jquery中在一个页面中弹出编辑对话框的实例

 
阅读更多

在web开发中，一个页面的某些字段可能需要通过弹出浮出对话框的形式完成，这就要用到弹出框和其依赖的父类窗口的控制句柄，只有利用这个句柄才能操作对应页面的字段值的修改，当然具体的业务场景需要中的页面来源的数据需要从数据库中获取，并且带有更有的处理判断逻辑，这里只是给一个简单的弹出对话框，并且用jquery对页面元素对值进行回写。

 

主要用到的插件是：

 <script type="text/javascript" src="lhgdialog.min.js?self=true&skin=default"></script>

 

弹窗的父页面 ：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="lhgdialog.min.js
?self=true&skin=default"></script>
 <link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>
                      <div class="consolestick">
                <div class="stickname"><strong>名称</strong><span style="color:red; font-weight:600;">*</span>
				</div>
                <div class="stickdetail">
                <div class="nomalinput33">
                <input class="noborderinput33" id="riskNameId" type="text" maxlength="10" value="爆炸物相关书籍" readonly />
				</div>
                </div>
                </div>
				
                <div class="consolestick">
				<div class="stickname"><strong>父节点<span style="color:red; font-weight:600;">*</span>[<a href="#" onclick="editPath()">编辑</a>]</strong>
				 </div>
                 <div class="stickdetail">
                 <div class="nomalinput22">
			        <input class="noborderinput22"  id="parentPathId"  type="text" maxlength="900" value="禁售商品>易燃易爆类>其他涉爆商品" readonly/>
			   	 </div>
                 </div>
                 </div>
   
</body>



<script type="text/javascript">

 var riskId="123";

    function editPath(){         //从父类窗口中弹出编辑路径对话框

        var dialog = $ .dialog({

            title:'编辑风险路径',
            data
:riskId,
            content:'url:casepathmodify11.html',

            lock:true,
            width:700,
            height:200,
            resize:true
        });
    }

</script>
</html>

 弹窗页面的html：

 

casepathmodify11.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        var api = frameElement.api, W = api.opener;
  //父子窗口的句柄，可以通过他们操作对应页面的标签和属性值，类似jquery选择器

        var riskId = api.data
;        // 得到riskId,通过这种方式得到父类窗口中穿过来的post参数值

        window.onload = function () {
            $('#riskName').val(W.
$('#riskNameId').val());
            var pathArray = W.$('#parentPathId').val().split(">");
            for (var i = 0; i <pathArray.length; i++) {
			   var j=i+1;
			   var selectedText=pathArray[i];
              $("#"+j+"Catalog option
").each
(function(){
			     var optionText=$(this)
.text().trim();   // this指的是前面的option标签选择器

				 if(optionText==selectedText){
				   $(this).attr("selected",true);
   //遍历对选菜单属性值，一个多选菜单中的某一个option属性为selected

				 }
			  });
            }
        };

        api.button({
            id:'valueOk',
            name:'确定',
            callback:ok
      //执行确定操作后的回调函数

        });
        api.button({
            id:'valueCancel',
            name:'取消'
        });
        /* 函数ok即为上面添加按钮方法中callback回调函数调用的函数 */

        function ok()
        {
           
                W.$('#riskNameId').val($('#riskName').val());
                var newPath="";
                for(var i=1;i<=4;i++){
                    var elem = $("#"+i+"Catalog").find("option:selected").text().trim();
                    if(elem=="") {
					alert("不能选项中不能有空选！");
					return;
					}
                    newPath+=elem+">";
                }
                W.$('#parentPathId').val(newPath.substring(newPath,newPath.length-1));
            alert("修改成功!");
            return true;

        };
    </script>

    <style type="text/css">
        td {
            padding: 6px;
            height: 10px;
        }

        .selects {
            margin-left: 2px;
            width: 120px;
            height: 25px;
        }

        .titles {
            text-align: right;
            height: 25px;
            font-size: 14px;
        }

        input {
            height: 22px;
            font-size: 13px;
        }
    </style>

</head>
<body>
<table>
    <tr>
        <td class="titles">名称</td>
        <td>
            <input name="riskName" id="riskName" maxlength="16">
        </td>
    </tr>
    <tr>
        <td class="titles">类型</td>
        <td>
            <select class="selects" id="1Catalog" name="1Catalog" >
                <option value=""></option>
				<option value="cashi1">ceshi1</option>
				<option value="cashi1">ceshi2</option>
				<option value="cashi1">禁售商品</option>		
            </select>
            <select class="selects" id="2Catalog" name="2Catalog" >
                <option value=""></option>
				<option value="cashi1">ceshi1</option>
				<option value="cashi1">ceshi2</option>
				<option value="cashi1">易燃易爆类</option>		
            </select>
            <select class="selects" id="3Catalog" name="3Catalog" >
                <option value=""></option>
				<option value="cashi1">ceshi1</option>
				<option value="cashi1">ceshi2</option>
				<option value="cashi1">其他涉爆商品</option>		
            </select>
            <select class="selects" id="4Catalog" name="4Catalog" >
                <option value=""></option>
				<option value="cashi1">ceshi1</option>
				<option value="cashi1">ceshi2</option>
				<option value="cashi1">其他涉爆商品</option>		
            </select>
        </td>
    </tr>
</table>
<div id="tips"></div>
</body>


</html>
 

   相见具体效果，请参考附件。

分享到：
| 一个常用的页面分页插件实例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery实战视频教程_页面加载时弹出一个对话框

    在本篇jQuery实战视频教程中，我们聚焦于一个常见的网页交互功能：页面加载时自动弹出对话框。这个功能在很多网站中都有应用，比如欢迎提示、重要信息通知或者用户确认操作等。jQuery库因其简洁易用的API，使得实现...

    JQuery 模式对话框实例

    "JQuery 模式对话框实例"是指使用 jQuery 创建的一种特殊的对话框，它在页面上弹出时，会将背景变暗，使用户无法与背景中的其他元素交互，直至对话框关闭。这种模式对话框常用于警告、确认、输入信息等场景。 在 ...

    ASP开发实例 窗口及页面设置的一些样式 鼠标单击链接样式 为弹出的窗口加入关闭按钮 日期选择器 弹出全屏显示网页 关闭IE主窗口时，不弹出询问对话框 弹出网页对话框 安徽机电职业技术学院 陈伟

    7. **弹出网页对话框**：在ASP中，可以利用`window.open()`函数创建一个新的浏览器窗口作为对话框。通过设置窗口的大小、位置和属性，可以创建各种定制化的对话框效果。 以上所述是ASP开发中关于窗口、页面样式和...

    jQuery遮罩背景弹出层对话框插件.zip

    在本资源"jQuery遮罩背景弹出层对话框插件.zip"中，我们可以找到一个用于创建遮罩背景和弹出对话框的jQuery插件。这个插件可以帮助开发者快速实现页面中的模态窗口，比如警告提示、信息确认或用户输入等场景。 首先...

    jQuery_boxy弹出层对话框插件中文演示及讲解

    该插件能够创建模态或非模态的弹出对话框，功能包括提示、确认、拖动、改变大小以及Ajax数据加载。由于网上缺乏详细的中文教程，作者zhangxinxu花费一天时间将官方英文文档翻译成中文，并对插件进行了一些定制，包括...

    jQuery支持多次确认的点击弹出确认对话框代码

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本主题涉及的是如何使用jQuery实现一个支持多次确认的点击弹出确认对话框的功能，这对于用户交互和数据安全至关...

    jquery弹出层 弹出式对话框插件.rar

    与大家再次分享一款jquery弹出层 弹出式对话框插件，用此插件可实现WEB开发中的询问框、确认操作、警告信息、出错信息、信息显示框等，jquery Div CSS JavaScript共同开发实现的，兼容火狐和IE，在Chrome下效果更好...

    jQuery_boxy弹出层对话框插件中文演示及讲解.doc

    在IT领域，尤其是Web开发中，**jQuery_boxy**是一款备受推崇的弹出层对话框插件，它以其强大的功能和易用性在SNS社区型的大型网站中广泛应用。例如，在开心网、人人网、Facebook等社交平台中，我们可以看到类似的...

    Ajax登陆弹出提示对话框（附实例）

    在本案例中，我们可能需要用到ModalPopupExtender控件来创建弹出对话框效果。这个控件可以方便地实现对话框的打开和关闭，并且可以与Ajax请求无缝集成。 **四、实现步骤** 1. **创建登录表单**：在HTML或ASP.NET中...

    jquery dialog css3弹出对话框插件实例

    在网页开发中，jQuery Dialog是一种常用的交互元素，它允许开发者创建功能丰富的弹出对话框，以展示信息、警告、确认或进行用户输入。这个“jquery dialog css3弹出对话框插件实例”提供了使用jQuery UI库和CSS3技术...

    jquery弹出框带实例

    总之，jQuery弹出框是网页交互中的重要组成部分，通过理解基本的JavaScript对话框、自定义模态窗口的创建以及利用jQuery插件，我们可以创建出丰富多样的弹出框效果，提高用户体验。实践中的关键是根据项目需求灵活...

    jQuery弹出对话框 demo

    jQuery弹出对话框 demo,简单的实例，希望给大家web开发带来快乐~

    Jquery 多种弹出窗口实例

    在本教程中，我们将探讨“jQuery 多种弹出窗口实例”，学习如何创建交互式弹出窗口，并实现点击页面其他位置时窗口自动隐藏的功能。 首先，让我们了解弹出窗口的基本概念。弹出窗口是网页设计中常用的一种交互元素...

    弹出框 jquery 真实案例

    在网页设计中，弹出框（通常称为模态对话框或弹窗）是常见的一种用户交互元素，用于显示警告、确认信息、输入数据等。本篇文章将深入探讨如何使用jQuery实现弹出框的真实案例，并分享一些关键知识点。 首先，我们来...

    jQuery UI弹出层应用实例

    这个"jQuery UI弹出层应用实例"是一个完整的示例项目，它包含html代码、js代码和css文件，帮助开发者理解如何在网页中实现交互式的弹出层效果。 1. **jQuery UI 弹出层**: jQuery UI 提供了一个名为 Dialog 的组件...

    jquery.purebox弹出层插件支持窗口对话框弹出层代码

    在Web开发中，用户交互体验是至关重要的一个环节，其中弹出层（popup）作为一种常见的交互元素，被广泛应用于信息提示、对话框、图片预览等多种场景。jQuery Purebox插件正是这样一款专为创建弹出层而设计的工具，它...

    一套优秀的基于ASP.NET弹出对话框popUp控件源码及例子代码

    本套资源主要关注的是如何在ASP.NET中实现弹出对话框的控件及其应用实例。 首先，弹出对话框通常通过JavaScript或者jQuery库如jQuery UI来实现，但在ASP.NET中，我们可以使用自定义服务器控件或Ajax Control ...

    jQuery点击弹出确认窗口对话框.zip

    在这个“jQuery点击弹出确认窗口对话框”的示例中，我们将探讨如何利用jQuery来创建一个用户交互体验更为友好的确认对话框，而不是浏览器默认的alert或confirm函数。这个压缩包文件包含了一个实现此功能的实例。 ...

    jQuery实现的点击显示弹出对话框关闭按钮特效源码.zip

    总结来说，这个资源提供了使用jQuery创建动态弹出对话框的实例，涉及了选择器、事件处理、CSS样式控制以及动画效果，对于学习和实践jQuery的交互功能非常有帮助。开发者可以根据自己的需求进行修改和扩展，以满足...

Magicbox
Global site tag (gtag.js) - Google Analytics