<!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. 全面改造升级内部OA系统

    项目功能集团的OA办公系统,分别是销售管理系统.财务付款系统.原料采购系统.成品采购系统.担保系统和库房管理系统业务现状成品采购系统.库房管理系统.销售管理系统是Access开发的C/S系统,采用本地 ...

  2. mysql连接出现error node【1045】

    第一步:在my.ini下找到mysqlid.在后边添加skip-grant-tables 第二步:重新启动mysql服务 第三步:重新设置密码 第四步: 将skip-grant-tables删除掉,保 ...

  3. 查看tomcat的内存情况

    查看现有tomcat的内存大小情况 1.启动tomcat 2.访问 http://localhost:8080/manager/status ,并输入您在安装tomcat时输入的用户与口令,如 adm ...

  4. （转）基于MVC4+EasyUI的Web开发框架形成之旅--基类控制器CRUD的操作

    http://www.cnblogs.com/wuhuacong/p/3352016.html 在上一篇随笔中,我对Web开发框架的总体界面进行了介绍,其中并提到了我的<Web开发框架>的 ...

  5. 动漫绘画软件优动漫PAINT最近所用文件

    在使用优动漫PAINT的时候有时候会遇到这样的问题,近期编辑的文件找不见了,或者想要接着之前的文件进行编辑,如何快速找到这些文件呢?其实在最近所用文件中一目了,本文我们一起来看看. 如果您想接着上次未 ...

  6. Android对手尽皆铩羽，鸿蒙如何绝地求生？

    Android对手尽皆铩羽,鸿蒙如何绝地求生? 作为华为绝地反击备胎计划中的重要组成部分,鸿蒙被国人寄予了厚望.但是,除了热情我们更应该理性关注,鸿蒙对决Android未来有几成胜算?还有哪些问题需要 ...

  7. SQL更新字段内容部分值

    UPDATE att_allSET attachment = REPLACE(attachment, 'pw/', '')WHERE (attachment LIKE 'pw/%')

  8. Connection refused (SQL: select * from information_s chema.tables where table_schema = apidemo and table_name = migrations)

    LARAVEL 执行: $ php artisan migrate 报错 ,把 .env文件里的 DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306 换成 ...

  9. 使用python脚本定时备份web网站

    #!/usr/bin/env python #-*- coding: utf-8 -*- import os import time # 备份的指定目录 source = ['/data/www/Ad ...

  10. Netty、NIO、多线程

    一:Netty.NIO.多线程? 时隔很久终于又更新了!之前一直迟迟未动也是因为积累不够,后面比较难下手.过年期间@李林锋hw发布了一个Netty5.0架构剖析和源码解读,看完也是收获不少.前面的文章 ...