分类 » 前端开发

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 按钮

分类: 标签:‚ ‚  评论:6 6 评论

一.Button 组件及 jQuery Mobile 如何丰富组件样式 在 jQuery Mobile 里,可以通过给任意链接添加 data-role=“button” 来产生一个 button 组件,jQuery Mobile 会追加一定的样式到链接,值得注意的是,jQuery Mobile 在给组件元素追加样式时不一定只在原有的元素上添加 CSS 和 Javascript 响应,一般还会追加一些新的元素使到组件的...

Read More –>

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础

分类: 标签:‚ ‚ ‚  评论:17 17 评论

这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件、事件响应以及可以调用的方法,而作为该系列的第一篇文章,Kayo 将会先介绍 jQuery Mobile 的基本情况和一些基础的实例。   一.jQuery Mobile 的渐进增强设计与浏览器支持 在上一篇文章中, Kayo 简单...

Read More –>

使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则

分类: 标签:‚ ‚ ‚  评论:40 40 评论

最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mobile 与 HTML5 ,可以很方便的开发出一款具有良好界面及用户体验的 Web App,在这个过程中我收获良多,因此决定针对使用 jQuery Mobile 与 HTML5 开发 Web App 写一个系列的文章。在开...

Read More –>

HTML5 之微数据

分类: 标签:‚  评论:16 16 评论

随着 HTML5 规范的发展,一些 HTML5 的特性已经逐渐被现代浏览器支持,Kayo 最近也给网站加入一些 HTML5 的特性,比如这次要介绍的微数据。   一.什么是微数据? 首先通俗地介绍一下,微数据是在如 span、div 的标签内添加属性,让机器(如搜索引擎)识别其意义,一些特定类型的信息,例如评论、人物信息或事件都有相应的属性,用来描述其意义。   在这里再科普一下,给出谷歌关于微数...

Read More –>

jQuery 系列笔记目录

分类: 标签:‚ ‚ ‚  评论:19 19 评论

jQuery 系列笔记积累了几篇,为方便查找,整理了一个目录。 jQuery 系列笔记之前言 jQuery 笔记之一选择器 jQuery笔记之二 DOM 操作—美化 Title jQuery笔记之三事件和动画—仿登陆效果 瀑布流布局与 jQuery Ajax 分页 jQuery Ajax 分页 WordPress 版 ...

Read More –>

jQuery Ajax 分页 WordPress 版

分类: , 标签:‚ ‚ ‚  评论:44 44 评论

在新年前 Kayo 写了一篇文章介绍瀑布流布局及通用的网站 Ajax 分页方法,现在再介绍一下针对 WordPress 的 Ajax 分页。 Ajax 分页的原理就不在这里介绍了,有兴趣的童鞋可以参考 《瀑布流布局与 jQuery Ajax 分页》,下面开始介绍 Ajax 分页 WordPress 版。 一.加载 jQuery 库 既然是 jQuery 驱动的 Ajax ,加载 jQuery 库是...

Read More –>

瀑布流布局与 jQuery Ajax 分页

分类: , 标签:‚ ‚ ‚  评论:59 59 评论

在 Kayo 的上一篇文章轻图床的新前端与瀑布流布局曾经简略介绍过瀑布流布局,所谓的瀑布流效果就正如轻图床首页效果那样,多个内容相近的栏目紧密排列,尽量使到栏目间的间隙最小(即流体布局),并且随着页面滚动条向下滚动,新的数据会追加至当前页面的尾部直到所有数据加载完毕(滚动触发的 Ajax 翻页)。本文将会介绍如何实现瀑布流布局中的 Ajax 翻页,至于如何实现栏目间的紧密排列,本文将会简略介绍但不在重要的讨论范围。 ...

Read More –>

轻图床的新前端与瀑布流布局

分类: 标签:‚ ‚ ‚  评论:40 40 评论

在去年12月的时候,Kayo 做的轻图床上线了,因为是第一个做的后台程序,所以大部分的时间都用于设计后台,而前台设计就相对简单, Kayo 使用了一段时间后,感觉没有“前端的味道”,于是重新做了一个新的 UI 。下面直接上图。       图片列表页(首页,排行榜,用户主页)采用流体布局,首页与用户主页还是瀑布流分页(流体布局 + 滚动触发的 Ajax 分页),本来瀑布流布局采用 M...

Read More –>

jQuery Mobile 特性

分类: 标签:‚  评论:12 12 评论

因为平时关注 jQuery 的关系,百度新闻的“为您推荐”栏目推荐了我一篇文章,介绍的是 jQuery Mobile 1.0 的发布,jQuery Mobile 是一个基于 jQuery 的网页前端界面框架,它继承了 jQuery 轻量、方便、强大的特点,并且有着极好的移动设备支持。   jQuery Mobile 的特性 极好的跨平台支持 jQuery Mobile 支持各种平台,如主流的 Android...

Read More –>

CSS3的变形与过渡样式

分类: 标签:‚ ‚ ‚ ‚  评论:38 38 评论

作为最新版的 CSS , CSS3 就像传说中的一样,的确很神奇,配合 HTML5 后可以直接忽略 flash 了!不过杯具的是只有 chrome 、 Firefox 、 safari 等现代浏览器部分支持 CSS3 ,因此做正式站点的话还不能大规模的使用。但是在网站的某些部分使用一些CSS3却能很好的增强网页的画面效果,比如 Melody 的评论者头像就使用了 CSS3 的图片悬停动画,在不支持 CSS3 的浏览器...

Read More –>

WordPress前台调整字体大小

分类: , 标签:‚ ‚  评论:23 23 评论

很实用的一种效果,因为有童鞋需要,所以详细介绍一下!   首先放出效果图,其实就是 Melody 右下角的字体调整按钮。从左到右依次为字体缩小,还原默认字体,字体放大。   下面放出代码后大家就会发现代码量很少,并且已加上注释,很方便修改。   功能是用 jQuery 写的,因此需要加载 jQuery 库!之前有童鞋说加入代码后没有效果,可能是没有加载 jQuery 库的缘故,请确保主...

Read More –>

jQuery 实现 WordPress @回复 详解

分类: , 标签:‚ ‚  评论:34 34 评论

在回复时带有“ @ ”的功能大家应该不陌生了,在微博, BBS 中都可以见到“ @ ”的身影,连腾讯的 Qzone 也加入了“ @回复 ”的功能。的确,“ @回复 ”使到回复的对象更加清晰了,对于多重回复效果更加明显。 但是, WordPress 的评论模板中并没有自带这个功能,因此我们需要手动添加进去,其实这个功能在 WordPress 中已经比较流行了,不少主题中都带有这个功能,实现的原理也有多种,而我在本文中介...

Read More –>