基于Jquery 好友选择器V2.0

2020-05-24 21:22:16易采站长站整理

个人觉得好友选择器是一个比较复杂的组件,涉及到前端和后端的整合。在这里我主要是介绍端段如何实现,后端的数据,我用了几个简单的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>