dsgru-CSDN博客

仿真或极简，用户界面的美丽与哀愁

用户对产品最直观的的体验都来源于“UI”，也就是用户界面。旋钮和指针，按钮和LED，触控和屏幕。时代在发展，工业产品也从满是暴露的细节发展到现在的全部围绕屏幕存在的“黑箱”状态。过去的时光是忘不掉的质感。闪着温润光泽的金属部件，浑然天成的木质纹路，恰到好处的皮革质感。摆锤的往复，活塞的起伏，发条的振动。蒸汽朋克艺术家们努力表现着这些能够亲眼看到、亲耳听到、亲手触摸，但已经成为过去的温暖。...

2014-10-20 15:40:19 274

Javascript模块化编程（一）：模块的写法

正文：随着网站逐渐变成"互联网应用程序"，嵌入网页的 Javascript 代码越来越庞大，越来越复杂，extjs就是一个很好的例子。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，...

2014-10-16 15:46:28 225

可以500%提高开发效率的前端UI框架！

今天我们这里再介绍一款相当不错的响应式布局插件 - Freetile.js，使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢！主要特性 Freetie来自于Assemblage和 Assemblage Plus的内建布局引擎，设计灵感来自于Masonry，VGrid和Wookmark，但是和他们相比较，拥有以下独特的地方：允许包含任何尺寸的元素，并且不要...

2014-10-16 14:05:08 390

跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现

postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，...

2014-10-15 15:21:50 1578

Sencha Touch 和 jQuery Mobile 该如何选择

如果你正在面临是选择 jQuery Mobile 或者是 Sencha Touch ，那么下面这些因素是你需要考虑的。jQuery MobileJM 只是一个 UI 库，依赖于 jQuery 和 jQuery UI 的 DOM 操作、Ajax 和其他库为了创建 UI 部件，你只需要编写 HTML 即可，JM 为了对这些 HTML 元素进行修饰可方便的重用已有...

2014-10-15 14:01:59 133

jQuery延时插件doTimeout

在很多的具体应用中都需要使用事件延迟触发，具体实现上使用setTimeout 函数，但使用还是有很多的不方便，所以这里介绍一个jQuery插件doTimeout，这个插件可以实现setTimeout 一样的效果，而且使用简单，同时可以在timeout运行之前可强制执行回调函数等。支持jQuery的链式调用。使用实例一，包含文件部分可以500%提高开发效率的前端UI框架！ <s...

2014-10-14 16:02:02 156

关于两个div高度保持一致的（css+js）两种解决办法

最近修改以前写的一些代码，发现点问题。比如2个div需要动态的保持一致的高度。css的做法是：可以500%提高开发效率的前端UI框架！.代码 <div style="overflow:hidden"> <div id="left" style="margin-bottom:-10000px; padding-bo...

2014-10-14 14:18:26 1366

Javascript异步编程的4种方法

你可能知道，Javascript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一...

2014-10-10 15:45:36 109

CSS和Javascript的标签属性对应表

在写javascript中，经常要用到style对象的css属性，很多不记得其实很好记，基本就是CSS中的“-”转化为javascript的驼峰写法，除了注意下float盒子标签和属性对照颜色和背景标签和属性对照样式标签和属性对照文字样式标签和属性对照文本标签和属性对照可以500%提高开发效率的前端UI框架！ CSS语法（不区分大小写）JavaScript语法（区分大小写）...

2014-10-09 13:09:47 145

谈新窗口打开链接的合理方式

如果标题换做“用户体验”，感觉大了些，自己毕竟不是这方面的专家，在这里只是谈谈自己的感受。我还记得很早的时候自己学做网页制作，那时不晓得链接如何从新窗口打开，也不关心这些，因为网页只是起到一个宣传简介的作用，后来多了友情链接这个东东，是的，那时还没有多标签多选项卡的浏览器出现，大家都用着IE6之类的窗口浏览器，于是那时候大家养成了个习惯，就是打开一个页面，等浏览结束后下意识的去关浏览窗口...

2014-10-08 13:55:47 125

乔布斯与他的完美主义

"乔布斯买了一间不错的房子，但家里只有一幅帕黎思（Maxfield Parrish）的画作、一部百灵牌咖啡机和几把双人牌的刀子。他对家俱挑剔到了极点，一直找不到合意的，屋子也就空空如也，没有床、椅子，也沒有沙发。他的卧室简单至极：中央有一张床垫，墙上挂了爱因斯坦和印度圣师玛哈拉的裱框相片，一部苹果II号计算机就摆在地上。"乔布斯的个性特点就是追求完美，而且极其坚持。这种个性完全体现在苹果...

2014-09-30 13:52:54 1212

HTML5介绍，什么是HTML5

什么是HTML5？HTML5是HTML的新一代标准。以前版本的HTML标准4.01发布于1999。自1999年以后，web已经有了翻天覆地的变化。实际上HTML5仍旧是开发中的一个标准。但是很多主流的浏览器都开始支持HTML5的元素和部分API。如何使用HTML5？实际来说HTML5是World Wide Web Consortium(即W3C)和Web Hypertet Ap...

2014-09-29 15:57:19 119

jQuery对象与dom对象的转换

一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的，开始的时候不理解，现在此案知道，原来jQuery 获得的对象并不和我们平时使用getElementById获得的对象是一样的对象。所以一些新手就很迷惑，为什么${"#Element"}不能直接 innerHTML，这就是原因所在，解决方式请看下文。jQuery对象与dom对象的转换只有jquery对象才...

2014-09-26 14:20:21 87

HTML5/CSS3教程：使用SVG图片

在我们开始使用SVG前，让我们先了解一下 SVG，并且解释一下为什么使用SVG。SVG全称是Scalable Vector Graphics，如果你使用过adobe Illustrator的话，相信你对这种适量格式的图片并不陌生！为什么使用SVG？文件非常小能够无损失的缩放尺寸在Retina显示屏上效果超棒能够控制图片样式设计，例如互动和过滤...

2014-09-25 15:34:38 958

30个创意十足的博客设计欣赏

如今博客几乎无处不在，如果你的博客平淡无奇，那么失败是显而易见的，成功的博客设计一定能在前几秒钟深深的吸引用户的眼球。你的网站内容也许是你高质量的杀手锏，但是没有光鲜的外表，在这个快速运转的世界里面是很容易黯然失色的。下面这三十个博客设计显然在布局上面非常有创意，希望你能喜欢，并从中激发出属于自己的灵感。精心开发5年的UI前端框架！justBcoz ↓Ashley Tisd...

2014-09-23 14:37:35 601

红绿灯与设计规范

过马路的时候突然注意到红绿灯，恰好最近的新交通规则也热火朝天，就顺势吐槽下关于“设计规范”的思考。　　提到设计规范，很多人都觉得是个很虚、不务实的绩效工程，很多企业为设计规范而设计规范，拍脑袋定规则，投了精力进去，面子起来了，最后死掉了。以前也很不情愿去制定设计规范，经历多个终端的设计痛苦后，渐渐明白了设计规范“存在即合理”的意义。可以500%提高开发效率的前端UI框架！红绿灯...

2014-09-17 15:42:28 407

javascript和css实现垂直方向自适应的三角提示菜单

这是一个比较简单实用的菜单，最重要的是他不需要引用jQuery库。菜单在垂直方向上能做到自适应，当主菜单靠近顶部，子菜单将会在下面，当主菜单靠近底部，子菜单在上面。运用Modernizr的触摸检测功能，我们可以让子菜单的响应在pc上是hover，而在触摸设备上是点击。例子中还示范了如何在宽度比较窄的情况下如何调整布局。分享一个最好用的UI前端框架！html代码：.代码 ...

2014-09-15 16:25:25 320

响应式布局的5种模式以及不用响应式布局的理由

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的！Responsive Web Design可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅...

2014-09-11 15:05:13 266

19种非常精美的草木、树类轮廓的photoshop笔刷素材展示

这19种风景树和草轮廓的笔刷完全免费奉献给大家，这是从国外一个前端人员的博客上获得的，据他本人所说，这些素材来自于他亲自骑着自行车出去摄影采集而来。国内的素材网站往往难以找到这种优雅的素材。就图片本身而言，似乎充满了哥特式的暗黑风格。可以500%提高开发效率的前端UI框架！这19种风景树和草轮廓的笔刷完全免费奉献给大家，这是从国外一个前端人员的博客上获得的，据他本人所说，...

2014-09-10 13:34:08 575

现代和响应式免费的HTML5模板

现代和响应式免费的HTML5模板。具有：清洁和优雅的设计易于定制浏览器兼容性一切都免费UI前端框架最新力作！有奖试读下载地址：http://html5layouts.com/ UI框架分享...

2014-09-09 14:03:43 104

一名优秀的Web前端工程师的成长之路

我所遇到的前端程序员分两种：第一种一直在问：如何学习前端？第二种总说：前端很简单，就那么一点东西。我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。何为：前端工程师？前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。 Web前端开发...

2014-09-01 14:55:20 634

input readyonly disabled区别

看到网上大部分介绍的区别都是一个能点一个不能点，即readonly可获得焦点，disabled不可获得焦点。事实上，这只是直观的区别了，经过代码实践遇到的问题发现： disabled：除直观上的限制外，该被限制的对象值将不会被传递到后台程序。readonly:与后台交互时可以传递值。前端框架分享最好不要用disabled,不然就无法取出里面的值了. 区别：1...

2014-08-28 15:34:50 127

构建自己的JavaScript模板小引擎

有时候，我们不需要太牛逼太强大的JavaScript模板引擎（比如jQuery tmpl或者handlebarsjs），我们只是需要在简单的模板里绑定一些非常简单的字段，本文将使用非常简单的技巧来帮你实现这个小功能。首先我们先来定义我们需要的模板，在id为template的script块里：前端UI分享01<!doctype html>...

2014-08-28 14:43:12 101

jQuery中实现自定义方法的扩展

JQuery包装器提供了大量的方法，可以再页面中直接使用。但是，没有任何一个库可以满足所有的需求，所以，JQuery库提供了丰富的扩展功能。以禁用一组表单元素为例，看看怎么简单有效的在JQuery库中添加自定义的功能扩展。（JQuery没有禁用表单元素的方法哦）前端Ui资源上代码： [javascript] view plaincopy 1...

2014-08-27 17:10:15 290

原创 49个jQuery代码经典片段

49个jquery代码经典片段，这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法，另一些则是真正有用的函数或方法，他们能够帮助你又快又好地把事情完成。如果你发现你任何可以做得更好的地方的话，欢迎把你的版本粘贴在评论中!1. 如何修改jQuery默认编码（例如默认UTF-8改成改GB2312）：$.ajaxSetup({ a...

2014-08-27 16:56:55 145

原创非常精美的QQ桌面Web桌面模板（下）

4. jQuery满屏焦点图代码能在支持 FireFox、Chrome、Safari、傲游、搜狗、360浏览器。源码下载/ 在线演示 5. jquery模拟windows桌面源码下载 / 在线演示 6. jquery仿WebQQ菜单ui界面源码下载 / 在线演示7. Jquery苹果桌面显示 ...

2014-08-20 16:59:58 256

原创非常精美的QQ桌面Web桌面模板（上）

1. jQuery UI实现Web桌面系统jWebOS 源码下载 / 在线演示 2. jQuery图片滑动切换源码下载 / 在线演示3. jQuery大屏带导航焦点图源码下载/ 在线演士...

2014-08-20 16:42:15 241

原创几种精美的jQuery幻灯插件

1. jquery背景图片轮播特效效果源码下载 / 在线演示 2. jquery上下左右图片轮播特效源码下载 / 在线演示 3. 三维效果jquery图片轮播特效源码下载/ 在线演示 ...

2014-08-20 15:39:52 163

原创探索Java语言与JVM中的Lambda表达式

Lambda表达式是自Java SE 5引入泛型以来最重大的Java语言新特性，本文是2012年度最后一期Java Magazine中的一篇文章，它介绍了Lamdba的设计初衷，应用场景与基本语法。(2013.01.02最后更新)　　Lambda表达式，这个名字由该项目的专家组选定，描述了一种新的函数式编程结构，这个即将出现在Java SE 8中的新特性正被大家急切地等待着。有时你也会听到人...

2014-08-19 17:20:19 70

原创简单十招提高jQuery执行效率

1. 使用最新版本的jQuery jQuery的版本更新很快，你应该总是使用最新的版本。因为新版本会改进性能，还有很多新功能。下面就来看看，不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句：　　$('.elem') 　　$('.elem', context) 　　context.find('.elem') 我们用1.4.2、1.4.4、1.6.2三个版本的jQuer...

2014-08-19 17:02:43 76

原创美观实用值得收藏的Web前端日期控件的实现（下）

4. jQuery日历插件CLNDR能在支持 FireFox、Chrome、Safari、傲游、搜狗、360浏览器。源码下载/ 在线演示 5. 多款不同样式jQuery日历插件源码下载 / 在线演示 6. jQuery datePicker日历控件源码下载 / 在线演示7. 支持添加事件jQuery日历源码下载...

2014-08-19 13:17:45 576

原创美观实用值得收藏的Web前端日期控件的实现（上）

1. JS日历选择器控件源码下载 / 在线演示 2. jQuery响应式事件日历表源码下载 / 在线演示3.pikaday轻量级日期选择插件源码下载/ 在线演示...

2014-08-18 15:16:45 492

原创 6个漂亮的Web前端表单提交以及搜索框（下）

4.jQuery圆形修边注册表单能在支持 FireFox、Chrome、Safari、傲游、搜狗、360浏览器。源码下载/ 在线演示 5. HTML5超酷表单展示效果源码下载 / 在线演示 6. 纯CSS3实现的紫色登录表单源码下载 / 在线演示...

2014-08-18 13:59:04 1905

原创 6个漂亮的Web前端表单提交以及搜索框（上）

1. 纯CSS3实现动画搜索框源码下载 / 在线演示 2. js text文本框字数限制源码下载 / 在线演示3.jQuery动态下拉登陆提示框源码下载/ 在线演示 ...

2014-08-18 13:05:08 1178

原创几个Web前端经典使用的炫丽进度条（下）

4.漂亮的jQuery橙色进度条插件能在支持 FireFox、Chrome、Safari、傲游、搜狗、360浏览器。源码下载/ 在线演示 5. HTML5实现简单进度条效果源码下载/ 在线演示 6. CSS3个人技能进度条源码下载/ 在线演示...

2014-08-13 17:59:06 762

原创几个Web前端经典使用的炫丽进度条（上）

1. jQuery带圆形进度条倒计时源码下载 / 在线演示 2. jQuery网站页面加载进度条源码下载 / 在线演示3.13款页面加载样式特效源码下载/ 在线演示...

2014-08-13 17:25:15 641

原创几种非常精美的Web前端标签效果展示（附源码)（下）

3. jquery自定义添加标签jquery实现的，会在当鼠标光标移动到接近（或通过）视口（viewport）的顶部的时候触发。源码下载/ 在线演示4. jquery标签云无规则样式能在支持 FireFox、Chrome、Safari、傲游、搜狗、360浏览器。源码下载/ 在线演示 5. jQuery metro风格的文字标签云...

2014-08-13 15:47:08 952

原创几种非常精美的Web前端标签效果展示（附源码)（上）

1. Tag标签管理jQuery插件玩法介绍：可以随意拖动鼠标、按住鼠标左键选中旋转物体、或者按住鼠标滑轮放大或者缩小，有不同的效果，赶紧来体验一下。源码下载 / 在线演示 2. jquery标签回车自动完成这个插件集成了一些非常好的 JavaScript 库，提供一个方便使用的文本动画插件。源码下载 / 在线演示...

2014-08-13 15:07:17 1252

原创值得收藏的Web前端精美相册图片展示（下）

4. jquery图片相册插件能在支持 FireFox、Chrome、Safari、傲游、搜狗、360浏览器。源码下载/ 在线演示 5. js向上推送幻灯片源码下载 / 在线演示 6. jQuery画廊插件源码下载 / 在线演示7. jquery图片闪光幻灯片源码下载/ 在线演示...

2014-08-13 14:00:15 600

原创值得收藏的Web前端精美相册图片展示（上）

1. js双箭头焦点图源码下载 / 在线演示 2. jquery斜对角相册源码下载 / 在线演示3.163网易图片新闻jQuery幻灯片源码下载/ 在线演示...

2014-08-12 17:49:38 1588