随着响应式网页设计逐渐进化成每个网站必备的一部分,越来越多的用户界面问题在设计面向手机、平板的网站时涌现。 在下面的展示中,我们展现了15款新生的响应式JQuery代码片段,它们能增强用户在手机、平板或是普通的浏览器上的用户体验, 用户界面类 MultiScroll Multiscroll 是一款强劲的JQuery插件,它能允许你创建分离的、有两个竖直滚动条的页面。它的强劲功效不仅体现在所有现代浏览器上(甚至IE8它也支持),还适用于移动设备和平板。这款插件能让你即使是在响应式网站上也能利用这个华丽的效果。 如何使用: 实现这个效果很简单。所有你需要做的就是在<head>标签内引入脚本文件,然后把剩下的代码放在<body>标签内。 TourTip TourTip 是一种网页元素的交互式可视化指南。TourTip可以替代静态帮助信息接口或者是解释文本,通过添加一个页面指引,让用户更容易了解产品的新特性和新功 能。TourTip对于那些有关新产品或者介绍服务,又或者是帮助指南的一些介绍性网站或者登录页面都是非常有用的。其直观的界面使其解释任何事情都易如 反掌。 用法: TourTip可以根据用户的需求来定制构建,允许你“玩耍"多个变量,你仅仅只需要根据你的目的或者需求来调整它即可。 jQuery Tilted Page Scroll 这个高级的jQuery代码片段允许你使用一个页面滚动插件来创建一个三维倾斜的滚动效果。这个效果看起来很简单但是它对于你的博客或者是摄影集或者是组合网站来说,是一个非常好的体验。兼容性测试在现在的浏览器都测试通过了,当然不包含IE。 jQuery Tip Cards 该代码片段帮助你创建一个供用户翻阅的卡片布局集合。这个想法是非常有趣,它已经被Google的“Tips”项目实现。这个代码片段有许多不用的用途,你可以用它展示你最新的博客帖子,portfolio items,网页游戏等。 用法: 根据翻转卡的性质,你可以使用栈的方式存储内容,效果非常的棒!在head中连接脚本,同事把回调函数放到footer里。 Slinky.js Slinky.js 是一个用于创建优雅的带堆叠头的滚动导航列表的jQuery插件。当你在浏览器上体验它的时候,它会创建了一个类似移动设备的环境。因为它是轻量级的(大约1KB),它能带给你一个平滑的令人舒适的体验,并且它能与你最喜爱的浏览器的最新版本兼容。 用法: 在jQuery之后,使用script标签引入下载的文件,然后在你想激活Slinky的jQuery元素上调用.slinky()方法。 GoalProgress GoalProgress是一个允许你使用jQuery创建一个动画进度条的插件。填入必填项后,该插件会自动计算你当前的进度,并且用动画效果展示进度条。你可以在显示的数字前后指定显示文字。在各种事件或者活动的捐赠活动上,用该插件来显示捐赠情况是非常棒的。 用法: 你所需要做的就是引用该脚本的样式文件,在页面上创建一个空的html div元素然后初始化该脚本即可。 表单与输入类 Card 如果你在开发一个电子商务项目,这款轻量级却优美的代码片段就是你所需要的。Card 仅仅用一行的代码,你就能展现出用户需要输入的信用卡信息。创建支持4种卡的动画效果,给用户提供直观的体验,所有这一切都是免费与开源的。 如何使用: 在你的HTML中包含并引用需要的文件。初始化脚本然后在你的当前表单中创建或者替换输入的值,从而让它们具有响应式的样式。 Unibox Unibox是一款jQuery插件,它支持通用的搜索框用来提供基于查询的搜索提示。它提供丰富多样的内容展现方式-从链接到图片或者任何其他元数据-这些在用户提交标签后都会被展示。 如何使用: Unibox的安装有一点点复杂但没那么困难。在需要配置的页面引入脚本和CSS文件,并且安装服务端/客户端插件。由于该插件的运行方式是提供搜索提示,所以你除了在客户端安装脚本,在服务端也需要有对应的数据格式来支持。 Vanillabox Vanillabox是一款简单又现代的lightbox式样的JQuery插件,能被用于轻松的建立起一个图像画廊。它有着简单、最小化的设计,适用于所有现代浏览器。它是许多相似功能的插件中安装简单、轻量级的一款,可被用于替换之前已用的插件。 如何使用: 安装非常简单。仅仅把script和css在<head>中导入然后调用脚本就行了。 Media ToneDen Player ToneDen是一款纯js定制的音频播放器。它有一个完全可定制的界面,给你一连串的配置项来提升你的听觉体验。简易简洁的界面是赏心悦目的,并且也不会在页面上带来任何的混乱。 如何使用: 由于展示和播放音乐的方式有许多不同,所以定制播放器的方法也有很多。当谈到播放器的配置项时候,开发者做了一个很棒的工作,使得可以容易的使用它,它确实是相当高级先进。使用脚本来满足基本的需求,或对照文档来使用更多高级的配置。 Pizza Pie Charts 这款代码片段允许你在任何设备上呈现出一个pizza样式的图表。它是一款使用简便的插件,既能和Zurb的响应式框架契合,也能作为单独的脚本而 工作。关于这个插件没有什么可以介绍的,因为它仅有的一个选项就是展示pie或者开发者所称的pizza图表。这款插件十分优秀、方便使用与自定义,以至 于在这篇文章中如果不把它包含进来就是个错误。 用法: 引用css和js文件,然后你就已经拥有了一个基本的pie图表,但是别忘了HTML。 导航类 Fly Side Menu 如果你想创建一个由Airbnb驱动的菜单,这款插件就是你所需要的。它完全免费,兼容主流浏览器与移动设备。 用法: 这款插件给了你一点实验与自定义的空间,但是谨记:基础的选项虽然某种意义上限制不少,但是对于简单场合还是够用了的。 Hashtabber Hashtabber 是一款用于hashchange驱动的标签式内容选择器的JavaScript插件。考虑到它也适用于移动设备,你有多种方式来利用这款插件。它包括了一些预设定的主题以及一些自定义的方法。 用法: 在HTML中分别链接各个文件,然后建立一个HashTabber的section。 Headhesive.js Headhesive.js创建一个按需粘性标题头( on-demand sticky header)。指定你想要固定的header,剩余的部分就会变得不可思议。使用很简单,有用的代码片段用于创建动画和粘性导航栏。 如何使用: 在你的文件夹里,提供了JavaScript文件和调用它们的脚注。 Anchorific.js Anchorific根据标题标签(header […]
View Details1. Dryicons Dryicons提供总数 500 个图标和 1700 个向量图标。 2. Raindropmemory 这组图标是由Raindropmemory设计 3. Glyphish Glyphish用于 iOS 应用的 Tab 条、导航条、表格等图标,也适用于其他手机平台。 4. Application Icon Set Application Icon Set有 10 个蓝色图标设计,特别使用 Web 应用,使用 3D 的设计效果 5. Smashingmagazine Smashingmagazine是由 Smashing 杂志设计的图标集 6. Monofactor Monofactor包含 25 个可缩放的 Illustrator 格式的图标 7. Sekkyumu 包含 105 个 32 x 32 的图标,主要用于工具栏 8. Mini Mini包含 144 个 GIF 小图标 9. Androidicons Androidicons主要用于安卓的应用。 10. Cute Blogging Icon Set Cute Blogging Icon Set是非常可爱的博客图标,可以让你的博客看起来很棒、专业而且有创意。 via developerslane FROM:http://www.oschina.net/news/54982/10-cool-icon-sets-for-app-design
View Details当我跟人说我是一个Web程序员,他们会认为我是个天才。当我告诉他们我工作的公司是编写火狐浏览器的,他们认为我跟上帝一样伟大。我可以想象,其 他的程序员也会跟我一样受到这样的待遇。这些话我并不是要跟自己说,或说给我们圈内人听,我说这些是因为很多圈外人对我们的编程没有任何概念。 甚至在业内,一些程序员对另外一些程序员也是高山仰止。在我的眼中,Mozilla公司里很多其他程序员简直就是传奇,而事实上,很多时候,他们真是。就是这个原因,我们程序员中很多人只才会患上骗子综合征,就是这个原因,我们才害怕加入OSS项目,害怕在开发大会上和明星程序员们站在一起。 下面这个漫画展示了人们眼中的编程生活和实际编程生活的区别: 我们经常会在编程时犯愚蠢的错误。我们整天盯着屏幕看,寻找一行让我们的应用无法启动的代码。我们诅咒浏览器为什么不能正常显示页面,却发现是一行明显的错误造成的。每个程序员都有这种时刻,冥思苦索是每天的例行活动。 这是程序员的真实生活。 英文原文标题是:The Truth About Programming Perception。 稿源:程序师网 FROM:http://www.oschina.net/news/54978/truth-programming-perception
View Details一.数值数据类型 数字或数值数据在PHP中一般就两种double和int。 PHP是一种松散类型的脚本语言,要注意类型转换的方式。 .代码如下: <?php $a = '5'; //数字的字符串也是数字,参与数学运算当数字处理 echo is_numeric ( $a ); //1 echo '<br/>'; echo 7 + $a; //12 echo '<br/>'; echo '7' + $a; //12 echo '<br/>'; //用.连接后就按字符串处理 echo '7' . $a; //75 ?> 二.随机数 Rand()函数是libc中定义的一个随机函数的简单包装器。 Mt_rand()函数是一个很好的代替实现。 .代码如下: <?php $a = rand(0,10); echo $a; echo '<br/>'; echo getrandmax(); echo '<br/>'; $b = mt_rand(0,10); echo $b; echo '<br/>'; echo mt_getrandmax(); echo '<br/>'; ?> output 1 32767 6 2147483647 三.格式化数据 .代码如下: <?php $a = 12345.6789; //用于设置保留多少位小数点 echo number_format($a,2); echo '<br/>'; //也可以改变默认小数点的符号表示和千分位的表示符号 echo number_format($a,2,’#',’*') ?> Output 12,345.68 12*345#68 四.数学函数 函数 功能 Abs() 取绝对值 Floor() 舍去法取整 Ceil() 进一法取整 Round() 四舍五入 […]
View DetailsEclipse中全局搜索和更替 Eclipse全局搜索步骤 使用快捷键“ctrl+H”打开文件搜索对话框,选择“File Search”标签,在Containing text中输入你需要搜索的字符串,在Scope中,选择你要搜索的范围,点击Search。 在Search视图中,会列出搜索得到的结果,点击打开属性结构。双击搜索结构,就会显示源代码中的搜索结果。 Eclipse全局替换步骤 在全局搜索到目标字符串后,在Search视图中,选择搜索到目标字符串,右键->Replace All,弹出对话框。在With:当中,填写需要更改的字符串。点击Replace按钮。 from:http://blog.csdn.net/p106786860/article/details/9162537
View Details