设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

15个响应式的jQuery UI组件的代码片段和模块

2014-9-9 10:41| 发布者: joejoe0332| 查看: 3845| 评论: 0|原作者: htfy96, BadGuy, 潘光华, 无若|来自: 开源中国社区

摘要: 随着响应式网页设计逐渐进化成每个网站必备的一部分,越来越多的用户界面问题在设计面向手机、平板的网站时涌现。在下面的展示中,我们展现了15款新生的响应式JQuery代码片段,它们能增强用户在手机、平板或是普通的 ...


Slinky.js

Slinky.js

  Slinky.js 是一个用于创建优雅的带堆叠头的滚动导航列表的jQuery插件。当你在浏览器上体验它的时候,它会创建了一个类似移动设备的环境。因为它是轻量级的(大约1KB),它能带给你一个平滑的令人舒适的体验,并且它能与你最喜爱的浏览器的最新版本兼容。

用法:

  在jQuery之后,使用script标签引入下载的文件,然后在你想激活Slinky的jQuery元素上调用.slinky()方法。


GoalProgress

GoalProgress

  GoalProgress是一个允许你使用jQuery创建一个动画进度条的插件。填入必填项后,该插件会自动计算你当前的进度,并且用动画效果展示进度条。你可以在显示的数字前后指定显示文字。在各种事件或者活动的捐赠活动上,用该插件来显示捐赠情况是非常棒的。

用法:

  你所需要做的就是引用该脚本的样式文件,在页面上创建一个空的html div元素然后初始化该脚本即可。


表单与输入类

Card

Card

  如果你在开发一个电子商务项目,这款轻量级却优美的代码片段就是你所需要的。Card 仅仅用一行的代码,你就能展现出用户需要输入的信用卡信息。创建支持4种卡的动画效果,给用户提供直观的体验,所有这一切都是免费与开源的。

如何使用:

  在你的HTML中包含并引用需要的文件。初始化脚本然后在你的当前表单中创建或者替换输入的值,从而让它们具有响应式的样式。


Unibox

Unibox

  Unibox是一款jQuery插件,它支持通用的搜索框用来提供基于查询的搜索提示。它提供丰富多样的内容展现方式-从链接到图片或者任何其他元数据-这些在用户提交标签后都会被展示。


如何使用:

  Unibox的安装有一点点复杂但没那么困难。在需要配置的页面引入脚本和CSS文件,并且安装服务端/客户端插件。由于该插件的运行方式是提供搜索提示,所以你除了在客户端安装脚本,在服务端也需要有对应的数据格式来支持。



酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部