随笔分类 - jQuery篇
1
jQuery方面的一些知识和开发语言结合的实例
摘要:Twitter、微博、Google Reader等网页版都有一套快捷键,J:快速查看上一条;K:快速查看下一条。
数据基于上一篇博客。增加当前项的样式:宽度为2的白色边框:
阅读全文
摘要:WinJS中提供了列表控件ListView,但是对于一些有一些逻辑判断的处理不是十分友好,我们可以使用JavaScript中的模版机制来自己生成列表,然后添加到DOM中。今天要讲的是artTemplate, artTemplate提供一个是否简单的语法并且性能十分不错,有兴趣的可以去Github上查看相关细节。
阅读全文
摘要:在WinJS中,我们获取到XML格式的数据可能需要转换为JSON方便处理,这样就用到xml转json的插件。http://www.fyneworks.com/jquery/xml-to-json/是一款很不错的xml转json的jQuery插件,但是在Windows 8上(IE10)上不能正常的工作。原因是IE10上不推荐使用ActiveXObject了,为了将文本转换为xml,我们可以使用XmlDocumentWindows.Data.Xml.Dom.XmlDocument的loadXml将带有xml格式的文本转为XML对象:var doc=new Windows.Data.Xml.Dom.
阅读全文
摘要:
每天都会有新的jQuery插件诞生,这里和大家分享最新出炉的11款在实际项目中可能用到的jQuery插件,提供整理后的实例下载。
阅读全文

摘要:
jQuery确实是一项伟大的技术,通过jQuery的插件,我们可以方便的创建具有更好用户界面的网站。在本文中,将和大家分享40个对你创建更好用户界面的jQuery技术和教程。
阅读全文

摘要:
这里跟大家分享一款jQuery的插件,即使用jQuery将文本有一定的动画效果。
jquery.texteffects.js
使用方法也很简单:
引入 上述的js文件,然后给你的文本加上一个class,写如下jquery代码
阅读全文

摘要:在上一篇文章中,我们创建了一个Ajax留言板程序,在本文中,进一步优化这个程序,给留言板加上删除功能。效果正如你在http://www.css88.com/demo/ajax-deleet/中看到的一样,只不过我们也要同时更新数据库的信息。要删除数据库中指定的数据,则必须要有主键的值,否则数据库不知道删哪一条,于是,我们在添加留言的时候就要将刚刚持久到数据库中的id返回,并写到DOM中以便在删除的...
阅读全文
摘要:在整理以前资料时偶尔发现有一个效果不错的Ajax留言板程序,是以前一个系统的一个部分。今天抽了点时间,将其独立成一个项目,与大家分享下,先来看下具体的效果图:思路很简单,就是一般的Ajax系统,主要是里面的一些jQuery的特效确实不错。下面是实现步骤:环境:Visual Studio 2010 + SQL Server 2008 + jQuery1.4.1 1. 首先设计数据库,很简单,留言人、...
阅读全文
摘要:登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口。接下来,我来带领大家打造一个漂亮、安全的登录界面,使用的技术是ASP.NET+jQuery先来看看预览效果 Ajax登录重点在Ajax,输入用户名和密码后,使用Ajax方式将信息提交到服务器端,服务器端判断时候存在该用户,存在则登录成功并转向管理界面(有时需要写cookie或是利用Session,此处不作讨论),不存在则提示登录失败。 基本流程图如下 上面是主要思路,为了打造安全的登录,在使用ajax将密码传到服务器端前,我们可以使用MD5对密码进行加密,当然数据库中存储的也是加密后的字符串。jQuery有一款这样的MD5加密
阅读全文
摘要:前面三篇文章实现了第一个目标,即无刷新分页。本文将实现第二个目标,即预览新闻内容。有两种方法可以实现内容的预览,一个是ajax,一个是伪ajax(姑且这么叫)。我们先用伪ajax实现新闻内容的预览。方法很简单,就是在读取新闻列表的时候将要预览的内容也读取出来但不显示在页面里面,当鼠标移到链接上面时将预览的内容的显示出来。实现起来也很简单,我们可以将预览的内容赋值给超链接标签里面的title属性,然后在mousehover的时候显示出来即可。下面就用这个方法实现新闻的预览。这里我们用到了一个jquery插件niceTitleniceTitle是一款当鼠标移到超链接上面显示提示的插件。我们可以使用
阅读全文
摘要:前面两个章节我们将需求分析和概要设计简单介绍了,接下来是重点的编代码的阶段了(实现无刷新分页)。在编写代码之前,一定要有计划的去编写代码,不能一开始啥也不管就开始编代码,除非你特牛。我们来看一下需求分析:3.==》无刷新的分页读取新闻列表,在点击下一页的时候触发事件,调用ajax去数据库中查找下一页的数据并返回,然后显示在页面上。这里面有两个事件,都是js事件,我们用jquery代码来实现。分页的话,我们采用jquery的分页插件pagination,官方地址为http://plugins.jquery.com/project/pagination下载js文件和css文件(最下面附下载地址)先
阅读全文
摘要:在上一篇文章中,我们进行了需求分析,如下:1。动态的新闻列表(这个很简单)2。可以分页读取新闻列表(这个也不难)3。可以无刷新的分页读取新闻列表(这个稍微有点难度)4。可以预览新闻的内容(这个也稍微有点难度)5。界面友好(这个是必须的)按照软件工程的顺序,我们应按照这样的顺序开发软件:可行性分析===》需求分析===》概要设计===》详细设计===》编码===》测试由于我们仅仅是项目中的一个小部分,但也差不多按照以上的顺序进行开发,这是一个良好的习惯。我们将概要设计和详细设计放在一起。下面我们来设计数据库,由于采用的是Access数据库,而且字段也相对简单。就一张表tb_news,数据库名为n
阅读全文
摘要:新闻列表是信息管理系统中最常见的,也是最简单的,一些简单的新闻列表就是一个table,然后里面循环写入数据,没有分页。这样如果数据量很大时,情况就变得十分糟糕,往往打开一个网页就需要很长的时候,大大的降低了的用户的体验效果。而分页的话也是很有讲究的,不同的数据库往往对应着不同的分页方式。这里不做讨论。下面我们仅以简单的access作为数据库来进行新闻列表的无刷新分页。无刷新意味着要使用ajax技术,当然无刷新不仅仅是ajax,还有其他的方法做到无刷新,如将所有的数据一次性读取出来,然后根据页数的不同显示不同的内容,这个仅仅靠JavaScript就可以实现了,但是这个无疑是饮鸩止渴,和上面没有分
阅读全文
摘要:在网上看到许多的jquery插件实现滚动新闻,特别是新闻显示在div里面的,比较了一番发现这款jquery.vticker-min.js还是挺不错的,于是就将它集成到我的毕业设计里面。呵呵,效果图如下: ps:gif做的不是很好,大家将就一下吧,呵呵。 下面来看代码: <div class="news-container" style="width: 260px; margin: auto...
阅读全文
摘要:漂亮的导航栏,开始的时候是标志性图片,当鼠标移到上面时,图片上移,文字说明显现。效果图如下:实现的话是用jQuery实现的,有现成的插件。插件的js代码如下:/** GARAGEDOOR MENU * A Javascript jQuery script by Gaya Kessler* Version 1.0* Date: 08-04-09* */var GarageDoor = {scroll...
阅读全文
摘要:近日,客户说他想要个类似于人人网(以前为校内)的登录框效果,于是上网搜了下,发现有一个仿得比较好的,于是就拿过来用了用。下面将我用thickbox和css实现校内登录(注册)框与大家分享下-----》效果图如下:方法很简单,就是用thickbox的iframe模式,将另一个页面嵌套即可,然后在这个页面里写ajax来实现相应的功能。代码:注册:regUser.html代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><linktype
阅读全文
摘要:niceTitle是一款当鼠标移到超链接上面显示提示的插件。我们可以使用该插件来实现新闻、文字的预览。这不是真正的预览,在读取文字列表的时候同时读取每个文章的内容概要(即想要预览的内容),然后使用该插件就可以实现假预览。效果图如下,自己可以相应修改代码如下:<link rel="Stylesheet" type="text/css" href="Styles/jQuery.niceTitle...
阅读全文
摘要:
Thickbox是一款很不错的jquery弹出层的插件.关于他的细节用法,可以参考他的官方说明。最近一直在用这个插件,发现他的一个modal模式没有右上侧的关闭按钮。于是我就随便弄了一个,有点卖巧。
效果图如下
阅读全文

摘要:1.Ajax Daddyhttp://www.ajaxdaddy.com/Ajax Daddy收集了大量漂亮的Web2.0工具,其中一个使用的功能就是,在你把某个Ajax/Javascript实例应用在自己的网站上之前,你可以在它上面先看看效果演示。2.AjaxRainhttp://www.ajaxrain.com/AjaxRain有很多完美整合AJAX, CSS, DHTML 或 Javascr...
阅读全文
1