slider.html 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <html>
  2. <head>
  3. <title>Slider</title>
  4. <script type="text/javascript" src="../../protovis-d3.2.js"></script>
  5. <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
  6. <script type="text/javascript" src="jquery-ui-1.8rc3.custom.min.js"></script>
  7. <link type="text/css" href="ui-lightness/jquery-ui-1.8rc3.custom.css" rel="stylesheet"/>
  8. <style type="text/css">
  9. .ui-slider {
  10. font-size: 10px;
  11. width: 300px;
  12. margin-top: 5px;
  13. }
  14. .ui-state-focus {
  15. outline: none;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <script type="text/javascript+protovis">
  21. var color = pv.color("black");
  22. var vis = new pv.Panel()
  23. .width(300)
  24. .height(300)
  25. .fillStyle(color);
  26. vis.anchor("center").add(pv.Label)
  27. .text(function() color.color);
  28. vis.render();
  29. $([red, green, blue]).slider({
  30. min: 0, max: 255, slide: function(e, ui) {
  31. vis.fillStyle(color = color[this.id](ui.value)).render();
  32. }
  33. });
  34. </script>
  35. <div id="red"></div>
  36. <div id="green"></div>
  37. <div id="blue"></div>
  38. </body>
  39. </html>