<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 滑块（Slider） - 范围滑块</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>

<p>
<label for="amount">价格范围：</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range"></div>

</body>
</html>

jqueryui slider的更多相关文章

  1. 基于jQuery-ui实现多滑块slider

    效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  2. jqueryui插件slider的简单使用

    <!DOCTYPE html> <html> <head> <title>slider</title> <meta charset=& ...

  3. jQueryUI 之控件们

    总结:总的来说,这些控件可以在官网找到列子, 部分ui效果不如意的,可根据jQueryUI上添加的类选择器等,进行再加工 <!DOCTYPE html> <html> < ...

  4. jQueryUI使用指南

    jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使 ...

  5. JQueryUI之Autocomplete

    JQueryUI之Autocomplete JQuery UI 是以 JQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件,这些控件 ...

  6. [Web UI]对比Angular/jQueryUI/Extjs：没有一个框架是万能的

    Angular不能做什么?对比Angular/jQueryUI/Extjs 框架就好比兵器,你得明白你手里拿的是屠龙刀还是倚天剑,刀法主要是砍,剑法主要是刺.对于那些职业喷子和脑残粉,小僧送你们两个字 ...

  7. jquery.slider jquery滑块插件

    原文发布时间为:2011-03-08 -- 来源于本人的百度文章 [由搬家工具导入] http://jqueryui.com/demos/slider jquery滑块插件

  8. HTML 学习笔记 JQueryUI（Interactions,Widgets）

    Draggable 允许使用鼠标移动元素(拖动) demo <html>    <head>        <meta charset="UTF-8" ...

  9. 对比AngularJS/jQueryUI/Extjs：没有一个框架是万能的

    AngularJS不能做什么?对比Angular/JSjQueryUI/Extjs 框架就好比兵器,你得明白你手里拿的是屠龙刀还是倚天剑,刀法主要是砍,剑法主要是刺.对于那些职业喷子和脑残粉,小僧送你 ...

随机推荐

  1. SQLServer修改表字段时进行表连接

    update A set A.XXX='XXXX'from TableA  Ainner join TableB B on B.XX=A.XXwhere XXXXX

  2. lua中.和:的区别

    local myTable = {} function myTable:putMyname(val) print(val) print(self and self.name) end myTable. ...

  3. 深入ES6 模块系统

    深入ES6 模块系统 本文转载自:众成翻译 译者:neck 链接:http://www.zcfy.cc/article/4436 原文:https://ponyfoo.com/articles/es6 ...

  4. (转）基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍

    http://www.cnblogs.com/wuhuacong/p/3281103.html 最近花了很多时间在重构和进一步提炼Winform开发框架的工作上,加上时不时有一些项目的开发工作,我博客 ...

  5. sql server 的 isnull 函数

  6. Java中方法重载

    方法重载:指在同一个类中,允许存在一个以上的同名方法,只要它们的参数列表不同即可,与修饰符和返回值类型无关. 参数列表:个数不同,数据类型不同,顺序不同. 重载方法调用:JVM通过方法的参数列表,调用 ...

  7. Asp 6种页面转向方法

    asp.net 页面转向方法其实就是两种 服务器端转向和客户端转向 客户端转向实质上是指由浏览器直接向服务器端重新发送一个请求. 而服务器端转向是指服务器内部进行页面的跳转. 服务器端转向和客户端转向 ...

  8. 关于NumPy的坑

         初次接触NumPy的时候,感叹这个功能的强大,实现了Python对矩阵的运算,但在写一个项目的时候,发现了一个巨坑无比的情况     分隔符=================     对于被 ...

  9. nginx反向代理时保持长连接

    ·[场景描述] HTTP1.1之后,HTTP协议支持持久连接,也就是长连接,优点在于在一个TCP连接上可以传送多个HTTP请求和响应,减少了建立和关闭连接的消耗和延迟. 如果我们使用了nginx去作为 ...

  10. 【codeforces 727D】T-shirts Distribution

    [题目链接]:http://codeforces.com/problemset/problem/727/D [题意] 给你6种尺寸的衣服; 他们的尺码依次为S, M, L, XL, XXL, XXXL ...