Heim php教程 php手册 数值范围选择控件、鼠标拖动数值范围

数值范围选择控件、鼠标拖动数值范围

Jun 07, 2016 am 11:39 AM

本文用两个例子向大家介绍一款范围选择器插件jRange。
数值范围选择控件、鼠标拖动数值范围

若是想看更多js特效网站源码js教程 请访问http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。1、<br> 老惯例引入jQuery库文件及jRange插件。<br> <link>  <br> <script></script>  <br> <script></script><br> 2、<br> 接着我们调用jRange获取选取的范围值:<br> $(function() { <br>     $('.single-slider').jRange({ <br>         from: 0, //滑动范围的最小值,数字,如0 <br>         to: 100, //滑动范围的最大值,数字,如100 <br>         step: 1,//步长值,每次滑动大小 <br>         scale: [0, 25, 50, 75, 100],//滑动条下方的尺度标签,数组类型,如[0,50,100] <br>         format: '%s',//数值格式 <br>         width: 300, //滑动条宽度 <br>         showLabels: true,// 是否显示滑动条下方的尺寸标签 <br>         showScale: true //是否显示滑块上方的数值标签 <br>     }); <br>     $('.range-slider').jRange({ <br>         from: 0, <br>         to: 100, <br>         step: 1, <br>         scale: [0, 25, 50, 75, 100], <br>         format: '%s', <br>         width: 300, <br>         showLabels: true, <br>         isRange: true <br>     }); <br>  <br>     $("#g1").click(function() { <br>         var aa = $(".single-slider").val(); <br>         alert(aa); <br>     }); <br>     $("#g2").click(function() { <br>         var aa = $(".range-slider").val(); <br>         alert(aa); <br>     }); <br> });查看该特效演示及免费下载,请访问 http://www.sucaihuo.com/js/42.html

AD:真正免费,域名+虚机+企业邮箱=0元

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Erfahren Sie mehr über einführende Codebeispiele für die Python-Programmierung Erfahren Sie mehr über einführende Codebeispiele für die Python-Programmierung Jan 04, 2024 am 10:50 AM

Erfahren Sie mehr über einführende Codebeispiele für die Python-Programmierung

So schreiben Sie mit PHP Funktionscode für die Bestandsverwaltung im Bestandsverwaltungssystem So schreiben Sie mit PHP Funktionscode für die Bestandsverwaltung im Bestandsverwaltungssystem Aug 06, 2023 pm 04:49 PM

So schreiben Sie mit PHP Funktionscode für die Bestandsverwaltung im Bestandsverwaltungssystem

PHP-Variablen in Aktion: 10 Anwendungsbeispiele aus der Praxis PHP-Variablen in Aktion: 10 Anwendungsbeispiele aus der Praxis Feb 19, 2024 pm 03:00 PM

PHP-Variablen in Aktion: 10 Anwendungsbeispiele aus der Praxis

Java implementiert einen einfachen Blasensortierungscode Java implementiert einen einfachen Blasensortierungscode Jan 30, 2024 am 09:34 AM

Java implementiert einen einfachen Blasensortierungscode

Beispiele für Go-Sprachprogrammierung: Codebeispiele in der Webentwicklung Beispiele für Go-Sprachprogrammierung: Codebeispiele in der Webentwicklung Mar 04, 2024 pm 04:54 PM

Beispiele für Go-Sprachprogrammierung: Codebeispiele in der Webentwicklung

Huawei Cloud Edge Computing Interconnection Guide: Java-Codebeispiele zur schnellen Implementierung von Schnittstellen Huawei Cloud Edge Computing Interconnection Guide: Java-Codebeispiele zur schnellen Implementierung von Schnittstellen Jul 05, 2023 pm 09:57 PM

Huawei Cloud Edge Computing Interconnection Guide: Java-Codebeispiele zur schnellen Implementierung von Schnittstellen

Vom Anfänger bis zum Experten: Code-Implementierung häufig verwendeter Datenstrukturen in der Go-Sprache Vom Anfänger bis zum Experten: Code-Implementierung häufig verwendeter Datenstrukturen in der Go-Sprache Mar 04, 2024 pm 03:09 PM

Vom Anfänger bis zum Experten: Code-Implementierung häufig verwendeter Datenstrukturen in der Go-Sprache

Anleitung und Beispiele: Erfahren Sie, wie Sie den Auswahlsortierungsalgorithmus in Java implementieren Anleitung und Beispiele: Erfahren Sie, wie Sie den Auswahlsortierungsalgorithmus in Java implementieren Feb 18, 2024 am 10:52 AM

Anleitung und Beispiele: Erfahren Sie, wie Sie den Auswahlsortierungsalgorithmus in Java implementieren

See all articles