In this tutorial you will know how to use jQuery with APE by create a new class calling DUI.Class.create(obj, fn) like this code:
Read The Full Tutorial.
In this tutorial you will know how to use jQuery with APE by create a new class calling DUI.Class.create(obj, fn) like this code:
1. /**
2. * @author Paul Price
3. * Who needs MooTools' Class() method?
4. */
5.
6. APE.bgColor = DUI.Class.create(APE.Client.prototype, {
7. // set default options
8. options:{
9. debug: false,
10. select: null
11. },
12.
13. init: function(core, options){
14. this.core = core;
15. this.options = options;
16.
17. // do the following every time we get a new user
18. this.addEvent('pipeCreate', this.setup);
19.
20. // when a user joins, update the user list
21. this.addEvent('userJoin', this.createUser);
22.
23. // when a user leaves, destroy them with mighty thunder!
24. this.addEvent('userLeft', this.deleteUser);
25.
26. // when we want to send data
27. this.onCmd('send', this.cmdSend);
28.
29. // and when we recieve data
30. this.onRaw('data', this.rawData);
31.
32. // start the session with a random name!
33. var username = prompt("Hey good lookin', what's your name?", String((new Date()).getTime()).replace(/\D/gi,''));
34. this.core.start(username);
35. },
36.
37. setup: function(type, pipe, options){
38. // add an event listener on our selectbox
39. this.options.select.change(function(){
40. // get the select box value
41. color = $("option:selected", this).val();
42.
43. // set the background of the document to the color chosen
44. $("body").css("background-color", color);
45.
46. // send the new color to the APE server
47. pipe.send(color);
48. });
49. },
50.
51. cmdSend: function(pipe, sessid, pubid, message){
52. if(this.options.debug)
53. $("<span> " + this.core.user.properties.name + " changed the bg color to " + message + "</span><br />").prependTo("#debug");
54. },
55.
56. rawData: function(raw, pipe){
57. if(this.options.debug)
58. $("<span> " + raw.datas.sender.properties.name + " changed the bg color to " + raw.datas.msg + "</span><br />").prependTo("#debug");
59.
60. // set the selectboxes value to match
61. this.options.select.val(raw.datas.msg);
62.
63. // set the color
64. $("body").css("background-color", raw.datas.msg);
65. },
66.
67. createUser: function(user, pipe){
68. user.element = $("<span>" + user.properties.name + " has joined bgColor</span><br />").prepend("<img src='bullet_green.png' />").prependTo("#debug");
69. },
70.
71. deleteUser: function(user, pipe){
72. $(user.element).text(user.properties.name + " has left bgColor").css("color", "#666666").prepend("<img src='bullet_red.png' />");
73. }
74. });
Next step is to update the bit of code that creates the class (from):
1. new colorChanger(ape, debug).initialize();
(to)
1. var bgcolor = new APE.bgColor(ape,{
2. debug: true,
3. select: $("#wrapper select[name=selectColor]")
4. });
|
Ajax Projects
