<!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. Npgsql使用入门(三)【批量导入数据】

    Program.cs代码: class Program { static void Main(string[] args) { var test = new PgBulkCopyHelper<S ...

  2. javascript中异常处理案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 树的问题小结(最小生成树、次小生成树、最小树形图、LCA、最小支配集、最小点覆盖、最大独立集)

    树的定义:连通无回路的无向图是一棵树. 有关树的问题: 1.最小生成树. 2.次小生成树. 3.有向图的最小树形图. 4.LCA(树上两点的最近公共祖先). 5.树的最小支配集.最小点覆盖.最大独立集 ...

  4. 一款APP的开发设计是如何从0到1一步一步设计的

    目前在行业里,关于APP界面设计规范也是层次不齐,很多都还停留在6的设备和ios 9的系统之上,而现在最新的是iphone 7和iOS 10了(更新换代真的很快),我这里说的是最新的iOS 界面设计规 ...

  5. django 安装运行

    pip install django pip list 查看版本 python -m django --version 新建django django-admin startproject mysit ...

  6. python第三方模块大杂烩

    Python单元测试框架之pytest---如何执行测试用例 unittest单元测试框架实现参数化 (用例有相似参数断言时使用,可以精简代码) python中标示符作用详解 一篇文章让你彻底搞清楚P ...

  7. JVM上的下一个Java——Scala

    Scala是一种针对 JVM 将函数和面向对象技术组合在一起的编程语言.Scala编程语言近来抓住了很多开发者的眼球.它看起来像是一种纯粹的面向对象编程语言,而又无缝地结合了命令式和函数式的编程风格. ...

  8. C++文本操作.Vs.Python

    C++利用文件流: (1):读取一个字符 std::string TestTxt(argv[3]); // freopen(TestTxt.c_str(),"r",stdin);/ ...

  9. vue项目中引用echarts的几种方式

    准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或   ...

  10. JavaScript 创建对象之单例、工厂、构造函数模式

    01单例模式 首先看一个问题,我们要在程序中描述两个人,这两个人都有姓名和年龄,可能刚刚开始学习js的时候会写成这样: var name1 = 'iceman'; var age1 = 25; var ...