<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呼叫流行的更多相关文章

  1. Julius JS – 最流行的网页语音识别库

    JuliusJS 是用于在网页中的语音识别库.这是 Julius(由日本京都大学和日本IPA联合开发的一个实用高效双通道的大词汇连续语音识别引擎)的 JavaScript 实现.它实时侦听用户的语音并 ...

  2. [Xamarin] 透過Native Code呼叫 JavaScript function （转帖）

    今天我們來聊聊關於如何使用WebView 中的Javascript 來呼叫 Native Code 的部分 首先,你得先來看看這篇[Xamarin] 使用Webview 來做APP因為這篇文章至少講解 ...

  3. js构建ui的统一异常处理方案（一）

    从早期从事基于java的服务器端开发,再到之后从事基于web和js的ui开发,总体感觉基于web页面的ui开发远不如服务器端健壮.主要是早期ie浏览器功能太弱小,很多业务被迫放到服务器端去实现,浏览器 ...

  4. node.js之windows下环境终极配置

    大家都知道现在node.js相当流行,出门在外,如果都没听说过node.js,基本上算是out了,前段时间做一个项目,用到了实时通讯功能,当时用的就是node.js来做的,我有幸有研究了一番,别的不敢 ...

  5. 【JavsScript】推荐五款流行的JavaScript模板引擎

    摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

  6. Node.js日志框架选型比較：Winston

    日志对于问题定位.调试,系统性能调优至关重要,尤其是系统复杂以及在线执行的情况下. 好的开发框架都会有一个可开启关闭/可配置记录级别的日志系统.我们从下面几个方面来做选型: 1. 每行日志都须要有准确 ...

  7. 一统江湖的大前端（6）commander.js + inquirer.js——懒，才是第一生产力

    <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...

  8. Node.js 开发

    Node.js不必介绍,已经太火爆了.简单说是用Javascript开发Web服务端,基于Google V8引擎,单线程.不多说从零开始Windows平台下的Node.js的开发之旅. 环境工具为先 ...

  9. node.js之十大Web框架

    之前接触过Node.js是因为好奇大前端越来越能干了,连我后台的饭碗都要抢了,太嚣张了,于是我想打压打压它,然后就这样接触它了.再到后来是因为Settings-Sync插件二次开发,我需要用node. ...

随机推荐

  1. Java NIO详细介绍

    不错的文章,推荐一下. http://www.ibm.com/developerworks/cn/education/java/j-nio/j-nio.html JavaNIO非堵塞技术实际是采取Re ...

  2. vs 外部依赖项、附加依赖项以及如何添加依赖项目

    我们在 VS 中创建 Win32 控制台应用程序,vs 会为解决方案创建默认地创建 4 个 filters(资源管理器中没有对应的目录和文件夹): 头文件:一般为 .h 文件 外部依赖项 源文件:一般 ...

  3. iis MP4 不能访问404

    为什么我上传了flv或MP4文件到服务器,可输入正确地址通过http协议来访问总是出现“无法找到该页”的404错误呢?这就表明mp4格式文件是服务器无法识别的,其实,这是没有在iis中将相应的MIME ...

  4. tomcat 启动项目时出现 ZipException: error in opening zip file

    错误情况 项目用 maven 打好 war 包后放到 tomcat 下,启动 tomcat,出现以下错误 3-Nov-2017 12:21:44.346 严重 [localhost-startStop ...

  5. [NPM] Create a node script to replace a complex npm script

    In this lesson we will look at pulling out complex npm script logic into an external JavaScript file ...

  6. 移动端iPhone系列适配问题的一些坑

    完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过 ...

  7. 链表与哈希表基本概念及Java常用集合

    -链表- 是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的.链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时动态生成.每个结点包括两个 ...

  8. web IDE Eclipse Che安装

    安装:使用安装器安装 使用安装器安装Che 环境 依赖 下载地址 通用 任何操作系统,java8,Git,Maven 3.0.5+,Docker 1.7+ 3.12.52 - 117MB window ...

  9. 从文件 I/O 看 Linux 的虚拟文件系统

    1 引言 Linux 中允许众多不同的文件系统共存,如 ext2, ext3, vfat 等.通过使用同一套文件 I/O 系统 调用即可对 Linux 中的任意文件进行操作而无需考虑其所在的具体文件系 ...

  10. 一款有意思的 Qt 飞行仪表控件

    最近在网上偶然发现一款Qt飞行仪表板控件,真的很酷哦! 是一款开源软件, 直接编译运行:  美工还是不错的! 控件操作非常简单: void MainWindow::timerEvent( QTimer ...