87,904
社区成员
发帖
与我相关
我的任务
分享关于人人网的一些常用的用户表现层的实现
下面的是我上人人的时候知道的并且差不多能做出来的一些功能，主要是一些表现层的实现，按照我自己的理解说一下，有哪些不对的地方欢迎拍砖
首先是导航栏，导航栏里面有2个功能可以说一下，一个是下拉菜单，一个是搜索。
下拉菜单只要需要设置一下CSS属性就可以了，无论你是下拉上拉左拉右拉还是折叠菜单。把父节点的display属性设置成relative，即为绝对位置，子节点设置为absolute，即为相对于父节点的相对位置，至于鼠标滑过时的显示，由于屎一样的IE6的存在，不能对div的容器设置hover，可以通过javascript来改变。
搜索的键入后显示功能则是ajax的实现，给搜索框设置一个事件onblur，即为当搜索框失去焦点时将用户键入的文本提交，然后接收并且处理返回值，如果返回值有效，则可以生成一个相对定位div加载内容，这个和下拉菜单差不多，只需要将生成的div的top属性设置成搜索框的(height-1)px，这样看起来像是连一起。
然后是右边部分
这个部分是控制右边部分内容显示的，还是AJAX。有这几个功能可以说一下：
点击不同的版块时不同的显示，一般来说控制层的话都会选择框架frame，很多erp都是这样，不过要我的话还是ajax。点击任何一个版块发送一个请求到服务端，然后服务端会返回数据，再由客户端浏览器进行处理显示给用户。点击的时候它会显示一个正在加载...， 在用户点击后讲正在加载写入目标div，当服务器返回数据之后清除正在加载....这几个字就可以了，在查看图片原图的时候通常会显示一个loading的gif图，也是这个 道理。
创建群，点击的时候弹出一个对话框，通常对话框组建每个一个大型的网站都会写一个自己的对话框组件，对话框做法有很多，我自己写的话还是absolute属性，然后将zIdnex属性设置的足够大（这个是避免被其它层覆盖）就可以了。所以很多层的显示只是设置了position而已。
更多||收起 点击时显示，收起时关闭，display的inline或者none。
这一块只有滚动显示可以说。首先需要将div的宽度固定，并且溢出时设置隐藏overflow:hidden，一般来说滚动图片都会克隆一个副本，这样可以无缝衔接，否则将会在尾部出现空白，但是淫淫的并不是滚动循环显示固定内容，它是动态的加载，所以无需克隆一个副本，点击->以后送出请求，返回有效数据之后开始滚动：设置一个定时器setInterval(func,time)，一个是要执行的函数，一个是执行频率，也就是滚动速度，因为不是无限循环，所以首先需要设置一下每个滚动的div的宽度，每次滚动的位置是1，当滚动的次数==div的宽度的时候，return false;即为结束滚动。关于滚动效果：function func(){}，每次执行滚动时目标div的scrollLeft++，即为div被卷去的左部++。
然后是新鲜事。新鲜事里面有这几个：视频截图，回复加载，用户提交。
视频截图需要有自己的主机，虚拟主机肯定是不靠谱的，因为视频截图需要调用其它软件，但是提供商不可能会给你安装软件的权限。通过代码截图应该是不可，无论你是调用C/C++或是用C#或是别的语言，软件用的比较多的是ffmpeg，在php里面可以通过exec('path',.......)来执行调用外部程序，每次执行的时间大概是4-8秒。
回复加载还是通过ajax，然后通过客户端载入，所以你可以禁止你的浏览器执行javascript，然后看看整个页面还剩什么。
用户提交，虽然html里面有一个form标签，但是除了刚接触web开发的人外，基本上都不会用这个标签，首先不够安全，再由就是重复提交。提交表单往往都是通过javascript来提交，这样可以省去很多麻烦。至于提交之后立马能看到你提交的内容并不是又加载了一次，而是直接讲你的内容写入到了目标div中，在jquery里面通过$('#target').prepend('your response');来插入，这个我是在网易发表回复的时候注意到的，现在很多的和谐，所以你提交的内容并不会直接写入数据库，而是放入到一个临时表里面，然后后台会进行审查，如果通过则写入数据库，不通过则删除，你可以在网易评论里面写一个 操你***试试。
回复加载还是ajax，淫淫会预先定义好一个评论模板，然后for循环返回的有效内容，现在在返回值反面99%用的都是json数据结构。{}，然后eval({})得到一个object。
当你滚动到页面尾部的时候自动加载的问题，首先需要获取网页完整高度document.body.scrollHeight，浏览器高度window.clientHeight;，网页滚过的高度document.body.scrollTop（这个在兼容性方面需要修改），接着一个判断 if(滚过的高度>=完整高度-浏览器高度) return loading(); else return ;；
最后就是加载更多新鲜事，还是AJAX，通过预定义的模板显示就可以了。
还有就是文本编辑器
文本编辑器可以通过frame来做，把frame的属性设置成可写就可以了，至于编辑器上的小图标则是通过css sprite，将小图标继承到一个大图标里面，不这样的话得一张一张加载，很费时间。然后小图标代表的功能可以通过javascript来写，文本编辑器很好做。
最后一个就是链接的处理，比如有一个链接<a href="www.csdn/asdfafasfasdfasdfasfas/asdfasf/a.html">www.csdn/asdfafasfasdfasdfasfas/asdfasf/a.html</a>，如果直接打印上去的话太长，而且不好看，所以一般会随机一组字符串<a href="http://htpcls.com/adsd" name="www.csdn/asdfafasfasdfasdfasfas/asdfasf/a.html">http://rrurl/adsd</a>，所以人人的链接都是这种方式： http://rrurl.cn/rARVrx。
首先是导航栏，导航栏里面有2个功能可以说一下，一个是下拉菜单，一个是搜索。
下拉菜单只要需要设置一下CSS属性就可以了，无论你是下拉上拉左拉右拉还是折叠菜单。把父节点的display属性设置成relative，即为绝对位置，子节点设置为absolute，即为相对于父节点的相对位置，至于鼠标滑过时的显示，由于屎一样的IE6的存在，不能对div的容器设置hover，可以通过javascript来改变。
搜索的键入后显示功能则是ajax的实现，给搜索框设置一个事件onblur，即为当搜索框失去焦点时将用户键入的文本提交，然后接收并且处理返回值，如果返回值有效，则可以生成一个相对定位div加载内容，这个和下拉菜单差不多，只需要将生成的div的top属性设置成搜索框的(height-1)px，这样看起来像是连一起。
然后是右边部分
这个部分是控制右边部分内容显示的，还是AJAX。有这几个功能可以说一下：
点击不同的版块时不同的显示，一般来说控制层的话都会选择框架frame，很多erp都是这样，不过要我的话还是ajax。点击任何一个版块发送一个请求到服务端，然后服务端会返回数据，再由客户端浏览器进行处理显示给用户。点击的时候它会显示一个正在加载...， 在用户点击后讲正在加载写入目标div，当服务器返回数据之后清除正在加载....这几个字就可以了，在查看图片原图的时候通常会显示一个loading的gif图，也是这个 道理。
创建群，点击的时候弹出一个对话框，通常对话框组建每个一个大型的网站都会写一个自己的对话框组件，对话框做法有很多，我自己写的话还是absolute属性，然后将zIdnex属性设置的足够大（这个是避免被其它层覆盖）就可以了。所以很多层的显示只是设置了position而已。
更多||收起 点击时显示，收起时关闭，display的inline或者none。
这一块只有滚动显示可以说。首先需要将div的宽度固定，并且溢出时设置隐藏overflow:hidden，一般来说滚动图片都会克隆一个副本，这样可以无缝衔接，否则将会在尾部出现空白，但是淫淫的并不是滚动循环显示固定内容，它是动态的加载，所以无需克隆一个副本，点击->以后送出请求，返回有效数据之后开始滚动：设置一个定时器setInterval(func,time)，一个是要执行的函数，一个是执行频率，也就是滚动速度，因为不是无限循环，所以首先需要设置一下每个滚动的div的宽度，每次滚动的位置是1，当滚动的次数==div的宽度的时候，return false;即为结束滚动。关于滚动效果：function func(){}，每次执行滚动时目标div的scrollLeft++，即为div被卷去的左部++。
然后是新鲜事。新鲜事里面有这几个：视频截图，回复加载，用户提交。
视频截图需要有自己的主机，虚拟主机肯定是不靠谱的，因为视频截图需要调用其它软件，但是提供商不可能会给你安装软件的权限。通过代码截图应该是不可，无论你是调用C/C++或是用C#或是别的语言，软件用的比较多的是ffmpeg，在php里面可以通过exec('path',.......)来执行调用外部程序，每次执行的时间大概是4-8秒。
回复加载还是通过ajax，然后通过客户端载入，所以你可以禁止你的浏览器执行javascript，然后看看整个页面还剩什么。
用户提交，虽然html里面有一个form标签，但是除了刚接触web开发的人外，基本上都不会用这个标签，首先不够安全，再由就是重复提交。提交表单往往都是通过javascript来提交，这样可以省去很多麻烦。至于提交之后立马能看到你提交的内容并不是又加载了一次，而是直接讲你的内容写入到了目标div中，在jquery里面通过$('#target').prepend('your response');来插入，这个我是在网易发表回复的时候注意到的，现在很多的和谐，所以你提交的内容并不会直接写入数据库，而是放入到一个临时表里面，然后后台会进行审查，如果通过则写入数据库，不通过则删除，你可以在网易评论里面写一个 操你***试试。
回复加载还是ajax，淫淫会预先定义好一个评论模板，然后for循环返回的有效内容，现在在返回值反面99%用的都是json数据结构。{}，然后eval({})得到一个object。
当你滚动到页面尾部的时候自动加载的问题，首先需要获取网页完整高度document.body.scrollHeight，浏览器高度window.clientHeight;，网页滚过的高度document.body.scrollTop（这个在兼容性方面需要修改），接着一个判断 if(滚过的高度>=完整高度-浏览器高度) return loading(); else return ;；
最后就是加载更多新鲜事，还是AJAX，通过预定义的模板显示就可以了。
还有就是文本编辑器
文本编辑器可以通过frame来做，把frame的属性设置成可写就可以了，至于编辑器上的小图标则是通过css sprite，将小图标继承到一个大图标里面，不这样的话得一张一张加载，很费时间。然后小图标代表的功能可以通过javascript来写，文本编辑器很好做。
最后一个就是链接的处理，比如有一个链接<a href="www.csdn/asdfafasfasdfasdfasfas/asdfasf/a.html">www.csdn/asdfafasfasdfasdfasfas/asdfasf/a.html</a>，如果直接打印上去的话太长，而且不好看，所以一般会随机一组字符串<a href="http://htpcls.com/adsd" name="www.csdn/asdfafasfasdfasdfasfas/asdfasf/a.html">http://rrurl/adsd</a>，所以人人的链接都是这种方式： http://rrurl.cn/rARVrx。
...全文
请发表友善的回复…
发表回复
lirenniao 2011-10-26
- 打赏
- 举报
