zoukankan      html  css  js  c++  java
  • 分享一套帮助你优化开发web应用的jQuery插件集 Vanity Toolset

    日期:2012-7-10  来源:GBin1.com

    分享一套帮助你优化开发web应用的jQuery插件集 - Vanity Toolset

    在线演示  本地下载

    jQuery的UI相关插件很多,今天我们介绍来自Vanity Toolset的jQuery插件集,帮助你有效的简化前端UI开发。

    这套jQuery UI插件包含了7个不同的UI组件,包括:

    • jSlider - 幻灯插件
    • jSpotlight - 聚光灯效果插件
    • jPlacehoder - 占位插件
    • jCollapse - 收放插件
    • jTabs - 标签插件
    • jTip - 提示框插件
    • jPaginate  - 分页插件

    以上所有的插件都使用很简单的代码,体积非常小,你可以根据自己的需要来完善。文档完善并且拥有非常好的在线演示例子。相信大家使用会非常方便。支持所有的主流浏览器。

    如何使用(一个幻灯实现)

    html代码

    <div class="slider">
        <!-- the elements inside the slider, have as many as you want -->
        <div><a href="#"><img src="images/1.jpg" width="1024" height="350" border="0" /></a></div>
        <div><a href="#"><img src="images/2.jpg" width="1024" height="350" border="0" /></a></div>
        <div><a href="#"><img src="images/3.jpg" width="1024" height="350" border="0" /></a></div>
        <div><a href="#"><img src="images/4.jpg" width="1024" height="350" border="0" /></a></div>
        <!-- the navigation can be placed ANYWHERE in your document -->
        <a href="#" class="next">&nbsp;</a>
        <a href="#" class="prev">&nbsp;</a>
    </div><!-- slider --> 

    Javascript

    $(document).ready(function(){
        $(".slider").jSlider({elem:"div",images:true, animation: "random",auto_slide: true, auto_slide_interval:4000, infinite: true, speed: 1200});
    });

    代码非常简单并且直观,希望大家能够应用到自己的项目中去。 

    来源:分享一套帮助你优化开发web应用的jQuery插件集 - Vanity Toolset

    欢迎访问GBin1.com
  • 相关阅读:
    angularJS之路由
    angularJS之ng-repeat
    智能算法之Matlab实现(1)——遗传算法(1)
    如何快速处理线上故障
    测试计划怎么写
    接口测试基础
    HTTP 的一些问题
    DevOps简介
    什么是DevOps?
    HTTPS 如何保证数据传输的安全性
  • 原文地址:https://www.cnblogs.com/gbin1/p/2599530.html
Copyright © 2011-2022 走看看