`

【转】html开发必备js

 
阅读更多


移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行。jQuery Mobile这样一款基于jQuery和jQuery UI的框架,继承了jQuery的“write less,do more”精髓,具有良好的扩展性和可定制性,全面兼容各种平台设备,对于不支持的手机类型,也会予以基础样式。

本文细数了15款非常优秀而又实用的jQuery Mobile插件,类型甚广,从日期/时间选择、即时声音通知、抽屉式导航菜单、iOS style、手风琴导航、隐藏/显示密码、灯箱特效,到颇为酷炫的交互式地图、页面震动、Native、相册/画廊展示等,总有那么一款会让你着迷。

1. Mobiscroll

对于许多开发者而言,Mobiscroll并不陌生,甚至可以说是相当熟悉。Mobiscroll是一款很不错的jQuery Mobile插件,主要用于触屏设备的旋转滚动/日期和时间选择。通过它,用户只需滑动数字即可进行日期和时间选择(点击链接查看Demo)。

Mobiscroll不仅支持任意自定义值,让用户完全自定义主题,还可用于下拉列表本地选择控制。此外,使用起来也是非常方便,不仅为开发者提供了相当高大上的配色方案,而且可完全通过CSS文件进行样式修改。支持包括iOS、Android、WP8、Windows 8、BlackBerry等在内的所有主流移动及桌面浏览器。

2. Ion.Sound

今时今日,无论是Web还是移动网站,都充斥着各种各样的事件,比如新邮件、新聊天信息、内容更新等。但却常常存在着这样一个问题,就是即时通知无法立即引起用户注意。而通过Ion.Sound插件,则可以很好地实现这一任务。

Ion.Sound是一款用于播放事件声音的jQuery插件,采用MIT许可证,包含有25种免费声音。截至目前,Ion.Sound已成功运用于Google Chrome、Mozilla Firefox、Opera、Safari、IE(9.0+)等桌面浏览器,并支持所有主流移动浏览器。

3. jQuery.mmenu

jQuery.mmenu是一款用于创建平滑的抽屉式导航菜单的jQuery插件,只需短短一行JavaScript代码,即可在移动网站中实现类似于移动App外观的非常酷炫的滑动菜单。

通过jQuery.mmenu,开发者可以将无序列表转换成菜单项,并进行自定义设置。jQuery.mmenu不仅为开发者提供了诸如打开、关闭、切换等常用菜单的定制,还提供了菜单位置(居左/居右)、是否显示菜单项计数器等选项的设置。

4. Naver

Naver是一款专门用于创建响应式导航的jQuery插件。通过它,开发者可以轻易地制作出对移动端非常友好的导航效果,还可制作动态导航。Naver兼容Firefox、Chrome、Safari、IE(7+),基于MIT许可证发布,无论是个人或商业项目中,均可自由免费使用。

5. iosOverlay.js

iosOverlay.js是一款用于创建iOS风格的提示/通知效果的jQuery插件,支持IE7+、Google Chrome、Firefox、Opera、Safari(桌面版及移动版)。需要提醒的是,如果想要防止图标在加载时闪烁,开发者需要预加载图像资源。

此外,iosOverlay.js还存在两个可选的依赖项,即Spin.js和jQuery。如果开发者想使用其下拉列表对象,就必须要用到Spin.js,而对于不兼容CSS动画的浏览器,则需jQuery提供支持。

6. Easy Responsive Tabs

Easy Responsive Tabs是一款轻量级的响应式Tab选项卡/手风琴导航jQuery插件,支持同一页面使用多个范例,跨平台支持Web、平板电脑及移动设备。该插件能够自适应屏幕大小,默认样式为水平/垂直Tab选项卡,随着窗口变小,会自动切换为手风琴样式。

7. Hide/Show Password

Hide/show Password插件可以让你轻易隐藏和显示密码输入框中的内容。该插件最酷的地方就是“innerToggle”选项。当设置为开时,开发者可以自定义创建非常漂亮的隐藏/显示控件。而且在触屏浏览器中进行滑动时还可保持输入焦点。

8. Swipebox

Swipebox是一款精美的jQuery灯箱特效插件,可用于桌面、移动和平板设备。在移动设备上,支持滑动手势导航,而在桌面上则可使用键盘导航。不支持CSS3过渡特性的浏览器可使用jQuery降级处理,支持视网膜显示,能够通过CSS轻松定制。

当用户点击目标图片时,照片将会以全尺寸的方式展示,此外,用户还可对同组的图片进行左右切换来进行查看,非常适合用于做照片画廊以及查看大尺寸图片。

分享到:
评论

相关推荐

    js开发必备工具

    在进行JavaScript开发时,掌握一些必备的工具可以极大地提高开发效率和代码质量。下面将详细介绍这些关键工具。 1. **文本编辑器/IDE**: 对于JavaScript开发,选择一个功能强大的文本编辑器或集成开发环境(IDE)至...

    html页面开发必备

    综上所述,"html页面开发必备"涵盖了HTML5、JSP、DHTML和CSS2以及JavaScript等关键技术,这些都是创建现代B/S应用前端页面所不可或缺的。通过深入学习这些知识点,开发者能够构建出功能强大、交互丰富且用户体验优秀...

    前端开发必备JavaScript(含源码课件笔记总结)

    这份“前端开发必备JavaScript(含源码课件笔记总结)”的资源集合是前端开发者不可多得的学习材料,包含了丰富的知识内容,旨在帮助你深入理解和掌握JavaScript。 一、JavaScript基础 在JavaScript的学习中,首先...

    网页开发必备文档含html,css,js,dom

    网页开发是创建交互式、动态和视觉吸引人的网站的过程,涉及多个关键技术领域,包括HTML、CSS、JavaScript和DOM。这些技术构成了现代网页的基础,并且对于任何想要投身于这个领域的开发者来说,都至关重要。 HTML...

    JAVA、PHP、JS(JAVASCRIPT DOM)、HTML、XML、CSS、W3C、正则表达式、WEB开发人员必备CHM工具手册大全打包下载-PART2(完)

    JAVA、PHP、JS(JAVASCRIPT DOM)、HTML、XML、CSS、W3C、正则表达式、WEB开发人员必备CHM工具手册大全打包下载.rar 这里是我个人在WEB开发7年来,收集的CHM工具手册中精选出来的,每个都是精品中的精品,个人认为...

    three.js开发必备(内附开发指南和three.js多版本)

    《three.js开发必备》资源包含了三个关键组成部分:THREE.JS开发指南的PDF文档和多个版本的three.min.js库。这个资源对于想要深入理解和实践three.js的开发者来说是极其宝贵的。 首先,我们来探讨THREE.JS开发指南...

    JS_JQ_HTML我的三个手册WEB开发必备

    这份"JS_JQ_HTML我的三个手册WEB开发必备"压缩包包含了关于这些技术的重要资料,对于开发者来说是极其实用的学习资源。 首先,JavaScript是Web开发的核心语言,它负责网页的动态功能和用户交互。JavaScript手册可能...

    web开发必备的js控件包

    "web开发必备的js控件包" 提供了一系列的JavaScript组件,这些组件可以帮助开发者快速构建功能丰富的网页应用,减少从零开始编写代码的工作量。 首先,让我们详细了解一下JavaScript控件。JavaScript控件,也称为UI...

    web 前端开发必备材料包含html,css,JavaScript

    在Web前端开发领域,HTML、CSS和JavaScript是构建网页和交互式用户体验的三大核心技术。以下是对这些关键知识点的详细介绍: 1. HTML(HyperText Markup Language):HTML是构成网页的基础,它定义了网页的结构和...

    Html-Js代码互转便利工具

    HTML和JavaScript是Web开发中的两种基础语言,它们在构建交互式网页方面发挥着关键...此外,了解HTML和JavaScript之间的转换原理也有助于提升开发者对Web开发的理解,尤其是对于前端工程师来说,这是必备的技能之一。

    Web开发必备资料.rar

    标签再次确认了这是与Web开发相关的资料,可能包含前端技术(如HTML、CSS、JavaScript)、后端技术(如PHP、Java、Python、Node.js)、Web框架(如React、Angular、Vue.js)、数据库知识(如MySQL、MongoDB)以及Web...

    Ajax+HTML+JS+CSS网站开发必备9本书

    在网页开发领域,Ajax、HTML、JavaScript和CSS是构建交互式和动态网站不可或缺的技术。这九本书涵盖了这些关键领域的深入知识,旨在帮助开发者提升技能,创造更具吸引力和用户体验的网站。 1. **Ajax(异步...

    javaScript 中文开发文档

    13. **Node.js**:JavaScript还可以通过Node.js在服务器端运行,构建高性能的网络应用,利用其非阻塞I/O和事件驱动的模型。 14. **框架和库**:JavaScript社区有众多框架和库,如React、Vue、Angular用于前端开发,...

    web 开发必备,HTML JAVASCRIPT 全面API、例子及帮助文档

    在Web开发领域,HTML(HyperText Markup Language)和JavaScript(JS)是不可或缺的基石,它们共同构建了我们日常浏览的网页交互体验。本资源包包含了关于这两种语言的全面API、实例以及帮助文档,旨在为B/S...

    HTML&JS相互转换工具 v1.0.1

    HTML和JavaScript(JS)是网页开发中的两种基础技术。HTML(HyperText Markup Language)负责页面结构,而JavaScript则处理交互性和动态功能。"HTML&JS相互转换工具 v1.0.1"是一个实用的开发辅助工具,它允许开发者...

    php dhtml html javascript css 等 网页开发必备说明书

    网页开发是互联网时代的核心技能之一,涉及多种技术的综合运用,包括PHP、DHTML、HTML、JavaScript和CSS等。这些技术各有其独特的作用,共同构建了丰富多彩的网页内容和交互体验。 首先,PHP(Hypertext ...

    开发必备,web常用小工具

    本篇文章将深入探讨标题“开发必备,web常用小工具”所涵盖的一些关键知识点,包括代码格式化、代码压缩、页面布局以及HTML转换。 首先,**代码格式化工具**是开发者的得力助手,它们可以帮助开发者保持代码整洁、...

    前端开发必备开发手册.zip

    《前端开发必备开发手册》是一份综合性的资源,旨在帮助前端开发者提升技能,掌握现代Web开发的核心技术。这个压缩包包含了一份参考手册,涵盖了前端开发的基石——HTML、CSS和JavaScript,这些都是构建交互式Web...

    JS素材 包含大量JS实例 是网站开发人员的必备资料

    JavaScript,简称JS,是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发,尤其是前端开发领域。本JS素材压缩包包含了丰富的JS实例,是网站开发人员学习和提升JavaScript技能的重要资源。 首先,我们要...

    jquery开发必备jquery开发包

    这个“jquery开发必备jquery开发包”包含了用于高效开发jQuery应用的资源和工具。 首先,jQuery的核心库是开发工作的基石。它提供了一系列的函数,使得开发者能够快速选择和操作DOM元素,轻松实现页面元素的动态...

Global site tag (gtag.js) - Google Analytics