求推荐类似stickUp,Grumble这样小有有趣的JS插件及github地址


求推荐类似stickUp(固定元素),Grumble(气泡提示)等这类小巧的插件。

web前端开发 前端 jquery插件 前端开发

菟原手奈儿 10 years, 2 months ago

Unslider

Github地址: https://github.com/idiot/unslider

Unslider — 一个超小的 jQuery 轮播(slider) 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。

unslider

举例调用:


 $('.banner').unslider({
    speed: 500,               //  The speed to animate each slide (in milliseconds)
    delay: 3000,              //  The delay between slide animations (in milliseconds)
    complete: function() {},  //  A function that gets called after every slide animation
    keys: true,               //  Enable keyboard (left, right) arrow shortcuts
    dots: true,               //  Display dot navigation
    fluid: false              //  Support responsive design. May break non-responsive designs
});

Bootstrap Switch

Bootstrap Switch是对Bootstrap控件的扩充。基于选HTML中基本的选择框控件实现只有开和关两种状态的单选按钮。

Github地址: https://github.com/nostalgiaz/bootstrap-switch

图片描述

调用举例:


 <div class="switch switch-large">
    <input type="checkbox" checked />
</div>
<div class="switch">
    <input type="checkbox" checked />
</div>
<div class="switch switch-small">
    <input type="checkbox" checked />
</div>
<div class="switch switch-mini">
    <input type="checkbox" checked />
</div>

iCheck

Github地址: https://github.com/fronteed/iCheck

iCheck让不同浏览器下的复选框(checkboxes)和单选按钮(radio button)更美观、功能更强。

iCheck插件就像是复选框和单选按钮的构造器。

它将每个输入框都用一个div包裹起来,这样,你就可以按自己的需要定制样式或者使用自带的皮肤了。
你还可以通过insert参数向这个div中放置HTML代码或文本。

图片描述

对于下面这段HTML代码:


 <label>
  <input type="checkbox" name="quux[1]" disabled>
  Foo
</label>
<label for="baz[1]">Bar</label>
<input type="radio" name="quux[2]" id="baz[1]" checked>
<label for="baz[2]">Bar</label>
<input type="radio" name="quux[2]" id="baz[2]">

在默认参数下使用iCheck时会得到如下结果:


 <label>
  <div class="icheckbox disabled"><input type="checkbox" name="quux[1]" disabled></div>
  Foo
</label>
<label for="baz[1]">Bar</label>
<div class="iradio checked"><input type="radio" name="quux[2]" id="baz[1]" checked></div>
<label for="baz[2]">Bar</label>
<div class="iradio"><input type="radio" name="quux[2]" id="baz[2]"></div>

Chart.js

Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。

Github地址: https://github.com/nnnick/Chart.js

这个插件很吊 建议好好研究一下

图片描述

jQuery.Pin

jQuery.Pin 能将任意页面元素“钉”在某个容器顶部,而且在尺寸小的屏幕上能够自动禁用这种效果。

Github地址: https://github.com/webpop/jquery.pin

图片描述

使用方法也很简单:

在HTML下面增加script标签,把想要固定的元素加上事件就可以了:


 $(".pinned").pin()

如果想让某个元素的内部元素在其父元素中固定,使用:


 $(".pinned").pin({containerSelector: ".container"})

你也可以设定参数:


 $(".pinned").pin({padding: {top: 10, bottom: 10}})


就先写这些吧 回头有时间再补充

Reilj answered 10 years, 2 months ago

Your Answer