<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. Havel-Hakimi定理 hdu2454 / poj1695 Havel-Hakimi定理

    Havel-Hakimi定理 当年一度热门出如今ACM赛场上的算法. 算法定义: Havel-Hakimi定理主要用来判定一个给定的序列是否是可图的. 2.首先介绍一下度序列:若把图 G 全部顶点的度 ...

  2. html5+js压缩图片上传

    最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  3. RSA公钥验签

    1.业务场景,公司做理财业务,但是可能有第三方合作.与第三方合作获得更多客户流量.别人可以在第三方进行购买理财产品.那么怎么保证交易信息的安全性那,我们这里给出rsa加密实现原理. 2.工具类rsa: ...

  4. Linux中LVM2原理及制作LVM2

    Linux中LVM2原理及制作LVM2 一.LVM原理 [MD]:Multi Device 多设备 Mdadm是一个用户空间工具,是RAID的管理工具,与真正的RAID工作没有太大关系.真正的RAID ...

  5. CVE­-2014-3566

    https://access.redhat.com/articles/1232123 https://tools.ietf.org/html/draft-ietf-tls-downgrade-scsv ...

  6. oracle 内存结构具体解释

    Oracle 内存结构 与 Oracle 实例关联的基本内存结构包含: 系统全局区 (SGA):由全部server和后台进程共享.SGA 中存储的数据演示样例包含快速缓存的数据块和共享 SQL 区域. ...

  7. [React] Use Jest's Snapshot Testing Feature

    Often when testing, you use the actual result to create your assertion and have to manually update i ...

  8. [Ramda] Change Object Properties with Ramda Lenses

    In this lesson we'll learn the basics of using lenses in Ramda and see how they enable you to focus ...

  9. 80. Domino Internet Password

    Internet口令保存在Domino文件夹的个人文档的HTTPPassword域中,和文档中的username一起用于藉各种Internet协议訪问Dominoserver时的校验,最经常使用的就是 ...

  10. springboot内置tomcat验证授权回调页面域名

    springboot内置tomcat验证公众号授权回调页面域名 解决方法: 网上下载一个tomcat,在server.xml文件中修改端口为springboot内置tomcat的端口号,复制验证文件到 ...