实现js调用弹窗

来源：互联网发布：java 中介者模式编辑：程序博客网时间：2024/06/11 10:24

<span style="font-size:14px;">//Html代码：点击控件实现调用“收件人弹窗”<!DOCTYPE html><html lang="zh-CN">    <head>        <script src="<? echo base_url('static/js/<strong>user.js</strong>') ?>"></script>    </head>    <body>        <div class="iframe-container">           <table cellpadding="5">                <tr><td width="150">收件人：</td>                    <td><div style="width:800px;" class="user-group" data="" data-form="form[uids][]" data-multi="true" ></div></td>                                      </tr>            </table>        </div>    </body></html></span>

【对应的user.js】

$(function(){    /* 弹出层选用户 */    $('.user-group').on('click','.user-add',function (){        div = $(this).parent('div.user-group');        box = $(this).next('div.user-gather');        single = (typeof(div.attr('data-multi'))=='undefined');        window.top.art.dialog.open('base/user/index/dialog?single='+ (single),{//此处调用对应的dialog页面样式            title:'选择' + (single?'一':'多') +'位同事',            width:480,            height:440,              lock:true,                      ok: function () {                users = this.iframe.contentWindow.$(".active");                users.each(function(i,dom){                    id = $(dom).attr('data-uid');                    if (div.find('div[data-uid='+id+']').length){                        window.top.art.dialog.tips('请不要重复添加');                        return;                    }                     input = '<input type="hidden" name="'+ div.attr('data-form') +'" value="'+id+'">';                    $(dom).append(input);                    if (single){                        box.html(dom.outerHTML);                    }else{                        box.append(dom.outerHTML);                    }                    window.top.art.dialog.tips('已添加');                });                                if (!single) return false;            },            cancel: true        });    });    /* 用户删除 */    $('.user-group').on('click','.user-event',function (){        if (confirm('您确定删除这个用户吗')){            $(this).remove();        }    });    /* 用户还原 */    $('.user-group').each(function (i){            var _this = this;        var _data =$(_this).attr('data');        var _edit = $(_this).attr('data-form');        if(_edit) $(_this).append('<div class="user-add user-item"><p><i class="glyphicon glyphicon-user"></i></p>点击选择</div>');        $(_this).append('<div class="user-gather"></div>');        if (_data && _data!=0){            $.each(_data.split(','), function(i,id){                if (!id) return;                $.getJSON(window.top.site_url + 'base/user/query?id='+id,function (json){                    if (!json) return;                    var _html = '<div class="user-item '+(_edit?'user-event':'')+'" data-uid="'+id+'" data-name="'+json.realname+'">';                    if(_edit) _html +='<input type="hidden" name="'+ $(_this).attr('data-form') +'" value="'+id+'">';                    _html += '<p><img src="'+(json.photo||window.top.base_url+'statics/image/unfound.jpg' )+'"></p>'+json.realname;                    _html +='</div>';                    $(_this).find('.user-gather').append(_html);                });            });        }          });});

【对应的dialog页面】

<!DOCTYPE html><html lang="zh-CN">    <head>        <style>            body{width:480px;overflow:hidden;}        </style>        <script>            $(function(){                $('.user-item').on('click',function (){                <? if ($this->input->get('single') == 'true'): ?>                $(this).siblings().removeClass('active');                <? endif; ?>            $(this).toggleClass('active');        }) ;    });        </script>    </head>    <body>        <div class="iframe-container">            <form action="?" method="get" class="filter">                <? echo form_hidden('single',$this->input->get('single'))?>                按姓名：<? echo form_input('name', $this->input->get('name')) ?> 按角色：<? echo form_dropdown('role_id', $roles, $this->input->get('role_id')); ?>                <input type="submit" value=" <? echo lang('search') ?> " />            </form>            <div class="user-group">                <? foreach ($users as $user): ?>                    <div class="user-item user-event" data-uid="<? echo $user->id ?>" data-name="<? echo $user->name ?>"><i class="glyphicon glyphicon-check hide"></i><p><img src="<? echo $user->photo ? $user->photo : config_item('unfound_photo') ?>"></p><? echo $user->name ?></div>                <? endforeach; ?>            </div>                <a class="pointer" onclick="$('.user-item').addClass('active')">全选</a> <a class="pointer" onclick="$('.user-item').removeClass('active')">反选</a>                <div class="page pull-right"><? echo $page; ?></div>        </div>    </body></html>

【效果预览】

0 0