实现js调用弹窗
浏览数：30 /
时间：2015年06月09日
<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>【效果预览】
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
