山寨版webqq jquery qq （2）

最新推荐文章于 2020-05-16 15:54:52 发布
最新推荐文章于 2020-05-16 15:54:52 发布
阅读量103 收藏
点赞数
文章标签： ui javascript ViewUI
原文链接：http://www.cnblogs.com/itclw/archive/2011/12/21/2295790.html
版权

上次发表网山寨版webqq jquery qq 网之后都没进行更新了，今天更新下，也可以到网站 查看最新的更新。

好了新上个界面让大家看下。

看到界面大家应该清楚今天要说的是：右键菜单操作。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
    <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="themes/base/jquery.ui.all.css" type="text/css" />
    <link rel="Stylesheet" href="themes/default.css" type="text/css" />
    <script src="js/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="js/ui/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="js/ui/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="js/ui/jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="js/ui/jquery.ui.position.js" type="text/javascript"></script>
    <script src="js/ui/jquery.ui.resizable.js" type="text/javascript"></script>
    <script src="js/ui/jquery.ui.dialog.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.ztree-2.6.min.js"></script>
    <script type="text/javascript" src="asyncData/demoData.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                autoOpen: true,
                title: "<span style='color:red'>task</span>",
                position: ['right', 'top'],
                zIndex: 3999,
                width: 250,
                height: 500,
                open: function (event, ui) {
var $dialog = $(this);
var atext = $(".ui-dialog-titlebar-close").replaceWith('<p class="ui-xlgwr"><span class="ui-icon ui-icon-minusthick">minusthick</span> <span class="ui-icon ui-icon-extlink">extlink</span><span class="ui-icon ui-icon-closethick">close</span></p>');
                    $(".ui-xlgwr>span").click(function () {
var spantext = $(this).text();
if (spantext == "extlink") {
                            $dialog.dialog({
                                position: ['right', 'top'],
                                width: 300,
                                height: 500
                            }); $dialog.dialog({
                                position: ['right', 'top'],
                                width: 300,
                                height: 500
                            });

                        } else if (spantext == "minusthick") {
                            $dialog.dialog({
                                position: ['right', 'top'],
                                width: 250,
                                height: 0
                            });
                            $dialog.dialog({
                                position: ['right', 'top'],
                                width: 250,
                                height: 0
                            });
                        } else if (spantext == "close") {
                            $dialog.dialog("close");
                        } else {
                            alert("请选择正确的操作,谢谢.");
                        }
                    });
                }
            });

var i = 0;
            $("#Button1").click(function () {
var id = "mess" + i;
var right = i * 20 + ($(window).width() / 2) - 300;
var top = i * 20 + ($(window).height() / 2) - 250;

var _editRankDlg = $("<div id=" + id + "></div>").appendTo("#contents");

                _editRankDlg.load("message.html?id=" + i, function () {
                    setName(i);
                    sendButton(i);
                    _editRankDlg.dialog({
                        modal: false,
                        show: "slide",
                        hide: "slide",
                        width: "450",
                        resizable: false,
                        height: "500",
                        position: [right, top], //默认单位就是px
                        title: "message" + i,
                        close: function () {
                            _editRankDlg.remove();
                        }
                    });

                    i++;
                });
            });

        });



//---------------------------右键菜单----------------------------------------
        var zTree1;
var setting;


        setting = {
            editable: true,
            checkable: false,
            edit_removeBtn: false,
            callback: {
                dblclick: zTreeOnDblclick,
                drag: zTreeOnDrag,
                drop: zTreeOnDrop,
                rename: zTreeOnRename,
                rightClick: zTreeOnRightClick
            }

        };
var rMenu;


        $(document).ready(function () {

            refreshTree();
            rMenu = document.getElementById("rMenu");
            $("body").bind("mousedown",
            function (event) {
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
                    rMenu.style.visibility = "hidden";
                }
            });
        });


var i = 0;
var uright = "", utop = "";
        function zTreeOnDblclick(event, treeId, treeNode) {
if (treeNode) {
if ($("#" + treeNode.id).text() != "") {
                    $("#" + treeNode.id).dialog('moveToTop');
                }
else {
var id = treeNode.id;

var right = i * 25 + ($(window).width() / 2) - 300;
var top = i * 25 + ($(window).height() / 2) - 250;

//                    if ((top + 480) >= $(window).height()) {
//                        right += 25;
//                    }

if (uright != "" && uright < right) {
                        right = uright;
                        top = utop;
                        uright = "";
                    }

                    treeNode.index = i;
var _editRankDlg = $("<div id=" + id + "></div>").appendTo("#contents");

                    _editRankDlg.load("message.html?id=" + i, function () {

                        setName(i);
                        sendButton(i);
                        _editRankDlg.dialog({
                            modal: false,
                            show: "slide",
                            hide: "slide",
                            width: "450",
                            resizable: false,
                            height: "500",
                            position: [right, top], //默认单位就是px
                            title: treeNode.name,
                            open: function (event, ui) {
var $dialog = $(this);
var atext = $(".ui-dialog-titlebar-close").replaceWith('<p class="ui-xlgwr"><span class="ui-icon ui-icon-minusthick">minusthick</span> <span class="ui-icon ui-icon-extlink">extlink</span><span class="ui-icon ui-icon-closethick">close</span></p>');
                                $(".ui-xlgwr>span").click(function () {
var spantext = $(this).text();
if (spantext == "extlink") {
                                        alert($(this).dialog('option', right));
                                        $dialog.dialog({
                                            position: ['center', 'top'],
                                            width: 450,
                                            height: 500
                                        }); $dialog.dialog({
                                            position: ['center', 'top'],
                                            width: 450,
                                            height: 500
                                        });

                                    } else if (spantext == "minusthick") {
                                        $dialog.dialog({
                                            position: ['center', 'top'],
                                            width: 450,
                                            height: 0
                                        });
                                        $dialog.dialog({
                                            position: ['center', 'top'],
                                            width: 450,
                                            height: 0
                                        });
                                    } else if (spantext == "close") {
                                        $dialog.dialog("close");
                                    } else {
                                        alert("请选择正确的操作,谢谢.");
                                    }
                                });
                            },
                            close: function () {
var r = treeNode.index * 20 + ($(window).width() / 2) - 300;
var t = treeNode.index * 20 + ($(window).height() / 2) - 250;

if (uright == "" || uright >= r) {
                                    uright = r;
                                    utop = t;
                                }
                                i--;
                                _editRankDlg.remove();
                            }
                        });
                        i++;
                    });
                }
            }
        }


        function zTreeOnDrag(event, treeId, treeNode) {
            alert("  treeId=" + treeId + ";<br/>&nbsp;tId=" + treeNode.tId + "; Name=" + treeNode.name);
        }

        function zTreeOnDrop(event, treeId, treeNode, targetNode, moveType) {
if (treeNode) {
                alert("  treeId=" + treeId + ";<br/>&nbsp;Src Name = " + treeNode.name
                        + "; Target Name = " + ((targetNode != null) ? targetNode.name : "root")
                        + "; moveType=\"" + moveType + "\"");
            } else {
                alert("  treeId=" + treeId + ";<br/>&nbsp;拖拽放弃。");
            }
        }

        function zTreeOnRename(event, treeId, treeNode) {
            alert("  treeId=" + treeId + ";<br/>&nbsp;tId=" + treeNode.tId + "; Name=" + treeNode.name);
        }


        function refreshTree() {
            zTree1 = $("#treeDemo").zTree(setting, zNodes);
        }


//---------------------------右键事件----------------------------------------
        function addTreeNode(ty) {
            hideRMenu();
if (ty == 0)
                zTree1.addNodes(zTree1.getSelectedNode(), [{ name: "分组", icon: "demoStyle/img/people.gif"}]);
else
                zTree1.addNodes(zTree1.getSelectedNode(), [{ name: "好友"}]);
        }

        function removeTreeNode() {
            hideRMenu();
var node = zTree1.getSelectedNode();
if (node) {
if (node.nodes && node.nodes.length > 0) {
var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
if (confirm(msg) == true) {
                        zTree1.removeNode(node);
                    }
                } else {
if (confirm("确定要删除所选择项吗？")) {
                        zTree1.removeNode(node);
                    }
                }
            }
        }


        function showRMenu(type, x, y) {
            $("#rMenu ul").show();
if (type == "root") {  //添加分组
                $("#m_del").hide();
                $("#m_del1").hide();
                $("#m_add1").hide();
            }
if (type == "node") { //添加好友，删除好友
                $("#m_del").hide();
                $("#m_add").hide();
                $("#m_add1").hide();
            }

if (type == "node1") {//添加好友，删除组
                $("#m_add").hide();
                $("#m_del1").hide();
            }
            x = $(window).width - $("#dialog").width();
            y = y - 30;
            $("#rMenu").css({ "top": y + "px", "left": x + "px", "visibility": "visible" });
        }
        function hideRMenu() {
if (rMenu) rMenu.style.visibility = "hidden";
        }

        function zTreeOnRightClick(event, treeId, treeNode) {

if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                zTree1.cancelSelectedNode();
                showRMenu("root", event.clientX, event.clientY);
            } else if (treeNode && (event.target.tagName.toLowerCase() == "button" || treeNode.nodes != null)) {
                zTree1.selectNode(treeNode);
                showRMenu("node1", event.clientX, event.clientY);
            }
else if (treeNode) {
                zTree1.selectNode(treeNode);
                showRMenu("node", event.clientX, event.clientY);
            }
        }
    </script>
</head>
<body>
    <div id="contents">
    </div>
    <div id="dialog" title="dialog">
        <div class="zTreeDemoBackground">
            <ul id="treeDemo" class="tree">
            </ul>
        </div>
        <!--     菜单-->
        <div id="rMenu" style="position: absolute; visibility: hidden;">
            <li>
                <ul id="m_add" οnclick="addTreeNode(0);">
                    <li>添加分组</li></ul>
                <ul id="m_add1" οnclick="addTreeNode(1);">
                    <li>添加好友</li></ul>
                <ul id="m_del" οnclick="removeTreeNode(0);">
                    <li>删除该组</li></ul>
                <ul id="m_del1" οnclick="removeTreeNode(1);">
                    <li>删除好友</li></ul>
            </li>
        </div>
    </div>
    <button id="Button1">
        Open message</button>
</body>
</html>

 

 

 

这里介绍的右键菜单还是ztree自带的 先定义下菜单显示的项

   <!--     菜单-->
        <div id="rMenu" style="position: absolute; visibility: hidden;">
            <li>
                <ul id="m_add" οnclick="addTreeNode(0);">
                    <li>添加分组</li></ul>
                <ul id="m_add1" οnclick="addTreeNode(1);">
                    <li>添加好友</li></ul>
                <ul id="m_del" οnclick="removeTreeNode(0);">
                    <li>删除该组</li></ul>
                <ul id="m_del1" οnclick="removeTreeNode(1);">
                    <li>删除好友</li></ul>
            </li>
        </div>

 

js注册菜单

 //---------------------------右键菜单----------------------------------------
        var zTree1;
        var setting;


        setting = {
            editable: true,
            checkable: false,
            edit_removeBtn: false,
            callback: {
                dblclick: zTreeOnDblclick,
                drag: zTreeOnDrag,
                drop: zTreeOnDrop,
                rename: zTreeOnRename,
                rightClick: zTreeOnRightClick
            }

        };
        var rMenu;

 

  $(document).ready(function () {

            refreshTree();
            rMenu = document.getElementById("rMenu");
            $("body").bind("mousedown",
   function (event) {
       if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
           rMenu.style.visibility = "hidden";
       }
   });
        });

 

 callback绑定事件可以绑定多个事件

具体可以才看ztree事件

 

具体大家可以代码吧，

想查看的最新的到：IT潮流网

 

 

转载于:https://www.cnblogs.com/itclw/archive/2011/12/21/2295790.html

weixin_30614109
关注
jquery-WebQQ桌面布局
11-02
jquery插件-WebQQ桌面布局
山寨版webqq jquery qq
weixin_30625691的博客
12-14 93
继续上一次的山寨版qq web qq信息发送界面（如附件）这里用到的编辑器是discuz的论坛编辑器被我改造了下，如果觉得不错的朋友可以找我要好了现在贴出发送信息的代码信息发送主界面[code]<table style="width: 100%; height: 100%"> <tr valign="top" style="width: 100%; ...
用jquery 打造web qq 山寨版qq
DSKFJDKFJ的专栏
11-19 649
看到腾讯的web qq 很想自己弄一个，在网上找了很久关于这方面的，找了很久都没找到合适的。大部分都是假冒的没有一点实用,因此自己写了一个不过目前还没全部完工。先发出来和大家分享下。喜欢的朋友可以到我的个人网站去查看，那里会更新的比较快。IT潮流网 （Jquery,Ajax,Html） 目前实现的：静态的展示，和发送消息。 本人的山寨版qq web qq 目前用到的 只是jquer 和zTr
jQuery制作web qq用户体验桌面
无名指的约定
08-20 6196
jquery ui制作仿腾讯web qq用户界面，酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上。jQuery用户体验设计,web qq桌面十分动感酷炫。 来源： muZiLei   查看演示>>   Html代码   >  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta
JQuery+png实现webqq2.0图标效果
hikevin17的专栏
10-13 766
        首先要感谢大家一直以来对我笔记的支持，我很受鼓舞。把学习笔记写下来与大家分享，交流，不仅可以让大家增加一些解决实际的思路，也可以让自己更深刻地体会一次，谢谢！         qqweb2.0版出来也不久，它的桌面式个性应用很漂亮，我很喜欢它最上面一排的图效果。         在我昨天写的一个页面的时候，我试着模拟了下，还是比较像的，呵呵，现在把实现这个功能的代码贴出
jQuery UI仿webqq桌面系统WebOS界面操作
04-27
在本项目中，“jQuery UI仿webqq桌面系统WebOS界面操作”是一个利用jQuery UI库创建的，模拟WebQQ桌面系统风格的Web操作系统界面。这个系统旨在提供一种类似于桌面环境的用户体验，用户可以通过浏览器进行交互，享受...
webqq协议QQ消息群发
06-03
WebQQ协议是腾讯公司提供的一种基于网页的QQ即时通讯服务，允许用户在浏览器上实现与QQ客户端相似的功能。这个协议的解析和利用是许多开发者、自动化脚本编写者以及研究者关注的焦点，特别是对于消息群发的需求。在...
jquery ui仿腾讯web qq界面desktop酷炫特效
10-30
2. **窗口拖放（Draggable）和可调整大小（Resizable）**：腾讯Web QQ的窗口允许用户拖动和调整大小，jQuery UI提供了Draggable和Resizable两个插件，能轻松实现这一交互效果。 3. **下拉菜单（Dropdown）**：在Web...
jquery仿WebQQ菜单ui界面特效代码
03-20
2. **响应式设计**：WebQQ菜单界面通常具有良好的响应性，能适应不同设备的屏幕尺寸。通过jQuery的`.resize()`函数，我们可以监听窗口大小的变化，并据此调整菜单布局。 3. **鼠标悬停效果**：jQuery的`.hover()`...
【示例代码】Jquery仿WebQQ桌面程序特效~~附源码哦
统一开发环境（UDE）专栏
05-30 1425
此作品是一款非常给力的仿WebQQ桌面程序Jquery特效，使用非常简单，主题切换只要改变body的背景图片即可，整体UI样式也改变了，看起来非常简洁大气。大家可以直接应用，功能图片可以自定义。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发~~~统一开发环境是一款HTML5跨平台一站式应用开发、调试和部署工具。通过整合多种手机应用的开发包（SDK）及对应的Eclipse Plug
jquery仿WebQQ菜单ui界面
03-26
jquery仿WebQQ菜单ui界面
最全网络全部仿webqq界面总结,HTML+CSS
09-17
用了很长时间整理得到的。。挺辛苦的。希望能得到点辛苦费吧。谢谢大家。
Jquery仿WebQQ桌面程序特效~~附源码哦
tangfenjuan的博客
05-27 321
此作品是一款非常给力的仿WebQQ桌面程序Jquery特效，使用非常简单，主题切换只要改变body的背景图片即可，整体UI样式也改变了，看起来非常简洁大气。大家可以直接应用，功能图片可以自定义。   建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~它是一款HTML5跨平台一站式应用开发、调试和部署工具， 支持HTML5跨平台开发，原Java跨平台插件支持And...
桌面系统（web前端）jQuery制作Web桌面系统界面类似WebQQ桌面布局
java_zhaoyanli的专栏
12-08 7421
源码不是我写的，但是我在基础上修改了一些内容。 可参考，http://www.xwcms.net/webAnnexImages/fileAnnex/20140220/82693/index.html jQuery制作Web桌面系统界面类似WebQQ桌面布局 js有些修改。 左边是图标，双击可弹出弹框，弹框之间可进行切换，弹框可缩小放大，右下角的小图标内容是缩略图。
web页面调用qq
weixin_44220680的博客
05-16 5009
遇到一个需求，需要再web页面调用qq（点击按钮打开qq）。 从网上查了一下，发现给到的方案在移动端和pc端有点区别，所以改进了一下发到这里。 话不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="cmge_zhiming"/> <!--2020-03-10 --&g
ExtJS结合WCF/Jquery结合WCF 分别开发的非常优秀的网页聊天工具，持续更新
温文章的专栏
09-01 1774
ExtJS结合WCF/Jquery结合WCF 分别开发的非常优秀的网页聊天工具
webapp的威力，运行不了qq，却可以用webqq
棋牌游戏
12-13 223
机器配置差，qq一运行几乎跟死机一样，但是webqq没问题，流畅运行，几乎不存在网络问题，已经可以实用。
WEBQQ协议解析与登录过程详解
在登录WEBQQ时，客户端会向服务器发送一个POST请求，如示例中的`POST /channel/login2 HTTP/1.1`。这个请求包含了多个HTTP头字段，例如`Host`、`User-Agent`、`Content-Type`等，这些都是标准的HTTP请求组成部分，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值