jquery 插件--滑块的效果

原创 2012年03月29日 21:21:36
<!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" />
<title>无标题文档</title>
<!-- 引入jquery类库文件-->
<script src="../jquery/jquery-1.7.1.js"></script>

<script src="../jquery/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css-->
<link rel="stylesheet" href="../jquery/css/jquery-ui-1.8.18.custom.css" />

<script type="text/javascript">
 $(document).ready(function(){
  $("#slider").slider({
     disabled:false ,  //false 可滑动  true不可滑动
     animate:true,  //采用动画效果 true有动画效果 布尔、slow
     max:100, //滑块的最大值是
     min:-100, //滑块的最小值
     //value:0, //滑块的默认值
     orientation:"horizontal", // 滑块的方向是verti cal垂直或水平 horizontal
     values:[30,80], //初始化 滑块位置 一个是30 一个是80
     range:true, //范围是固定
     stop:function(event,ui){//采用属性执行event事件
        alert("停止时执行");
        
     }
      //罪业1:slide/colorpicker.
      
      
  });
  //采用bind绑定事件执行event事件
  $("#slider").bind("stopslider",function(event,ui){
       alert("开始时执行");
      
  });
 });

</script>
</head>

<body>
<!--
jquery UI使用前提
  第一步
     引入别人的类库文件
     js类库
     css样式类库文件
   第二步:模拟实现
   
 
-->
<div>滑块的效果</div>
<div id="slider" style="width:300px"></div>

        
        
        

</body>
</html>




jquery插件之滑块

以下是需要引入的一些文件,如果没有您可以通过给定的地址进行下载,谢谢: jquery-1.7.1.min.js                       http://jqueryui.com...
  • wjc19911118
  • wjc19911118
  • 2012年03月29日 21:54
  • 3814

Bootstrup增强版jQuery slider滑块插件

这是一款在原生bootstrup slider的基础上制作效果非常炫酷的jQuery slider插件。该slider插件可以自定义slider的颜色、形状、透明度和tooltip等属性,美化的效果非...
  • delmarks
  • delmarks
  • 2015年02月05日 12:18
  • 1459

jquery插件系列之 - Slider滑块

概述     滑动条是一种简单的设置一定范围内参数的插件。     官方示例地址:http://jqueryui.com/demos/slider/             ·参数(参数名 ...
  • fwj380891124
  • fwj380891124
  • 2012年06月25日 17:49
  • 28623

增强型jQuery ui Slider滑块插件

这是一款基于jQuery UI并在它的基础上增强了许多功能的Slider滑块插件。该插件在原来jQuery UI的滑块基础上进行了样式美化,各种label都可以自定义,并且提供了很多slider滑块移...
  • souhugirl
  • souhugirl
  • 2015年02月14日 12:11
  • 646

jquery 进度条 滑块

《jQuery滑动选取数值范围插件》 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操...
  • Fanbin168
  • Fanbin168
  • 2015年04月21日 20:58
  • 1104

滑块(JSlider)与进度条(JProgressBar)

进度条JProgressBar    当你在安装一个新软件时,系统会告知你目前软件安装的进度如何?才不会让你觉得程序好像死了,同样的,若你设计的程序所 需要的运行超过2秒以上,你应该显示程序正在运行...
  • weixinru4631260
  • weixinru4631260
  • 2016年05月12日 18:27
  • 1382

不容错过的七个jQuery图片滑块插件

1、jQuery多图并列焦点图插件 今天我们要来分享一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示。和其他jQuery焦点图一样,...
  • yanghaonan7758
  • yanghaonan7758
  • 2017年05月02日 09:12
  • 127

CSS,Jquery精美进度条和滑动条(滑块)插件

  • cometwo
  • cometwo
  • 2016年03月15日 21:46
  • 5550

滑块验证码demo

链接:https://pan.baidu.com/s/1dE9nU6l 密码:ei1q
  • lgddb00000
  • lgddb00000
  • 2017年12月01日 16:44
  • 171

jQuery进度条插件 jQuery progressBar

JQuery Progress Bar是基于JQuery开发的进度条插件,秉承了JQuery的简约哲学。 不仅容易使用,而且可以轻松定制外观。对于使用了JQuery框架的项目来说, 需要使用进度条控件...
  • zxc123e
  • zxc123e
  • 2013年12月24日 16:26
  • 576
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 插件--滑块的效果
举报原因:
原因补充:

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