做social game的，总是要想尽办法推广好自己的应用，而病毒式的邀请好友则是经常用到的一个推广方法。
在人人或者facebook上，他们为邀请好友提供了一个非常好友的好友选择器，让用户在邀请好友的时候一目了然，然而在大部分的opensocial平台上是没有的，只是提供一个简单的邀请好友的接口，有时候用户自己都不知道该邀请谁或者有谁能邀请，所以想想还是自己动手写了一个类似于facebook的一个好友选择器，功能跟facebook差不多，下面贴张截图：
代码下次再贴上来，如果有想要这个好友选择器的朋友请留言或者发邮件给我。
今天对样式进行了一下调整：
贴出代码：
代码
1 /**
2 * For to invite friends, you should implement selectFriends.inviteFriends.
3 * All selected friends were storaged in the selectFriends.selected_friends by array.
4 *
5 * Author by: Jun
6 * Date:2010.4.4
7 * @return
8 */
9 friendsSelector = function() {};
10 friendsSelector.friends_list = new Array();
11 friendsSelector.g_debug = false;
12 friendsSelector.index = 0;
13 friendsSelector.total_friends = 0;
14 friendsSelector.max = 12;
15 friendsSelector.selected_friends = new Array();
16 friendsSelector.showFriendsPage = function (div_Id) {
17 var friends_html = friendsSelector.generateFriendsPage();
18 //output(friends_html);
19 document.getElementById(div_Id).innerHTML = friends_html;
20 friendsSelector.getViewerFriendsByIndex(0);
21 gadgets.window.adjustHeight();
22 }
23 friendsSelector.getViewerFriendsByIndex = function (index) {
24 var start = index*friendsSelector.max;
25 if(index == null || start > friendsSelector.total_friends) return;
26 //set index to 0 default
27 friendsSelector.index = (index >= 0) ? index : friendsSelector.index;
28 var req = opensocial.newDataRequest();
29 var params = {
30 "first" : start,
31 "max" : friendsSelector.max
32 };
33 friendsSelector.debug(params);
34 req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, params), "viewerFriends");
35 req.send(function (data) {
36 if(data.hadError()) {
37 alert("Please refresh your page to load game again!");
38 friendsSelector.debug(data.get('viewerFriends').getErrorMessage());
39 }else {
40 // friendsSelector.debug(data.get('viewerFriends').getData());
41 friendsSelector.total_friends = data.get('viewerFriends').getData().totalSize_;
42 // friendsSelector.debug(friendsSelector.total_friends);
43
44 friendsSelector.friends_list = [];
45 data.get('viewerFriends').getData().each(function(person) {
46 var friends_info = new Array();
47 friends_info[0] = person.getId();
48 friends_info[1] = person.getDisplayName();
49 friends_info[2] = person.getField('profileUrl');
50 friends_info[3] = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
51 friendsSelector.friends_list[friends_info[0]] = friends_info;
52 delete friends_info;
53
54 });
55 friendsSelector.debug(friendsSelector.friends_list);
56 var friends_html = ''
57 for(var i in friendsSelector.friends_list) {
58 friends_html += friendsSelector.generateFriendHtml(friendsSelector.friends_list[i]);
59 }
60 friendsSelector.debug("Total friends:"+friendsSelector.total_friends+"and max friends:" + friendsSelector.max);
61 var times = Math.floor(friendsSelector.total_friends / friendsSelector.max);
62 friendsSelector.debug("Total times:"+times+"and current time:" + friendsSelector.index);
63 var next_index = times > friendsSelector.index ? (friendsSelector.index+1): null;
64 var previous_index = friendsSelector.index < 1 ? null:(friendsSelector.index-1)
65 friends_html += '<div style=" width: auto; position: relative; right: 80px;clear:both;text-align:right;"><span onclick="friendsSelector.getViewerFriendsByIndex( '+ previous_index + ');" onmouseover="friendsSelector.inviteButtonHover(\'hover\',this);" onmouseout="friendsSelector.inviteButtonHover(\'out\',this);" style="cursor:pointer;background-color:#2f2f2f;padding: 2px 9px 2px 9px;" title="上一页"><<</span><span> </span><span onclick="friendsSelector.getViewerFriendsByIndex( '+ next_index + ');" onmouseover="friendsSelector.inviteButtonHover(\'hover\',this);" onmouseout="friendsSelector.inviteButtonHover(\'out\',this);" style="cursor:pointer;background-color:#2f2f2f;padding: 2px 9px 2px 9px;" title="下一页">>></span></div>';
66 document.getElementById("all_friends").innerHTML = friends_html;
67
68 //change background image
69 for(var i in friendsSelector.selected_friends) {
70 if(friendsSelector.friends_list[friendsSelector.selected_friends[i]]) {
71 // friendsSelector.debug(friendsSelector.friends_list[friendsSelector.selected_friends[i]][0]);
72 friendsSelector.changeImage(friendsSelector.friends_list[friendsSelector.selected_friends[i]][0]);
73 }
74 }
75 }
76 });
77 }
78 friendsSelector.generateFriendsPage = function() {
79 var pageHtml = '';
80 pageHtml += '<div style="margin: 0px; padding: 3px 4px; display: block; background-color: #1F1F1F;width:795px !important;width:785px;font-size: 12px;color:#ffffff">';
81 pageHtml += '<div style=" margin: auto; width: 780px; height: auto;border:1px #eeeeee solid;background-color:#2F2F2F;overflow:hidden;padding:6px !important; padding:10px;">'
82 pageHtml += '<div style="border-bottom:1px solid #eeeeee;height: 31px; clear: both;"><ul style="float: left;">'
83 pageHtml += '<li id="bm_selector_tab1" style="position:relative;left:-40px;height:22px !important;height:30px;bottom:13px !important;padding:8px 6px 0 6px; bottom:0px; float: left; background-color: #5d5d5d; list-style-type: none; cursor: pointer;" onclick="friendsSelector.toggleFriendsPanel(true);" ><span style="color: #ffffff;" title="所有的好友" href="#nogo">邀请好友</span></li>';
84 pageHtml += '<li id="bm_selector_tab2" style="position:relative;left:-40px;height:24px !important;height:30px;bottom:13px !important;padding:8px 6px 0 6px !important;padding:6px 6px 0 6px; bottom:0px; float: left; list-style-type: none; cursor: pointer;" onclick="friendsSelector.toggleFriendsPanel(false)"><span title="选中的好友">选中好友(<span id="selector_count">0</span>)</span></li></ul></div>';
85 pageHtml += '<div style="background-color:#5d5d5d;padding-bottom:15px;"><div id="all" style=" padding: 0px;"><div id="all_friends" style=" margin: 0px; padding: 10px 15px 0px 20px; width: auto; height: 380px; clear: both; display: block;">';
86 pageHtml += '</div><div id="selector" style=" margin: 0px; padding: 10px 15px 0px 20px; width: auto; height: 380px; clear: both; display: none;"></div>';
87 pageHtml += '</div><div style="clear:both;0px; padding: 0px 15px 0px 20px !important;padding: 20px 15px 0px 20px;"><span style=" cursor:pointer;padding:6px;background-color:#2f2f2f;" onclick="friendsSelector.inviteFriends()" onmouseover="friendsSelector.inviteButtonHover(\'hover\',this);" onmouseout="friendsSelector.inviteButtonHover(\'out\',this);">发送邀请</span></div></div></div>'
88 return pageHtml;
89 }
90 friendsSelector.generateFriendHtml = function (friend) {
91 var friendHtml = '';
92 friendHtml += '<div style="border: 1px dash green; margin: 0px 60px 20px 0px; overflow: hidden; width: 185px !important;width: 180px; float: left; cursor: pointer;height:70px;" onclick="friendsSelector.select(this.id);" title="' + friend[1] + '" id="' + friend[0] + '" value="' + friend[0] + '" name="' + friend[0] + '" >'
93 friendHtml += '<span style=""><img src="' + friend[3] + '"></span>';
94 friendHtml += '<span style="width: 116px; height: auto; float: right;position:relative !important;position:absolute;top:0px;">' + friend[1] + '</span></div>';
95 return friendHtml;
96 }
97
98 // please open you firebug ,and to see all debug infomation in the firebug console.
99 // if you don't have firebug, it will display use alert method
100 friendsSelector.debug = function(debug,title) {
101 if(friendsSelector.g_debug) {
102 if(typeof(console) == "undefined") {
103 var text = title ? title + ":" : "Debug:";
104 text += "\r\n" + debug;
105 alert(debug);
106 return
107 }
108 title = title ? title + ":" : "Debug:";
109 console.info(title);
110 console.log(debug);
111 }
112 }
113 friendsSelector.select = function (id) {
114 try{
115 //friendsSelector.debug(htmlObject);
116
117 var selectObject = document.getElementById(id);
118 var uid = selectObject.getAttribute('value');
119
120 // friendsSelector.debug(friendsSelector.selected_friends);
121 for(var i in friendsSelector.selected_friends){
122 if(uid == friendsSelector.selected_friends[i]) {
123 friendsSelector.unselect(id);
124 return;
125 }
126 }
127
128 //change background for selected friends
129 friendsSelector.changeImage(id);
130
131 //clone Node to selected panel
132 document.getElementById('selector').appendChild(selectObject.cloneNode(true));
133
134 // friendsSelector.debug(selectObject.cloneNode(true));
135 //add selected friends uid to a array.
136
137 friendsSelector.selected_friends.push(uid);
138
139 friendsSelector.debug(friendsSelector.selected_friends)
140 //increase number of selected friends
141 document.getElementById('selector_count').innerHTML = friendsSelector.selected_friends.length;
142
143 }catch(err) {
144 friendsSelector.debug(err.description);
145 }
146 }
147 friendsSelector.changeImage = function (id) {
148 var selectObject = document.getElementById(id);
149 selectObject.style.background = "transparent url(http://netlog2.farm.elex-tech.us/myfarm/static/img/selected_mark.gif) no-repeat top right";
150 }
151 friendsSelector.unselect = function (id) {
152 var unObject = document.getElementById(id);
153 var uid = unObject.getAttribute('value');
154
155 //delete uid from friendsSelector.selected_friends;
156 for(var i = 0 ; i < friendsSelector.selected_friends.length; i++) {
157 friendsSelector.debug(friendsSelector.selected_friends[i])
158 if(friendsSelector.selected_friends[i] == uid) {
159 friendsSelector.selected_friends.splice(i,1);
160 }
161 }
162 friendsSelector.debug("after filter:");
163 friendsSelector.debug(friendsSelector.selected_friends);
164
165 unObject.style.background = "none";
166 var removeObject = document.getElementsByName(id);
167
168 friendsSelector.debug(removeObject);
169 //
170 var _parentElement = document.getElementById('selector');
171
172 if(removeObject[1]) {
173 _parentElement.removeChild(removeObject[1]);
174 }else {
175 _parentElement.removeChild(removeObject[0]);
176 }
177 // friendsSelector.debug(_parentElement);
178 // _parentElement.removeChild(removeObject);
179
180 //decrease selected frineds' quantity
181 document.getElementById('selector_count').innerHTML = friendsSelector.selected_friends.length;
182 }
183 friendsSelector.toggleFriendsPanel = function (toggle) {
184 var all_friends = document.getElementById('all_friends');
185 var selected = document.getElementById('selector');
186 if(toggle) {
187 all_friends.style.display = 'block';
188 document.getElementById('bm_selector_tab1').style.backgroundColor = "#5d5d5d";
189 selected.style.display = 'none';
190 document.getElementById('bm_selector_tab2').style.backgroundColor = "";
191
192 }else {
193 selected.style.display = 'block';
194 document.getElementById('bm_selector_tab2').style.backgroundColor = "#5d5d5d";
195 all_friends.style.display = 'none';
196 document.getElementById('bm_selector_tab1').style.backgroundColor = "";
197 }
198 gadgets.window.adjustHeight();
199 }
200 friendsSelector.inviteButtonHover = function (action,obj) {
201 friendsSelector.debug(action);
202 friendsSelector.debug(obj);
203 if(action == "hover") {
204 friendsSelector.debug(obj.style.backgroundColor);
205 obj.style.backgroundColor = "#5d5d5d";
206 friendsSelector.debug(obj.style.backgroundColor);
207 } else {obj.style.backgroundColor = '#2f2f2f';}
208 }
209 friendsSelector.inviteFriends = function () {
210 //your code.
211 }
212 cls();
213 output('<div id="test"></div>');
214 friendsSelector.showFriendsPage('test');
