jquery插件之滑块

原创 2012年03月29日 21:54:46

以下是需要引入的一些文件,如果没有您可以通过给定的地址进行下载,谢谢:

jquery-1.7.1.min.js                       http://jqueryui.com/

jquery-ui-1.8.18.custom.min.js      http://jqueryui.com/download

jquery.ui.datepicker-zh-CN.js     该文件在下载好的第二个文件的该目录下: jquery-ui-1.8.18.custom\development-bundle\ui\i18n\

/jquery-ui-1.8.18.custom.css     该文件在下载好的第二个文件的该目录下:  jquery-ui-1.8.18.custom\css\ui-lightness\


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

</style>
<title>jquery-ui-滑块</title>
<!--引入jquery类库文件  必须要有顺序-->
<script type="text/javascript" language="javascript" src="./js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" language="javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<!--css-->

<link type="text/css" rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
    $(function (){
            $("#slider").slider({
                    disabled:false,   //true不可用,false可用
                    animate:true,     //动画效果
                    max:100,           //滑块的最大值是100
                    min:-100,              //滑块的最小值是0
                    //value:0,            //默认值 0
                    values:[30,60],   //多个默认值,有几个默认值就有几个滑块
                    orientation:"horizontal",      //滑块的方向是垂直vertical的  还是水平的horizontal
                    range:true,
                    //stop:function (){
                        //    alert("停止");
                        //}
                 //   start:function (){
                        //    alert("开始");
                    //    }
            });
        });    
</script>
</head>
<body>
        <h2 class="demoHeaders">滑块的效果</h2>
        <div id="slider"></div>
</body>
</html>




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

用jquery插件-slider实现滑块的效果

滑块的效果

适用于多种设备的的滑块幻灯片插件--jquery插件Swiper

今天为大家推荐一款支持多种设备(移动端,平板,pc端)的滑块幻灯片插。我测试的是ie7. 下载后解压: aa...

jQuery插件使用之 --- 滑块的应用(移动滑块使图片变化)

jQuery插件使用之 --- 滑块的应用(移动滑块使图片变化) 滑块有时也会用到,根据滑块的位置变化图片的大小,我们首先应该想到的是改变图片的width和height,所以应该用到属性attr来设...

25个非常棒的jQuery滑块插件和教程

图像滑块和幻灯片效果,已成为网页设计的基本要素。它们以有趣的方式展示视觉内容。如果你一直想知道这是如何实现的,那么这里的25个非常棒的 jQuery 图片滑块制作教程将帮助您实现这种效果。 1.Cr...

滑块: 基于Bootstrap的jQuery slider插件的使用bootstrap-slider.js

一、插件介绍 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件。该slider插件可以自定义slider的颜色、形状、透明度和tooltip等属...

25美丽大气的jQuery滑块插件推荐

JQuery的滑块插件在jQuery的用户界面,这是一个javascript脚本库的jQuery UI的插件。jQuery的滑块插件使您能够创建您的网站上的图像幻灯片。通过幻灯片,你可能已经看到照片由...
  • Tizian
  • Tizian
  • 2012年07月16日 14:38
  • 2449

11个新鲜出炉的jquery滑块插件

本文转载自http://www.iteye.com/news/27598 如今图像滑块已成为一种流行的Web设计元素,通过滑块,你可以在有限的页面空间中展示更多的内容,带给用户更佳的浏览体验。本文将...

25个非常棒的jQuery滑块插件和教程

图像滑块和幻灯片效果,已成为网页设计的基本要素。它们以有趣的方式展示视觉内容。如果你一直想知道这是如何实现的,那么这里的25个非常棒的 jQuery 图片滑块制作教程将帮助您实现这种效果。1.Crea...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件之滑块
举报原因:
原因补充:

(最多只允许输入30个字)