<!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. SDAutoLayout的使用

    ## 简介- IOS布局的三个阶段:MagicNumber -> AutoResizingMask -> AutoLayout- 自动布局三大框架:UILayoutConstraint(原 ...

  2. 最小环 hdu1599 poj1734

    最小环用floyd改编. hdu1599特殊一些.要求至少有三个不同的点,并且除了起点与终点重合外,中间不能有环.有点很奇怪,最大值不能为0x3f3f3f3f. poj1374就没那么讲究. //hd ...

  3. C# DataTable 转 json

    public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { //窗体 ...

  4. logging模块、shutil模块、subprocess模块、xml模块

    logging模块 shutil模块 subprocess模块 xml模块 logging模块 函数式简单配置 import logging logging.debug('debug message' ...

  5. win7不需要密码访问网络共享文件（转载）

    大家是不是觉得,共享一个文件夹后,每次输入密码都很麻烦呢?有没有不需要输入密码就可以访问共享文件的方法呢? 答案是肯定的,当然有,下面介绍下win7不需要密码访问网络共享文件 工具/原料 两台电脑在局 ...

  6. CentOS7环境RabbitMQ集群配置管理(转载)

    CentOS7环境RabbitMQ集群配置管理(转载)   CentOS7系统内核版本:3.10.0-514.26.2.el7.x86_64 一.对应主机host地址(三台主机host文件要保持一致) ...

  7. Python复利

    Python复利 复利的计算是对本金及其产生的利息一并计算,也就是利上有利. 复利计算的特点是:把上期末的本利和作为下一期的本金,在计算时每一期本金的数额是不同的.复利的计算公式是:   s = 0 ...

  8. ConcurrentHashMap 并发HashMap原理分析

        ConcurrentHashMap和Hashtable主要区别就是围绕着锁的粒度以及如何锁.如图   左边便是Hashtable的实现方式---锁整个hash表:而右边则是Concurrent ...

  9. ORA-29857: 表空间中存在域索引和/或次级对象

    今天小编在操作 oracle 数据库,删除表空间时引发了异常!! SQL> drop tablespace nbmap including contents; 为什么会造成以上的异常呢? 根据小 ...

  10. 【codeforces 807B】T-Shirt Hunt

    [题目链接]:http://codeforces.com/contest/807/problem/B [题意] 你在另外一场已经结束的比赛中有一个排名p; 然后你现在在进行另外一场比赛 然后你当前有一 ...