Posted By

RichardCustance on 09/13/11


Tagged

javascript jquery widgets ui reactive


Versions (?)

Sample Webpage consuming the mouseover events firehose jQuery UI widget


 / Published in: HTML
 

URL: http://www.sage.co.uk/devblog

  1. <!DOCTYPE html>
  2. <title>Firehose</title>
  3. </head>
  4. <header>
  5. <div id="title">
  6. <h1>Firehose</h1>
  7. </div>
  8. </header>
  9. <section id="main">
  10. <div id="test"></div>
  11. <div id="test2"></div>
  12. </section>
  13.  
  14. <!-- Retreive the JavaScript files we are dependent on from a Content Delivery Network (CDN) where possible -->
  15. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.3.min.js" type="text/javascript"></script>
  16. <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
  17. <script src="Scripts/rx.js" type="text/javascript"></script>
  18. <script src="Scripts/rx.jQuery.js" type="text/javascript"></script>
  19. <script src="Scripts/firehose.js" type="text/javascript"></script>
  20.  
  21. <script type="text/javascript">
  22. // Attach the "firehose" widget to the "test" div above:
  23. $("#test").firehose();
  24.  
  25. // Without creating a new firehose widget, we can make another element (the "test2" div)
  26. // subscribe directly to the other element's observable by accessing it through the "options" property:
  27. $("#test").firehose("option", "firehose").Subscribe(function (eventData) {
  28. $("#test2").text(eventData.offsetX + "," + eventData.offsetY);
  29. });
  30. </script>
  31. </body>
  32. </html>

Report this snippet  

You need to login to post a comment.