个人觉得好友选择器是一个比较复杂的组件,涉及到前端和后端的整合。在这里我主要是介绍端段如何实现,后端的数据,我用了几个简单的ASP页面来提供。 
1.代码风格
我的组件是作为一个Jquery 的插件来做的。把整个组件做为一个类来处理。这样也方便在一个页面上多个好友选择器共存而不相互影响。
所有需要写的参数都在最下面的giant.ui.friendsuggest.defaults 中给了默认值。在未传入参数时,会调用默认值。另外,在以下划线开头的方法,我约定为私有方法,理论上不允许外部调用它们。
2.Dom结构
我的DOM结构没有在JS里面构造出来,而是预先下载xhtml页面里面。主要考虑当JS不可用时,至少能保证基本的搜索功能。这也符合“渐进增强”的思想。
<div id=”ui-fs” class=”ui-fs”>
<div class=”ui-fs-result clearfix”>
</div>
<div class=”ui-fs-input”>
<input type=”text” value=”输入好友姓名(支持全拼输入)” maxlength=”30″ />
<a class=”ui-fs-icon” href=”javascript:void(0)” title=”查看所有好友”>查看所有好友</a>
</div>
<div class=”ui-fs-list”>
数据加载中….
</div>
<div class=”ui-fs-all”>
<div class=”top”>
<select id=”ui-fs-friendtype”><option value=”-1″>所有好友</option></select>
<div class=”close” title=”关闭”>关闭</div>
</div>
<div class=”ui-fs-allinner”>
<div class=”page clearfix”>
<div class=”llight1″>还有<b>30</b>人可选</div><div class=”button”><span class=”prev”>上一页</span><span class=”next”>下一页</span></div>










