实现js呼叫流行
<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>
【效果预览】
版权声明:本文博客原创文章,博客,未经同意,不得转载。
实现js呼叫流行的更多相关文章
- Julius JS – 最流行的网页语音识别库
JuliusJS 是用于在网页中的语音识别库.这是 Julius(由日本京都大学和日本IPA联合开发的一个实用高效双通道的大词汇连续语音识别引擎)的 JavaScript 实现.它实时侦听用户的语音并 ...
- [Xamarin] 透過Native Code呼叫 JavaScript function (转帖)
今天我們來聊聊關於如何使用WebView 中的Javascript 來呼叫 Native Code 的部分 首先,你得先來看看這篇[Xamarin] 使用Webview 來做APP因為這篇文章至少講解 ...
- js构建ui的统一异常处理方案(一)
从早期从事基于java的服务器端开发,再到之后从事基于web和js的ui开发,总体感觉基于web页面的ui开发远不如服务器端健壮.主要是早期ie浏览器功能太弱小,很多业务被迫放到服务器端去实现,浏览器 ...
- node.js之windows下环境终极配置
大家都知道现在node.js相当流行,出门在外,如果都没听说过node.js,基本上算是out了,前段时间做一个项目,用到了实时通讯功能,当时用的就是node.js来做的,我有幸有研究了一番,别的不敢 ...
- 【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...
- Node.js日志框架选型比較:Winston
日志对于问题定位.调试,系统性能调优至关重要,尤其是系统复杂以及在线执行的情况下. 好的开发框架都会有一个可开启关闭/可配置记录级别的日志系统.我们从下面几个方面来做选型: 1. 每行日志都须要有准确 ...
- 一统江湖的大前端(6)commander.js + inquirer.js——懒,才是第一生产力
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- Node.js 开发
Node.js不必介绍,已经太火爆了.简单说是用Javascript开发Web服务端,基于Google V8引擎,单线程.不多说从零开始Windows平台下的Node.js的开发之旅. 环境工具为先 ...
- node.js之十大Web框架
之前接触过Node.js是因为好奇大前端越来越能干了,连我后台的饭碗都要抢了,太嚣张了,于是我想打压打压它,然后就这样接触它了.再到后来是因为Settings-Sync插件二次开发,我需要用node. ...
随机推荐
- ds finder 唤醒
http://www.hangge.com/blog/cache/detail_594.html
- Vue.js开发环境搭建的介绍
包含了最基础的Vue.js的框架,包含了打包工具和测试工具,开发调试的最基本的服务器,不需要关注细节,只需关注Vuejs对项目的实现 npm在国内的网络使用较慢,所以推荐下载安装淘宝的镜像 1: 2: ...
- swift学习第一天:认识swift以及swift的常量和变量
一:认识swift // 1.导入框架 //#import <UIKit/UIKit.h> import UIKit // 2.定义一个标识符 // int a = 10; // swif ...
- Seagate-保修验证(za25shrx)
保修验证 http://support.seagate.com/customer/zh-CN/warranty_validation.jsp Seagate 保修验证 End User ...
- Android开发和測试实践 - 接入友盟统计
这两年一直在做无线的測试,兴许还会继续去做无线的測试,可是之前由于时间的原因一直都没有非常细致的了解到代码层面. 最近抽出时间自己做了些app的开发,决定假设想把移动的測试做好做深入.有一定的app开 ...
- 公布一个基于CSDN Code的学习測试仓库
使用CSDN Code代码托管平台有一段时间了,今天新建立了一个公开的仓库https://code.csdn.net/smstong/learngit/tree/master,供大家測试合并请求等协作 ...
- 如何快糙好猛的使用libfacedetection库【最新版】
前言 最近已经很少看CSDN了.这一年多准备考研,基本上怕是不会再怎么上了.以前有一个http://blog.csdn.net/mr_curry/article/details/51804072 如何 ...
- 【z03】Mayan游戏
[问题描述] Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个 7 行5 列的棋盘,上面堆放 着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游 戏通关是 ...
- 使用jsp,tomcat实现用户登录注册留言的代码
以下jsp中,未使用样式表对网页进行排版和表单的验证(每个jsp的表单填写的时候应该进行空值与空格的验证,防止提交时出错) 所有错误,链接到error.jsp <%@ page language ...
- Tomcat系列之服务器的安装与配置以及各组件详解
Tomcat系列之服务器的安装与配置以及各组件详解 大纲 一.前言 二.安装与配置Tomcat 三.Tomcat 目录的结构 四.Tomcat 配置文件 注,本文的测试的操作系统为CentOS 6.4 ...