<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. ds finder 唤醒

    http://www.hangge.com/blog/cache/detail_594.html

  2. Vue.js开发环境搭建的介绍

    包含了最基础的Vue.js的框架,包含了打包工具和测试工具,开发调试的最基本的服务器,不需要关注细节,只需关注Vuejs对项目的实现 npm在国内的网络使用较慢,所以推荐下载安装淘宝的镜像 1: 2: ...

  3. swift学习第一天：认识swift以及swift的常量和变量

    一:认识swift // 1.导入框架 //#import <UIKit/UIKit.h> import UIKit // 2.定义一个标识符 // int a = 10; // swif ...

  4. Seagate-保修验证(za25shrx)

    保修验证 http://support.seagate.com/customer/zh-CN/warranty_validation.jsp   Seagate   保修验证    End User  ...

  5. Android开发和測试实践 - 接入友盟统计

    这两年一直在做无线的測试,兴许还会继续去做无线的測试,可是之前由于时间的原因一直都没有非常细致的了解到代码层面. 最近抽出时间自己做了些app的开发,决定假设想把移动的測试做好做深入.有一定的app开 ...

  6. 公布一个基于CSDN Code的学习測试仓库

    使用CSDN Code代码托管平台有一段时间了,今天新建立了一个公开的仓库https://code.csdn.net/smstong/learngit/tree/master,供大家測试合并请求等协作 ...

  7. 如何快糙好猛的使用libfacedetection库【最新版】

    前言 最近已经很少看CSDN了.这一年多准备考研,基本上怕是不会再怎么上了.以前有一个http://blog.csdn.net/mr_curry/article/details/51804072 如何 ...

  8. 【z03】Mayan游戏

    [问题描述] Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个 7 行5 列的棋盘,上面堆放 着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游 戏通关是 ...

  9. 使用jsp，tomcat实现用户登录注册留言的代码

    以下jsp中,未使用样式表对网页进行排版和表单的验证(每个jsp的表单填写的时候应该进行空值与空格的验证,防止提交时出错) 所有错误,链接到error.jsp <%@ page language ...

  10. Tomcat系列之服务器的安装与配置以及各组件详解

    Tomcat系列之服务器的安装与配置以及各组件详解 大纲 一.前言 二.安装与配置Tomcat 三.Tomcat 目录的结构 四.Tomcat 配置文件 注,本文的测试的操作系统为CentOS 6.4 ...