<!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. 【转】PowerDesigner物理数据表生成C#实体类Model

    model实体类是什么: 在三层架构UI,BLL,DAL中,有时用户插入一条记录到数据库中,必然会有不少数据,按正常编程,也必然会一下子调用某个函数传入不少参数.为了减少参数的数量,达到高效简洁的效果 ...

  2. SQLServer 添加序号列

    select ROW_NUMBER()OVER(ORDER BY 用来排序的列的列名),XXX,XXX from XXX 按照原始顺序: ROW_NUMBER()OVER(ORDER BY (sele ...

  3. HTML实现图片360度循环旋转

    <style> .header{ -webkit-animation:rotateImg 5s linear infinite;<!--修改旋转周期--> border: 1p ...

  4. draw9patch在SDK->tools找不到,在Android Studio点击图片没找到draw9patch

    draw9patch在SDK->tools找不到,在Android Studio点击图片没找到draw9patch 第一个问题: Google把draw9patch集成在Android Stud ...

  5. Python 之 风格规范（Google ）

    开头先mark一下网址:goole官网 任何语言的程序员,编写出符合规范的代码,是开始程序生涯的第一步. 一.分号 不要在行尾加分号, 也不要用分号将两条命令放在同一行. 二.行长度 每行不超过80个 ...

  6. Axis2 1.7.4构建项目

    1.下载axis2项目文件 http://axis.apache.org/axis2/java/core/download.html 2.Maven文件的pom.xml文件 3.将下载的axis2-1 ...

  7. 互联网的大数据神话——NoSQL

    本文摘抄于:<纵横大数据--云计算数据基础设施> 何小朝著 Chapter5. NewSQL--关系数据库联邦/联合 5.4.2  互联网的神话 对强一致性的要求放松,是因为 互联网的分布 ...

  8. 各种概念POJO、JAVABEAN、DAO、DTO、PO、VO、BO、SSH、EJB

    转自:https://my.oschina.net/pacoyang/blog/151695 POJO(pure old java object)是普通java类,有一些private的参数作为对象的 ...

  9. Vue学习之路第十九篇：按键修饰符的使用

    1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...

  10. POJ 2376 Cleaning Shifts (线段树优化DP)

    题目大意:给你很多条线段,开头结尾是$[l,r]$,让你覆盖整个区间$[1,T]$,求最少的线段数 题目传送门 线段树优化$DP$裸题.. 先去掉所有能被其他线段包含的线段,这种线段一定不在最优解里 ...