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

cooldream666

浏览: 64132 次
性别:
来自: 杭州

最近访客更多访客>>

airyoureyes

dagger9527

djjackylei

sosomir

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

jQuery &css

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

主要用到的插件是：

弹窗的父页面：

<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>

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

弹出编辑框是实例.rar (361.6 KB)
下载次数: 87

分享到：

淘宝网技术架构的发展过程 | 一个常用的页面分页插件实例

2012-10-16 21:05
浏览 4603
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

JSESSION失效问题

一个常用的页面分页插件实例

ajax请求遇到的一些乱码问题及其解决

值得网站开发人员收藏的 10 个网站

12 款简化 CSS3 开发的实用工具

网页输入框的提示实现 placeholder

50个必备的实用jQuery代码段

关于http请求头和响应头的一些疑问

textarea中的输入的规则名称和规则id等生成超链接的js脚本

js 正则表达式用法

js中循环获取checkbox值的方式

js中字符串处理的常用方法replaceAll, split , join, indexOf , Array

JS跳转页面方式

jquery的常用api函数总结

jquery/css学习心得三：js的内嵌写法和分开写法

jquery学习心得（二）：一个很好的css和js函数调用的例子

jquery和css的一些学习心得（一）

最近访客更多访客>>