<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. 将HTML格式的String转化为HTMLElement 分类： C1_HTML/JS/JQUERY 2014-08-05 12:01 1217人阅读 评论(0) 收藏

    代码如下: <meta charset="UTF-8"> <title>Insert title here</title> </head& ...

  2. 嵌入式linux串口通信自发自收测试程序

     /*串口自收自发程序主函数*/#include"uart_api.h"int main(){ int fd; char buff[BUFFER_SIZE]; char buff2 ...

  3. 【u211】编码

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 假设phi(W)得到是按照以下算法编码后的结果: 1. 如果W的长度为1那么phi(W)即为W: 2. ...

  4. Annotation研究的一些学习资料

    转自chanyinhelv原文Annotation研究的一些学习资料 下面是我最近对Annotation研究的一些学习资料,收集于此,供大家学习之用. 一.Annotation要素类介绍 在GeoDa ...

  5. Java高级个人笔记(RandomStringUtils工具类)

    //产生5位长度的随机字符串,中文环境下是乱码 RandomStringUtils.random(5); //使用指定的字符生成5位长度的随机字符串 RandomStringUtils.random( ...

  6. 【u213&&t037】修剪花卉

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] ZZ对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题. 一天他早晨骑车去上 ...

  7. 【t097】寄存器

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 蠕虫是一个古老的电脑游戏,它有许多版本.但所有版本都有一个共同的规则:操纵一 条蠕虫在屏幕上转圈,并试 ...

  8. js进阶 9-14 js如何实现下拉列表多选移除

    js进阶 9-14 js如何实现下拉列表多选移除 一.总结 一句话总结: 1.js如何实现下拉列表多选移除? 把这个下拉列表中的option移除,然后加到另外一个下拉列表(文字)中去.remove方法 ...

  9. TensorFlow 学习（十一）—— 正则（regularizer）

    正则作用的对象是目标函数,如图对均方误差使用 ℓ2 正则: loss = tf.reduce_mean(tf.square(y-y_) + tf.contrib.layers.l2_regulariz ...

  10. Network architecture for minimalistic connected objects

    In one embodiment, a network architecture comprises minimalistic connected objects (MCOs), distribut ...