jQuery Tools Range Input load from local javascript

StackOverflow https://stackoverflow.com/questions/17207718

  •  01-06-2022
  •  | 
  •  

Pregunta

I searched a long time for a slider in HTML5. While I am searching I stumble over jQuery Tools which looks very nice. So I give it a try. I download the needed CSS file and start the following code, works fine. 

<!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <!-- rangeinput styling -->
  <link rel="stylesheet" type="text/css" href="skin1.css"/>
</head>

<body>
  <input type="range" name="test" min="100" max="300" value="150" />
  <script>
    $(":range").rangeinput();
  </script>
</body>
</html>

Everything okay so far. Now I want to download the smallest version of the tools from the website, only include the range input (size: somewhere around 4 kb, great!). I used the local saved JavaScript file, doesn’t work. So I created the maximum available file, won’t work. So I downloaded the file mentioned in the link of src, works fine. I don’t understand why… anybody a good idea what I’m doing wrong?

¿Fue útil?

Solución

jQuery.rangeinput is one of the library of jQuery Tools.

full/jquery.tools.min.js consists following UI Libraries + jQuery library (138.7 kB)

  • dateinput/dateinput.js
  • overlay/overlay.js
  • overlay/overlay.apple.js
  • rangeinput/rangeinput.js
  • scrollable/scrollable.js
  • scrollable/scrollable.autoscroll.js
  • scrollable/scrollable.navigator.js
  • tabs/tabs.js
  • tabs/tabs.slideshow.js
  • toolbox/toolbox.expose.js
  • toolbox/toolbox.flashembed.js
  • toolbox/toolbox.history.js
  • toolbox/toolbox.mousewheel.js
  • tooltip/tooltip.js
  • tooltip/tooltip.dynamic.js
  • tooltip/tooltip.slide.js
  • validator/validator.js

Better load form/jquery.tools.min.js which consists dateinput, rangeinput and validator tools. (19.3 kB) + jQuery Library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://cdn.jquerytools.org/1.2.7/form/jquery.tools.min.js"></script>

More about jQuery Tools can be found at http://jquerytools.org/download/

If you want to use Range Input alone, better try any other plugins which provides Range Input functionality alone. You can use any one of below two plugins and save more than 10KB.

  1. slideControl.js - http://nikorablin.com/slideControl/
  2. jQuery Simple Slider - http://loopj.com/jquery-simple-slider/

Otros consejos

If you are using a standalone version of rangeinput (of about 4kb) you should have a jquery main library included somewhere in the page.

Because all JQueryTools plugins use and need JQuery library.

It means that you have 2 choices :

  • Download a custom version of JQueryTools AND include JQuery lib before using CDN link for example
  • Download a custom version of JQueryTools including the JQuery lib like this :

enter image description here

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top