Clever Deng时光

在交流中成长,记录、分享ing...

给博客添加“键盘控制文章翻页”功能

源起

您现在浏览的这个博客是本人08年学习.Net时的开发的一套博客程序提供的服务,其中也避免不了在功能上的暴增暴减,直到成为现在您看到的这个摸样,至今本热仍然维护着这个线上版本,一般时隔3、4个月修改一下结构或替换模板风格,紧跟时代的步伐,有限的提高用户体验嘛,作为以堆码养家糊口的我维护的这个个人博客如果太奥特曼了,是要罚去打小怪兽的。
昨天夜晚,修改了分页的显示方式(也就是您现在看到的分页),考虑到阅读本人博客的用户能够快捷、方便的使用文章翻页功能,于是今天花了10多分钟添加上了这个功能——“键盘控制文章翻页”。实现层面上是非常简单的,在细节问题上,希望能让您有启发式的思考。类似功能有比如豆瓣的相册,就提供支持方向键浏览照片。

实现方式

围观一下...

使用委托,满足不同的场景,开放封闭原则

委托是虾米

根绝国际惯例,先借用隐喻的强大威力说说委托是啥,委托:将自己的事务嘱托他人代为处理。那么计算机中的委托概念呢?大同小可。
在现实生活中,这样的场景天天都在发生。比如老王的项目快上线了,可是当月的报销少了通讯费的发票,这咋办了?不用急,把话费钱给小张,委托小张童鞋代缴,而小张是个好同志呀,不用打的,做公交车去。老王想起了上次小邓同学同样帮我代缴通讯费,几个站的路却玩享受坐的奔过去的。那么在程序的世界里是不是也有这种场景的映射呢?当然有,时时有,不然就没本篇博文了,本文通过Javascript的一个应用场景分享一次重构的心得。

JavaScript使用Ajax发表评论、留言

在我自己维护的CleverDeng时光个人博客里,用户互动的都是运行了Ajax技术,而Ajax的实现是利用了Jquery这个框架,那么我在开发的前期,是这样完成这2个功能的。(基本结构,具体实现略)
//文章评论
function mark(id)
{
   var userName=$("#txtname").val();
   var sendData="Action=mark&id="+id+"&username="+userName+"";
   SendPost(sendData);
}
//留言
function message()

围观一下...

开发jquery插件----文字自动截取(提供源代码)

计划总是赶不上变化,这篇插件开发的文章本应在上周完成,由于手头的项目实在紧张,只好让路吧,嘿嘿。今天将跟大家一起完成这个插件的开发流程。

插件需求(功能需要)

一个插件就是完成一个特定的功能,我们在动手制作一个插件时应该确定该插件开发完成后应具备哪些功能供我们使用。
在某天早上,按模式的完成开机、连接数据库、开启VS开发环境、调试程序。程序跑起了,可是页面中的有段内容超过了页面所容许的范围。这还不容易哟,SubString呗,
对,这的确是个好法子,能解决这类问题,但当页面需要被处理过后的内容进行交互,这种方法难免有点不适应了,那么我们就使用Jquery开发一个满足该需求的插件吧;

开发须知

围观一下...

开发jquery插件(一)

今天利用一些时间写了下Jquery插件,该插件的功能非常简单-----完成对"DIV"块之间的内容隐藏或显示。
开发这个插件之前,我对这方面的知识很少接触,今天不知道哪个神经不对,想自己写个小插件,也许是为过下瘾吧。嘿嘿,马上跑到Jquery官方看了下API文档就边摸索边试着写,调试了半个小时总算把这东西弄出来。就把这开发的相关知识分享给大家。
效果图如下所示:
初始效果-
Jquery插件-麦博网
使用插价效果-
Jquery插件-麦博网
Jquery·插件-麦博网

插件开发基础:

Q:什么叫Jquery插件开发?
A:开发Jquery插件其实就是扩展方法,如果大家使用过Net3.5开发过程序就知道它有个新的特性叫“扩展方法”,我认为它们很相近。
Q:怎么开发Jquery插件?
A:Jquery框架提供很好的用户扩展性,因此我们只需按照Jquery提供的接口、规则编写相应的函数(方法)即可,具体开发方式有2种:
方式一【推荐,因为是这样创建的方法是私有的。】:
(function($) {
    $.fn.MyPlug= function() {
        alert("您好,欢迎来到Mr.d's Time[http://www.mrdtime.com]");
    };
})(jQuery);
方式二:

围观一下...

jquery实现div层的拖拽实例

今天,利用休息时间随手写了个使用Jquery实现拖拽Div层的效果,Demo没用进行过代码优化,只保证能完成功能,只做参考昂。
原理:利用鼠标单击----原坐标;鼠标移动---新坐标;鼠标松开---流程结束;

Html页面代码段:

 <div class="layer">
    <div class="title">
      <h1>
        拖动</h1>
    </div>
    <p>
      最新信息</p>
  </div>

围观一下...

Back to Top

Copyright © 2008 - 2011 CleverDeng时光