<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. 用live555将内网摄像机视频推送到外网server，附源代码

    近期非常多人问,怎样将内网的摄像机流媒体数据公布到公网,假设用公网与局域网间的port映射方式太过麻烦,一个摄像机要做一组映射,并且不是每个局域网都是有固定ip地址,即使外网主机配置好了每个摄像机的映 ...

  2. 【C++竞赛 F】yyy的三角形

    时间限制:2s 内存限制:32MB 问题描述 yyy对三角形非常感兴趣,他有n个木棍,他正在用这些木棍组成三角形.这时xxx拿了两根木棍过来,xxx希望yyy能给他一根木棍,使得xxx可以组成一个三角 ...

  3. Android 添加常驻图标到状态栏

    / * * 如果没有从状态栏中删除ICON,且继续调用addIconToStatusbar,则不会有任何变化.如果将notification中的resId设置不同的图标,则会显示不同的图标 * / p ...

  4. 【54.38%】【BZOJ 4300】绝世好题

    Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 1120  Solved: 609 [Submit][Status][Discuss] Descript ...

  5. Chrome源代码结构

    首先,开始接触Chrome的童鞋可能有一个疑惑,Chrome和Chromium是同一个东西吗?答案是,Chrome是Google官方的浏览器项目名称,Chromium是Google官方对Chrome开 ...

  6. svn: E200033: database is locked解决办法

    svn执行update,却被告知database is locked! 执行 svn update,却抛出个错误警报: svn: E200033: database is locked, execut ...

  7. 【t060】可怜的波特

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 哈里波特在姨夫家遭受非人待遇,他被迫做很多事.有一次,姨夫有给了他一大堆家务.哈里知道每件做完家务的时 ...

  8. MySQL主从复制架构使用方法

    原文:MySQL主从复制架构使用方法 一. 单个数据库服务器的缺点 数据库服务器存在单点问题 数据库服务器资源无法满足增长的读写请求 高峰时数据库连接数经常超过上限 二. 如何解决单点问题 增加额外的 ...

  9. Notepad++中删除连续的任意n行

    使用Notepad++里的行标记功能,可以删除指定的任意n行. 案例1,删除sample2.dat里的第201行到第10000行.方法如下: (1) 用户NotePad++打开sample2.dat, ...

  10. 前端构建工具里babel-polyfill的使用问题

    看了很多react工程的package.json文件,里面都没有使用babel-polyfill,那对ES6的新API是如何做到被IE9这样的浏览器识别的呢,难道在webpack打包的时候通过别的方式 ...