优大网

标签存档： jQuery

近期十大优秀jQuery插件推荐

2013年8月19日 / / 暂无评论

摘要：当今，设计领域竞争越来越激烈，唯有做出最优秀的产品才能在该领域独树一帜。而jQuery插件为设计和开发提供了强大的支撑力。本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件，以便开发者借鉴。

当有限的开发知识限制了设计进展，你无法为自己插上创新的翅膀时，jQuery可以扩展你的视野。本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件。

1. jQuery URL Shortener

正如名字所清晰表达的那样，该jQuery插件利用Google URL shortener API可将URL转化成短链接。

 

下载 | 演示

2. Bootstrap Tokenfield

Bootstrap Tokenfield是一款针对输入框的高级标签插件，可获取键盘输入焦点，支持复制—粘贴。

 

下载 | 演示

3. Retinize

Retinize可将图片质量进行提升，以在Retina显示器上完美显示。在像素艺术中，当你不希望存储高质量版本的图片时，该jQuery插件显得特别有用。

 

下载 | 演示

4. jQuery Scrollbox

它是一款简单、轻量级的jQuery插件。利用它，用户可以像旋转木马、传统的滚动形式那样滚动展示列表。

 

下载 | 演示

5. jQuery Scanner Detection

这是一款小插件。可对用户所使用扫描仪（barcode, QR Code……）进行探测、跟踪，并给出特定的反馈。

 

下载 | 演示

6. jQuery finderSelect

该jQuery插件可激活文件管理器，高亮显示被选择的元素，支持Ctrl+单击、Command+单击、Ctrl+拖动、Command+拖动及Shift+单击操作。

 

下载 | 演示

7. Yet Another DataTables Column Filter （Yadcf）

利用Yadcf，用户可轻松地针对表格每列添加过滤器组件。该插件基于DataTables jQuery插件开发而成。

 

下载 | 演示

8. jQuery noInput

该插件用来显示输入字段预期值的提示信息，与HTML5的placeholder属性相似。

 

下载 | 演示

9. HeapBox

无论你是Web设计师，还是Web开发工程师，一定了解设置本地HTML表单外观及功能的艰辛。Heapbox现在可代替selectbox，用JavaScript编写，效果很不错。现在它只针对selectbox，还无法处理textbox、checkbox等。Heapbox基于jQuery设计，却改变了大部分人写JavaScript的方式。

 

下载 | 演示

10. QUAIL

该插件用来查找影响页面美观、亲和力的内容。它可查找现页面中的设计问题，如图片缺少替换文字等。

 

下载 | 演示

原文来自：The Design Blitz

http://www.csdn.net/article/2013-08-15/2816585

可以直接拿来用的15个jQuery代码片段

2013年7月18日 / / 暂无评论

摘要：开发人员利用jQuery代码不仅能给网站带来各种动画、特效，还会提高网站的用户体验。本文总结了开发者经常使用的15个jQuery代码片段，大家可以直接拿来用。

jQuery里提供了许多创建交互式网站的方法，在开发Web项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验。

本文收集了15段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。

1.预加载图片

 

1
2
3
4
5
6
7
8
9
10
11
12
(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

源码 

 

2. 让页面中的每个元素都适合在移动设备上展示

 

 

 

1
2
3
4
5
6
7
8
9
10
11
var scr = document.createElement('script');
document.body.appendChild(scr);
scr.onload = function(){
    $('div').attr('class', '').attr('id', '').css({
        'margin' : 0,
        'padding' : 0,
        'width': '100%',
        'clear':'both'
    });
};

源码 

3.图像等比例缩放

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(window).bind("load", function() {
    // IMAGE RESIZE
    $('#product_cat_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var ratio = 0;
        var width = $(this).width();
        var height = $(this).height();
        if(width > maxWidth){
            ratio = maxWidth / width;
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratio);
            height = height * ratio;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(height > maxHeight){
            ratio = maxHeight / height;
            $(this).css("height", maxHeight);
            $(this).css("width", width * ratio);
            width = width * ratio;
        }
    });
    //$("#contentpage img").show();
    // IMAGE RESIZE
});

源码 

4.返回页面顶部

 

1
2
3
4
5
6
7
8
// Back To Top
$(document).ready(function(){
  $('.top').click(function() { 
     $(document).scrollTo(0,500); 
  });
});
//Create a link defined with the class .top
<a href="#" class="top">Back To Top</a>

源码 

 

5.使用jQuery打造手风琴式的折叠效果

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var accordion = {
     init: function(){
           var $container = $('#accordion');
           $container.find('li:not(:first) .details').hide();
           $container.find('li:first').addClass('active');
           $container.on('click','li a',function(e){
                  e.preventDefault();
                  var $this = $(this).parents('li');
                  if($this.hasClass('active')){
                         if($('.details').is(':visible')) {
                                $this.find('.details').slideUp();
                         } else {
                                $this.find('.details').slideDown();
                         }
                  } else {
                         $container.find('li.active .details').slideUp();
                         $container.find('li').removeClass('active');
                         $this.addClass('active');
                         $this.find('.details').slideDown();
                  }
           });
     }
};

6.通过预加载图片廊中的上一幅下一幅图片来模仿Facebook的图片展示方式

 

 

1
2
3
4
5
6
7
8
var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});

源码

7.使用jQuery和Ajax自动填充选择框 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '
' + j[i].optionDisplay + '
';
}
$("select#ctlPerson").html(options);
})
})
})

源码 

8.自动替换丢失的图片

 

 

1
2
3
4
5
6
7
8
// Safe Snippet
$("img").error(function () {
    $(this).unbind("error").attr("src", "missing_image.gif");
});
// Persistent Snipper
$("img").error(function () {
    $(this).attr("src", "missing_image.gif");
});

源码

9.在鼠标悬停时显示淡入/淡出特效

 

 

1
2
3
4
5
6
7
8
$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6);// This sets the opacity of the thumbs to fade down to 60% when the page loads
    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0);// This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 0.6);// This should set the opacity back to 60% on mouseout
    });
});

源码 

10.清空表单数据

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase();// normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

源码 

11.预防对表单进行多次提交

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});

源码 

12.动态添加表单元素

 

1
2
3
4
5
//change event on password1 field to prompt new input
$('#password1').change(function() {
        //dynamically create new input and insert after password1
        $("#password1").append("");
});

源码 

13.让整个Div可点击

 

1
2
blah blah blah. link
The following lines of jQuery will make the entire div clickable: $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });

源码 

14.平衡高度或Div元素

 

1
2
3
4
5
var maxHeight = 0;
$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);

源码 

 

15. 在窗口滚动时自动加载内容

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $('#loadingbar').css("display","block");
            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
            });
        }
    }
});
$(document).ready(function() {
    $('#loaded_max').val(50);
});

来自： codegeekz

超棒的30款JS类库和工具

2013年7月1日 / / 暂无评论

摘要：对于Web设计人员和开发人员来说，手里有一套便利的、最新的工具可供使用是极其重要的。Web设计和开发的趋势变化极快，所以拥有最新的工具是必不可少的。因此小编今天为大家整理了30个JS类库和工具以供参考。

当设计人员和开发人员真正快速便捷的使用JavaScript类库和工具的同时，他们的生活也就变得更轻松、简单。你付出的越多，它回报你的也就越多，这正是JS类库和工具需求量很大的原因。

对于Web设计人员和开发人员来说，手里有一套便利的、最新的工具可供使用是极其重要的。Web设计和开发的趋势变化极快，所以拥有最新的工具是必不可少的。

可是要想找到质量高和效率高的工具并非易事，尤其是考虑到这种类型的工具它所带有的额外工具的可用性，并且，不是所有的工具都是高质量的。因此，寻找好的工具不仅仅是一项艰巨的任务，同时也很耗时。这就是为什么小编今天为大家提供30个JS类库和工具列表的原因。所有的工具都很有用，找出最能够满足你需要的那一个！

dynamo.js

这是一款使用很便捷的工具，它可以快速容易的创建HTML动态bits，为文本目录添加微妙效果。

Smoke.js

Smoke.js是一个轻量级且灵活的JS插件，只是用来替代原有的alert而已。它完全由HTML与CSS3构成，所以你能够自己添加样式来表现出个性化。

Holder.js

Holder.js可直接在客户端渲染图片的占位。支持在线和离线，允许轻松创建占位符，并快速使用可链接API（chainable API）风格。

Graphene

这款工具有惊人之处，有一个控制面板和绘图工具箱，使用起来很容易上手。

GMap

这是一款了不起的轻量级jQuery插件，用来将Google Maps插入到网页或者博客中。提供了更加简便的方法用于集成、管理和定制。

jPages

jPages是一个超给力的jQuery分页插件，它提供了很多丰富的新特性，例如自动翻页功能、可用键盘和鼠标滚动浏览、内容延迟显示、支持自定义分页导航菜单等等。使用起来很简单，效果也很出色。

Leaflet-JS Library

Leaflet是一个开源的基于移动开发的互动式地图JS库，代码量仅约28 KB。

JSZip

JSZip允许使用JS创建、阅读和编辑.zip文件。

Colors

这是一款非常有用的颜色处理类库，工作效率高，可以为项目选择正确的颜色。

Fitvids.js

这是另一款轻量、易用的jQuery插件，如果你需要你的视频能够自动适应网页的宽度，FitVids.js这个jquery插件可以帮助你。

Stroll.js

这些滚动效果是纯粹使用CSS3所实现的，其中所用到的JS仅是用来实现绑定和移除CSS样式。

Hammer.js

Hammer.js是一个轻量级的JS库，能让你的网站轻松实现触控事件。它依赖于jQuery，用来控制触摸设备上的多点触控特性。

Socialite.js

Socialite.js 是一个用来方便生成各种社交网站分享按钮的JS库，提供多种按钮排列样式，可以根据客户需求实现个性化设置。

Retina.js

顾名思义，Retina.js是很棒的脚本，帮助你在Retina显示设备上制造出高质量的图片，这是一款便捷的开源软件。检查网页中的图片是否存在高清的版本，如果有将会替换显示。

KineticJS

这是一个很简便的HTML5 Canvas独立JS类库，使用这个类库你可以轻松的在桌面和移动设备上进行图形和图片绘制和修改，执行动画效果，或者和图形图片进行互动。

URI.js

URI.js是一个JS库，用于处理URLs地址。它提供了类似于jQuery风格的API（便利的接口和方法链），用于读写所有常用组件，像.directory和.authority一样的方式。

Crossfilter

Crossfilter是一个用来展示大数据集的JS库，在浏览器里有很多不同的多元数据集，支持超快的交互，甚至在上百万或者更多数据下都很快。主要用来构建数据分析程序。

DropKick.js

从头开始做下拉式菜单可能是非常耗时和繁忙的任务，因此DropKick出现了，它是一个下拉框美化插件，使用非常简单，直接为下拉框select调用方法即可，瞬间让你摆脱繁琐。

Foresight.js

Foresight.js可以在装载图片之前知道用户的设备是否可以显示高分辨率的图片。

Kartograph

Kartograph是一个简单且轻量级的框架，建立交互式地图应用程序无需谷歌地图或其他任何地图服务。

Patternizer – Stripe Pattern Generator Tool（条纹模式生成器工具）

Patternizer是一个在线的带状模式生成工具，可以帮助你简单快捷的创建复杂的模式。你同样可以把你创建模式的经验与别人分享，收集别人的意见。

Morris.js

Morris.js是一个轻量级的JS库，使用jQuery和Raphaël来生成各种时序图。

JavaScript Library Boilerplate

JS Boilerplate可以帮助你来轻松创建你自己的JS库，例如jQuery，Zepto，Prototype等等。

heatmap.js

Heatmap.js用来生成基于用户自定义数据上的Web热图，内嵌HTML5 Canvas元素。

uiji.js

uiji.js很独特，它是jQuery的反向，它不是使用CSS选择器来查找元素，您可以使用相同的语法来创建元素。

sigma.js

sigma.js是一个开源的轻量级JS库，用来绘制各种图形，使用的是HTML Canvas元素。它同样可以用来显示交互式的静态和动态图表。

Heyoffline.js

heyoffline.js是一个简单的JS库，当用户网络不可用的时候可以提示用户保存信息，以免数据丢失。

JavaScript Console–Debugging JavaScript Tool（JS调试工具）

从字面意思可以看出，它是一个JS调试工具，同时为移动Web Apps提供远程调试。

Yeoman

它旨在为开发者提供一系列“健壮的”工具、程序库和工作流，帮助他们快速构建出漂亮、引人注目的Web应用。

Batman.js

这个框架就像它的名字一样酷——它可以创建丰富高效的单页面浏览器Apps。Batman.js框架利用CoffeeScript或JavaScript来快速构建Web Apps。由于其拥有强大的视图绑定和可观察的属性，所以它的代码非常简洁。

原文：Inspire Trends

http://www.csdn.net/article/2013-07-01/2816068-best-javascript-libraries-and-tools

其他操作

近期文章

分类目录

归档

Copyright © 2024 优大网 浙ICP备13002865号

回到顶部 ↑