随笔分类 -  jQuery插件

摘要：一、插件功能用于对图片进行修剪。但是在使用Jcrop时，还需要配合服务器端开发语言（如asp.net,php等）使用。二、官方地址http://deepliquid.com/content/Jcrop.html在官方地址中有5个demo,在这5个demo中，有3个带有代码说明。有1个提供了完整的实例，前端(js)与后台（php）交互，修剪图片并显示。而本次测试时，后台使用的是asp.net来修剪图片。在文章的下面有完整的测试代码可供下载。官方Demo也可以下载，但是下载下来的文件包含js代码很多，作者可能是为了演示jcrop的完整功能，所以包含了尽可能多的代码。其实我们在使用时，应该只会涉及到 阅读全文

摘要：一、使用的插件一个折叠的功能导航，由Akordeon插件实现。Nanoscroller插件与Tagit插件主要用于美化页面。这里只是测试，其实还可以综合使用其它的插件，例如将Akordeon插件换成菜单插件，而且也可以使用jquery ui，之所以没有使用jquery ui，是因为修改jquery ui 的style对我来说比较复杂，所以没用。还有用户添加分类信息时如果需要弹出一个层，可以使用Lightbox_me插件实现。如用户输入的内容比较多，浏览器可能会有滚动条显示，我们可以使用scrolltofixed插件固定”导航”。因为在以前的文章中测试过Lightbox_me和scrolltof 阅读全文

摘要：一.scrollto插件功能scrollto用于定位页面中元素的位置，并使滚动条滚动到当前元素。二.scrollto官方地址https://github.com/flesler/jquery.scrollTo在官方地址中并没有特别详细的说明，只是说插件可以按x轴、y轴滚动。可以嵌套元素，当前元素在父元素中滚动。官方提供demo下载，在demo中有应用案例，如在父元素中滚动，滚动定位的间隔时间等。三.scrollto使用方法1.文件引用。只需引用两个js文件，一个jquery,一个插件功能文件。2.css样式文件。插件自身不需要使用样式3.js代码。插件使用非常简单，如：//定位到当前页面wra 阅读全文

摘要：这个插件在前段时间用过一次，当时是改一个网站。要求顶部的菜单栏随着滚动条的滚动而固定。也大体写了一下，不过在文章中也只是提了一下，文章地址：jQuery插件固定元素位置。 在这篇文章中，再进行总结一下。一.scrolltofixed插件功能固定某个元素的位置，在页面滚动时，元素仍然显示。二.scrolltofixed官方地址https://github.com/bigspotteddog/ScrollToFixed。在官方地址上有使用说明，在下面有插件的属性方法说明。demo中也有详细的用例，可以下载下来看下。三.scrolltofixed使用方法scrolltofixed插件的使用范围还是比 阅读全文

摘要：网站对于菜单的依赖其实并不是很大，我们完全可以不使用菜单来设计网站，显示网站内容。但是如果网站的分类太多，“也许”使用菜单作为网站导航可以使 用户 更方便的寻找内容。superfish插件就是用于实现菜单的功能。但是在使用superfish时，与自身网站整合、superfish样式设置是不可避免的。因为官方只给出了怎么使用插件，并且提供了一个简单的样式。如下图：在我以前的使用中，superfish不符合我的需求，所以我对superfish的样式进行了修改。在本文中，我会提到怎样修改superfish的样式，只是简单的举个例子，不注重颜色的搭配。一.superfish插件功能实现下拉式菜单功能。 阅读全文

摘要：一.pageslide插件功能实现现实隐藏侧边栏的功能。插件可以读取另个一html,也可以是当前页面中的元素。二.pageslide官方地址http://srobbin.com/jquery-plugins/pageslide/官方地址上有demo,可以测试下使用效果三.pageslide使用方法pageslide使用非常简单，需要的操作有：1.侧边栏的样式，在jquery.pageslide.css文件中，只有几条语句修改非常方便。2.引用jquery与jquery.pageslide.css，jquery.pageslide.js文件。但是在jquery.pageslide.js文件中，定 阅读全文

摘要：一.Tagit插件功能提高网站交互性，增加用户体验。至于其它的功能，还真没有。用一个input text就可以替换了它。但是text没有输入提示功能，而tagit拥有这个功能。官方示例如下图：将关键词标签化，成为一个整体。方便删除与浏览。二.Tagit官方地址http://aehlke.github.io/tag-it/官方地址上有使用说明，也有用例。用例的颜色搭配也可以选择。不过选来选去也就是这几种，Tagit插件使用jqueryui，所以jqueryui提供的样式也兼容。jqueryui也是jquery的插件，提供了功能非常的界面元素。jqueryui也提供了一些样式供我们选择，但是选来选 阅读全文

摘要：一.backstretch插件功能优化网站外观。主要用于设置页面背景图片，也可以设置html元素的背景图片。背景图片可以设置多张，在间隔时间内循环显示。注但是在设置背景图片时，如果图片过大，网站使用的资源又受到限制时，应压缩图片的大小。不然图片的加载会非常缓慢。我测试了官方网站的demo，图片都比较大，有的图片在400kb以上，在虚拟空间中打开网站，图片加载有点慢。插件demo的截图效果不明显，所以不在本文贴出，大家可以去官方看demo演示，或在本文的下面，也有我测试这个插件的用例，可以看一下，中文演示。测试用例使用的图片来自于网络，并且大小都在100kb以上，使用官方图片一张。由于只是测试插 阅读全文

摘要：我们开发的网站，总有它一定的用途。如企业站用来宣传企业或展示产品，技术站用来分享自己的思路和经验。既然网站有了它的用途，那么就拥有了它本身的关键词(关键词说明网站的主要内容)。例如企业站的关键词大部分是企业名称或产品名称，技术站的关键词大部分是技术术语。不论是企业宣传产品或分享思路经验，我们都想给某些术语加上说明或链接（跳转到术语页面），这时我们就可以使用cluetip插件。1. cluetip插件功能主要用于为某些关键词添加提示说明功能，也可以展示广告。cluetip插件可以读取另一个html文件中的内容，如关键词会读取ajax3.html页面的内容官方地址demo中有使用说明。2.clue 阅读全文

摘要：网站在展示信息时，如果信息量过大，解决方法主要有三种。1.分页，将信息分页显示。2.整页显示，但是页面过长，影响浏览体验。3.使用滚动条，而默认滚动条样式太单一，用户体验不友好。所以我们需要美化滚动条。美化滚动条最简单的方式就是使用jquery插件，本文介绍的就是jquery插件中的滚动条插件nanoscroller.官方展示,样式可自定义1.nanoscroller插件功能对内容实现滚动功能2.nanoscroller官方地址http://jamesflorentino.github.io/nanoScrollerJS/3.nanoscroller使用方法1.引用文件2.定义滚动条样式.na 阅读全文

摘要：在网站开发过程中，有时我们需要验证用户输入的信息是否符合我们的要求，所以我们会对用户提交的数据进行验证。验证分两次进行，一次是在客户端，一次是在服务端。客户端的验证可以提升用户的体验。jquery验证插件有很多，实现的功能也基本相同。本文介绍的只是jquery验证插件中的一种jquery.validate1.jquery.validate插件功能简单实现客户端信息验证，过滤不符合要求的信息2.jquery.validate官方地址官方地址：http://jqueryvalidation.org/,有详细的插件使用说明官方demo：http://jquery.bassistance.de/val 阅读全文

摘要：1.gridster插件功能实现类似于win8 磁贴拖拽的功能2.gridster官方地址http://gridster.net/在官方的网站上也有插件的帮助和实例，但是按照官方的说明，我在本地测试总是出现这样那样的问题，一是无法移动，二是在磁铁的附近有一个黑点，可能是定位使用的。但是如果在网站中正常使用，应该不会出现这样的黑点。gridster插件的属性和方法在官网上有详细说明。经过测试了一下，最后终于解决了问题。效果显示如下：3.gridster使用方法1.首先引用js文件2.用到的css.handle { border-bottom: 1px solid black;}.small... 阅读全文

摘要：网站开发过程中，为了增加网站交互效果，我们有时需要在当前页面弹出诸如登陆、注册、设置等窗口。而这些窗口就是层，弹出的窗口就是弹出层。jQuery中弹出层插件很多，但有些在html5+css3浏览器下，支持完美。而在例如ie8一下的浏览器下显示不出应有的效果。例如jquery.avgrund插件在ie8下就无法显示。本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器。1.Lightbox_me插件功能用于显示弹出层2.Lightbox_me官方地址http://buckwilson.me/lightboxme/在网页的下面有演示地址 阅读全文

摘要：1.alertify插件功能主要实现提示功能，用于代替js中的alert,confirm,prompt，显示友好的提示框2.alertify官方地址http://fabien-d.github.io/alertify.js/官方已经对alertify进行了详细的说明，也提供了在线显示3.alertify使用方法1.使用的文件主要使用三个文件，两个css（alertify.core.css，alertify.default.css），用于设置提示框的样式。一个js（alertify.min.js或alertify.js），用于实现提示框的功能。2.实现提示框代码alertify使用非常简单，主要 阅读全文