LxtalkUIView/talkview/src/templates/groupsInfo.html

<div class="groupinfo">
    <div id="tablist">
        <!-- Nav tabs -->
        <ul class="nav nav-pills defaults" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">群组资料</a></li>
            <li role="presentation"><a href="#members" aria-controls="members" role="tab" data-toggle="tab">成员列表</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">群组设置</a></li>
        </ul>
    </div>
    <div style="border-top:solid 1px #ddd;width:460px;margin:0px auto;"></div>
    <div id="media" class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <form id="form1">
                <div id="icoImg">
                    <a><img src="../img/群头像.jpg"></a>
                </div>
                <div id="groupId">
                    <p class="displayname">浙江万赛软件运维群</p>
                    群ID :<input type="text" readonly="readonly" value="84d2da460b5d5b17264199759d1edc04">
                </div>
                <div id="groupClass">
                    <span>群权限</span>
                    <select class="form-control input-sm" disabled ng-model="searchClass">
                            <option>允许任何人加入该群</option>
                            <option>身份验证后加入该群</option>
                            <option>拒绝任何人加入该群</option>
                    </select>
                </div>
                <div id="groupIntroduction">
                    <span>群简介</span>
                    <span class="text-message">在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</span>
                </div>
                <div id="groupNotice">
                    <span>群公告</span>
                    <span class="text-message">在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</span>
                </div>
            </form>
        </div>
        <div class="tab-pane fade" id="members">
            <form id="form2">
                <div class="input-search">
                    <span class="glyphicon glyphicon-search"></span>
                    <input type="text" class="form-control input-sm" placeholder="查找联系人. . ." ng-change="searchUser()" ng-model="searchName">
                </div>
                <div id="tableForm">
                    <!-- Table -->
                    <table id="header">
                        <thead>
                            <tr>
                                <th style="width:40px;"></th>
                                <th style="width:150px">成员</th>
                                <th style="width:220px">显示名</th>
                                <th style="width:90px">操作</th>
                            </tr>
                        </thead>
                    </table>
                    <div style="border-top:solid 1px #ddd;width:500px;margin:5px auto;"></div>
                    <div id="content">
                        <table>
                            <thead>
                                <tr>
                                    <th style="width:40px;"></th>
                                    <th style="width:150px"></th>
                                    <th style="width:220px"></th>
                                    <th style="width:90px"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-mouseup="activeTable($event)" ng-repeat="user in groupUsers track by $index">
                                    <td style="text-align:center;"><img ng-src="{{getMangerIco(user)}}" alt=""></td>
                                    <td><input type="text" readonly="readonly" ng-value="user.loginName"></td>
                                    <td><input type="text" readonly="readonly" ng-value="user.displayName"></td>
                                    <td>
                                        <a class="glyphicon glyphicon-remove" data-toggle="modal" data-target="#delModal"></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>
        </div>
        <div class="tab-pane fade" id="settings">
            <form id="form3">
                <div><span>群ID</span><input class="form-control input-sm" type="text" readonly="readonly" value="84d2da460b5d5b17264199759d1edc04"></div>
                <div><span>群权限</span>
                    <select class="form-control input-sm" ng-change="onSelectedChange()" ng-model="searchClass">
                            <option>允许任何人加入该群</option>
                            <option>身份验证后加入该群</option>
                            <option>拒绝任何人加入该群</option>
                    </select>
                </div>
                <div><span>群简介</span>
                    <div class="text-message" contenteditable="plaintext-only"></div>
                </div>
                <div><span>群公告</span>
                    <div class="text-message" contenteditable="plaintext-only"></div>
                </div>
                <div class="button-bottom">
                    <button type="button" data-toggle="modal" data-target="#okModal" class="btn btn-primary btn-blue">保 存</button>
                    <button type="button" class="btn btn-primary btn-blue">关 闭</button>
                </div>
            </form>
        </div>
        <!--menu-->
        <div class="list-group" id="rMenu">
            <a href="#" class="list-group-item" ng-click="userView()">查看资料</a>
            <a href="#" class="list-group-item">发送消息</a>
            <a href="#" class="list-group-item">设为管理员</a>
            <a href="#" class="list-group-item">取消管理员</a>
            <a href="#" class="list-group-item">删除该成员</a>
        </div>
        <!--OK-->
        <div class="modal fade" id="okModal" tabindex="-2" role="dialog" data-backdrop="static" aria-labelledby="okModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <p id="titleB">保存成功</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn-blue sure" data-dismiss="modal">确 定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="delModal" tabindex="-2" role="dialog" data-backdrop="static" aria-labelledby="delModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <p id="titleB">确定删除该群成员</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn-blue del" data-dismiss="modal">确 定</button>
                        <button type="button" class="btn btn-primary btn-blue del" data-dismiss="modal">取 消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>