old-ie.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <title>jQuery</title>
  6. <meta name="viewport" content="width=device-width"/>
  7. <link rel="stylesheet" href="style.css"/>
  8. <script src="excanvas.compiled.js"></script>
  9. <script>
  10. // IE function.bind polyfill
  11. if (!Function.prototype.bind) {
  12. Function.prototype.bind = function (oThis) {
  13. if (typeof this !== "function") {
  14. // closest thing possible to the ECMAScript 5 internal IsCallable function
  15. throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
  16. }
  17. var aArgs = Array.prototype.slice.call(arguments, 1),
  18. fToBind = this,
  19. fNOP = function () {},
  20. fBound = function () {
  21. return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
  22. aArgs.concat(Array.prototype.slice.call(arguments)));
  23. };
  24. fNOP.prototype = this.prototype;
  25. fBound.prototype = new fNOP();
  26. return fBound;
  27. };
  28. }
  29. </script>
  30. </head>
  31. <body>
  32. <ul>
  33. <li><a href="index.html">Vanilla JS</a></li>
  34. <li><a href="jquery.html">jQuery plugin</a></li>
  35. <li><a href="angular.html">Angular module</a></li>
  36. </ul>
  37. <p>Demo for old Internet Explorer Versions 7 and 8 with <a href="http://excanvas.sourceforge.net" target="_blank">excanvas</a> and a Function.bind polyfill.</p>
  38. <span class="chart" data-percent="86">
  39. <span class="percent"></span>
  40. </span>
  41. <span class="btn js_update">Update chart</span>
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  43. <script src="../dist/jquery.easypiechart.min.js"></script>
  44. <script>
  45. $(function() {
  46. var $chart = $('.chart');
  47. $chart.easyPieChart({
  48. onStep: function(from, to, percent) {
  49. $(this.el).find('.percent').text(Math.round(percent));
  50. }
  51. });
  52. var chart = window.chart = $chart.data('easyPieChart');
  53. chart.update($chart.data('percent'));
  54. $('.js_update').on('click', function() {
  55. chart.update(Math.random()*200-100);
  56. });
  57. });
  58. </script>
  59. </body>
  60. </html>