`
LD_21
  • 浏览: 129118 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

[转]博客个性化定制-实现类似iGoogle首页功能

    博客分类:
  • ui
ui 
阅读更多

最近在忙几个事,工作上做天河部落的升级改版,绕有兴致的做博客的个性化功能,以前我的博客也有几个样式模板,但是模块没有定制,昨天顺便就把我博客的个性化定制功能实现了,对于Asp.Net的博客个性化定制功能的方法总结如下:

1.简单的切换css样式文件

这是我之前的博客切换风格的方法,很简单,只需要改变页面的一个css样式文件即可,通过换css样式文件页面也完全可给人耳目一新,但其页面的html结构并没有发生改变,所以就不可能从根本上实现博客个性化定制,换换皮肤而已。我之前是使用javascript来改变css文件路径的,有时候加载样式很慢的情况下,在切换样式的那一瞬间页面可能会出现“裸奔”,也就是没有任何样式,这一点IE处理得很好,因为IE内可以预载css样式,在更换css样式文件的时候它会先预载新的css样式文件,完成之后才会被附加到页面来,所有不会出现上面的“裸奔”情况。然而在表扬IE的时候又想起之前碰到IE7里面的一个潜规则:在使用javascript更换css样式文件的时候不会加载样式文件内联的@import url(..)样式。适应它潜规则的方法是:先指定一个空路径再设置为样式文件路径即可,如下:

<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->document.getElementById('currSkin').href = ''; document.getElementById('currSkin').href = skinsrc;

2.切换博客的MasterPage.master母版页

假如你的博客是用Asp.Net母版页的话,并且博客前台页面都使用同一个母版页,那么你可以在所有Page基类的OnPreInit方法里更换MasterPage母版页以实现博客个性化功能。

<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->protected override void OnPreInit(EventArgs e) { base.OnPreInit(e); //更换母版页 if (!string.IsNullOrEmpty(this.CurrentUser.Template.MasterPageSrc)) { this.MasterPageFile = this.CurrentUser.Template.MasterPageSrc; } }

此种方法虽然可以最大限度的改变博客模板,甚至是每个模板内的html可截然不同,但它同样有很大制约。因为MasterPage母版页并不能当成是模板,MasterPage母版页里面可能还有一些需要处理的逻辑,所以每个MasterPage母版可能需要对应一个cs类,如果里面所有的控件都是一样的话可以使用同一个CodeFile文件。但单更换MasterPage母版页还并不能定制博客模块,比如设置博客某些模块的位置或是否显示等,则还需要使用下面的动态加载ascx控件模块。

3.动态加载ascx控件模块

基于Asp.Net的强大控件功能,可使用服务器控件动态加载用户控件,而每一个用户控件都对应一个模块,比如个人档案、日历等等,用户可以在后台定制这些模块是否显示,显示位置等。我的博客个性化功能是使用MasterPage母版页结合动态加载ascx控件模块,我所定制的模块都是在MasterPage母版页里动态加载的,因为相册和留言等内页同样也是应用了同一个MasterPage母版页,所以定制的模块同样应用于所有内页。我们可以把相册或留言也作为一个模块,只不过在相册页面里相册模块是固定会要加载的。另外我这里还有一个版面设置,它其实是每一个模块都有的几种页面布局,假如版面是左-中的话那其实是只加载用户设置在左栏和中栏的模块,同时隐藏掉右栏;同理版面左-中-右则加载左栏、中栏、右栏的模块,中-右则加载中栏、右栏的模块,同时隐藏掉左栏。每一个版面都应该配合css动态输出一个样式文件,以便适用该种版面的布局。

4.使用微软的WebParts个性化部件

早在学校的时候有研究过微软自带WebParts个性化部件,那时候觉得很牛B,可以拖来拖去自定义位置,还可以自定义设置一些样式属性。不过WebParts个性化部件还是有很大的局限性,就是必须使用他那套成员资格、配置文件、角色管理、个性化设置提供程序,sqlserver版的数据库可以直接使用aspnet_regsql.exe生成,但其他类型的数据库恐怕只有自己来实现他的Provide接口了,发这些功夫去研究实现还不如自己做一个。总之,此种实现方法的约束太大,不太适用与需求多变复杂的项目中。

目前我的博客个性化还缺一个功能,那就是自定义添加一个模块,就好比说我在那里看到了一个很漂亮的播放器,这时候我就可以自定义添加一个我的音乐盒模块,里面贴播放器的html代码内容,并同样可以设置显示位置等。其实在以前一个项目里实现过该功能,之所以没有在我博客加这个功能,那是因为如果我真在那里看到了一个漂亮的播放器,我会做成一个系统的模块,可以选择是否显示该模块,可能我的博客以后会添加更多的模块,暂不需要自定义模块。

 

 

继上一篇博客个性化定制功能后,今天我又花了足足一天时间,实现了使用js拖拽定制模块功能。主要包括三步:1.拖拽模块;2.计算坐标位置;3.完成拖拽,保存当前布局位置。

一、拖拽功能

如果只单实现简单的拖拽功能,那其实很简单,就只要注意拖拽时选中文本一些问题。由于我这里还拖拽有一些区域限制等,模块又都是从后台动态输出的,就做成一个函数类,可能实现出来就没那么通用了。拖拽的过程一般我们会用到几个事件:鼠标开始按下onmousedown事件,拖动事件onmousemove,松开鼠标完成拖拽事件onmouseup。对于几个DOM元素都有相同的事件,一般不需要每个DOM元素逐一添加事件监听,可以添加一个事件到它们公共的父元素上,这样感觉更好,然后通过事件的target或srcElement捕获触发事件源元素,这里的拖拽也是这样来实现的,onmousedown事件是监听拖拽模块的父容器元素,这个方法有点不好的就是可能获得事件发生源并不是你想要的,可能获得的是它的子元素,所以这里可能还需要额外加一个是否为parentNode的判断。onmousedown事件第一步先要判断按的元素是否为可拖拽的句柄,然后再给document添加onmousemove、onmouseup事件。onmousemove里是主要的逻辑处理的事件,先根据event事件获取鼠标位置,然后设置拖拽模块的top和left值,最后使用window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()来取消拖拽过程中选择文本。

二、计算坐标位置

在拖拽模块过程还需要判断元素的坐标位置,因为拖动的模块只能放在指定的几个区域内,所以就需要动态判断是否在指定区域内容,在区域内的那个模块前,这些都需要根据元素的坐标来判断。先判断是否区域,区域栏为树直排列的容器,因此,只需要判断当前鼠标x坐标>=区域x坐标,并且鼠标x坐标<=区域x坐标+区域宽度即可。同理,确定区域后,判断模块是根据当前鼠标y坐标>=模块y坐标,并且鼠标y坐标<=模块y坐标+模块高度,相当于判断鼠标是否在某个元素上,依此可以定位当前拖放元素的区域模块位置,并insertBefore插入一个空元素顶位,再在onmouseup事件里把顶位的空元素替换为当前拖拽的元素,清空拖动时设置的position等样式。在拖放过程中,冒似在IE里计算还有点问题,有时候发现计算出来的位置不正确。另外还发现一个bug,在拖拽时如果用滑轮滚动页面,拖动的元素会滑落在鼠标位置,导致隔空拖动,因为拉滚动条的时候并不会触发onmousemove事件,去看了下iGoogle的首页,发现也存在这个问题,我想可能需要添加window.onscoll事件监视才能解决了。

三、保存拖拽后位置

拖拽完成onmouseup事件处理相对简单,因为在onmousemove事件中已确认拖动模块的位置了即上面所说的顶位的空元素,此时只需要replaceChild为拖拽的模块,但还有一个重要的步骤,那就是前台与后台交互,把当前客户端拖拽后的模块位置状态保存起来,或是写入进数据库。这可能就是一个比较复杂的过程了,因为这干系到数据库表存放结构等,我这里的模块表存放字段有模块ID、区域ID、排序号等,所以客户端保存的时候至少要能获取这些信息,这里我在与后台动态输出模块时就有一个约定,那就是每个模块和区域的DIV里的id或class都包含这些信息,以便客户端能用js方便取到,至于排序则是遍历模块时可自动生成一个从1开始的序号,之后在是把这些信息传递到服务端保存,发送Ajax请求这里就不罗嗦了,使用iframe也行。不过我这里两种方法都没有用,因为用户登陆进后台也可以设置所有模块的栏位和排序,前台我暂只是用Cookie来临时保存所有模块的栏位和排序,不过以后要能在前台拖拽保存所有模块的栏位和排序也很简单了,加个动态页面响应Ajax请求保存所有模块的栏位和排序写入数据库即可。

重要修复:使用添加mousewheel滚动鼠标滑轮事件修正隔空拖拽问题,但还需正确的计算出每次鼠标滑轮的距离。(2010-4-3 17:25)

事例:Drag.html

源码:(Drag.js下载)

分享到:
评论

相关推荐

    类似 igoogle主页 个性化设置

    【标题】:“类似 igoogle 主页 个性化设置” 在互联网早期,Google 推出了一项名为 iGoogle 的服务,它允许用户自定义自己的主页,添加各种小工具来展示天气、新闻、日历、电子邮件等信息。这个服务为用户提供了一...

    可以自由拖动的div ,类似于igoogle个性化首页

    总结起来,创建一个类似iGoogle的个性化首页,主要涉及HTML布局、CSS样式、jQuery和jQuery UI的拖放功能,以及可能的Ajax内容加载。通过这些技术,我们可以构建一个高度可定制的前端界面,让用户自由调整和组织他们...

    一个功能强大的仿igoogle插件

    5. 个性化定制:探讨如何通过插件实现用户界面的自定义,包括布局、颜色、小部件选择等。 这个插件对于开发者来说,是一个学习和实践Web应用个性化、浏览器扩展或社交网络整合的好案例。对于普通用户而言,它则提供...

    类似igoogle的源代码

    【描述】:“可定制的个性化主页,类似igoogle”表明这个项目旨在创建一个类似的平台,让用户可以根据自己的喜好调整和定制首页内容。它可能包含了一系列模块化的小部件,用户可以选择安装和排列,以实现高度个性化...

    php版本 可移动框架 可添加,类似igoogle

    标题中的“php版本 可移动框架 可添加,类似igoogle”表明这是一个基于PHP开发的、具有可拖动和自定义布局功能的框架,旨在模仿谷歌的个性化首页服务igoogle。igoogle允许用户根据个人喜好在首页上自由排列和添加...

    类似igoogle 代码

    【标题】"类似igoogle 代码"涉及到的核心知识点主要与个性化网页门户的开发有关,这里的“igoogle”是Google在2005年推出的一项服务,允许用户自定义首页,添加各种小工具来获取新闻、天气、邮件等信息。这个项目...

    Ajax+UserControl+Js实现Igoogle效果

    通过以上步骤,我们可以构建一个类似Igoogle的个性化页面,提供高度可定制的用户体验。这个过程涉及到的技能广泛,包括前端开发、后端编程以及用户体验设计,对开发者来说是一个很好的实践项目。

    igoogle实现拖拽效果

    描述:本文将深入探讨如何使用JavaScript脚本来实现类似iGoogle的拖拽功能,这是一种非常实用的技术,可以极大提升网页的交互性和用户体验。通过具体的代码示例,我们将逐步解析其实现原理和操作细节。 ### 一、...

    仿Igoogle拖动DIV

    【标题】"仿Igoogle拖动DIV"是一个关于JavaScript实现的网页元素拖放功能的实践项目,灵感来源于谷歌个性化主页iGoogle。iGoogle允许用户自定义页面布局,通过拖动各个小部件(div)来调整它们的位置。在这个项目中...

    仿igoogle 超炫效果

    这种布局方式和可定制化功能为用户提供了一种灵活且个性化的浏览体验。 【描述】中的“窗口拖动”和“模块拖动”是Web应用中的常见交互设计,用户可以通过鼠标操作改变页面元素的位置,使得界面更加动态和直观。在...

    Ajax仿iGoogle双击编辑-网页拖动完整实例

    在这个实例中,每个模块都可以被用户自由拖动,重新排列在页面上,这大大提高了用户的个性化定制能力。 4. CSS在本实例中起到美化和布局的作用。通过定义盒模型、定位(positioning)和浮动(floating),可以精确...

    js 仿iGoogle页面

    【标题】"js 仿iGoogle页面"是一个项目,旨在使用JavaScript技术来模仿谷歌的个性化主页iGoogle。iGoogle允许用户自定义主页,添加各种小工具,如天气预报、新闻摘要、日历等,通过拖放操作来组织这些小工具。 ...

    仿igoogle拖动,access数据库

    标题中的“仿igoogle拖动”指的是模仿Google的个性化首页iGoogle实现的一种用户界面交互效果。iGoogle在2005年推出,允许用户自定义首页,通过添加各种小工具来展示天气、新闻、日历等信息,并且支持这些小工具在...

    jQuery 仿iGoogle视频的列表拖动缓冲特效.zip

    这个压缩包主要针对那些希望为自己的网站或应用添加类似iGoogle个性化首页体验的开发者。iGoogle是一款已停用的Google服务,允许用户自定义主页,通过可拖动的小部件来显示新闻、天气、视频等内容。 首先,我们需要...

    2009最新仿igoogle源码

    【标题】"2009最新仿igoogle源码"所指的是一款模仿谷歌个性化主页iGoogle的网页源代码。iGoogle是谷歌在2005年推出的一个服务,允许用户自定义自己的首页,添加各种小工具来获取新闻、天气、邮件等信息。这款源码...

    很好的模拟iGoogle拖动效果的JavaScript源代码

    标题中的“很好的模拟iGoogle拖动效果的JavaScript源代码”是指使用JavaScript编程语言实现的一种功能,它可以模拟Google个性化主页iGoogle上的元素拖放交互体验。iGoogle允许用户自定义其首页,通过拖动小部件来...

    仿igoogle源码

    "仿igoogle源码"项目是一个基于Web技术的开发实例,它主要采用了ASP.NET(aspx)、Microsoft Access数据库(mdb)、CSS、JavaScript(js)和HTML等技术来构建一个类似于Google iGoogle的个性化主页服务。iGoogle是...

    仿照Igoogle实例

    【标题】"仿照Igoogle实例"所涉及的知识点主要集中在网页布局和交互设计上,Igoogle是一款由谷歌推出的个性化首页服务,用户可以根据自己的需求定制各种小工具和资讯展示。在仿制这样的实例时,我们需要关注以下几个...

    仿IGoogle可以拖动DIV

    标题中的“仿IGoogle可以拖动DIV”指的是创建一个类似于Google个性化主页(iGoogle)的交互式界面,其中各个模块(通常用DIV元素表示)可以被用户自由拖动以调整布局。这种功能在Web开发中常用于构建高度自定义和...

    Jquery拖动窗格(仿igoogle)

    iGoogle是Google推出的一个个性化首页服务,允许用户自定义首页布局,添加各种小工具,如天气预报、新闻摘要等。这些小工具可以在页面上自由移动,提供了一种高度定制化的浏览体验。 **3. 拖动功能实现** 在jQuery...

Global site tag (gtag.js) - Google Analytics