検索
ホームページウェブフロントエンドjsチュートリアルJquery フレンド セレクター V2.0_jquery に基づく

个人觉得好友选择器是一个比较复杂的组件,涉及到前端和后端的整合。在这里我主要是介绍端段如何实现,后端的数据,我用了几个简单的ASP页面来提供。
Jquery フレンド セレクター V2.0_jquery に基づく

1.代码风格

        我的组件是作为一个Jquery 的插件来做的。把整个组件做为一个类来处理。这样也方便在一个页面上多个好友选择器共存而不相互影响。

        所有需要写的参数都在最下面的giant.ui.friendsuggest.defaults 中给了默认值。在未传入参数时,会调用默认值。另外,在以下划线开头的方法,我约定为私有方法,理论上不允许外部调用它们。

2.Dom结构

      我的DOM结构没有在JS里面构造出来,而是预先下载xhtml页面里面。主要考虑当JS不可用时,至少能保证基本的搜索功能。这也符合“渐进增强”的思想。


   

   

   

       
        查看所有好友
   

   

       数据加载中....
   

   

       

           
           
关闭

       

       

           

               
还有30人可选
上一页下一页

           

           

                数据加载中...
           

       

   

       

3.数据格式

请求了3种不同的数据,首先是好友类别数据,在刚初始化组件的时候去获取,JSON 格式,格式为

[{name:'以前的同事',id:'1'},{name:'现在的同事',id:'2'}]

然后是对应好友类别的好友总数,用来在点击弹出所有好友时做分页使用。数据格式为Int型,直接输出一个数字就行了。获取数据时使用的参数为typeId,即好友类别的ID,为-1时获取所有好友的总数。

最后是好友列表数据,也是JSON格式。格式为:

[{fUid:1,friendUserName:'karry',friendHeadPic:'images/1.jpg'},{fUid:2,friendUserName:'kaliy',friendHeadPic:'images/2.jpg'}]

数据的获取分两种情况。

一种是输入框中输入字符时获取的数据,用name参数来存放输入框中输入的内容。

第二种是点击右侧按钮出现的所有好友的情况,由于涉及到分页、下拉列表框的过滤等,所以参数比较多,有三个参数:typeId、p、pageSize       typeId代表当前的类别,p代表当前的页码,pageSize 代表每页显示的人数。

4 功能简介

组件支持多选和单选两种模式,在初始化组件时通过传入参数来控制。默认是多选。在单选模式下可以传入一个回调函数,即当选中某一好友时触发。

整个组件最核心的部分是对事件的监听和对数据的异步获取,组件涉及到了focus、blur、click、keyup,change 五个事件。我在代码里面是把这五类事件分开放在不同的私有方法里面去绑定的。分别是: _clickBind();_focusBind();_blurBind(); _keyUpBind();  _selectChangeBind();

其中对input进行键盘事件的监听是最复杂的,要考虑到多种情况。通常没输入一个键都要去后台请求一次数据,但需要对上下左右方向键和回车键做不同的处理,大家可以直接看源代码来了解。

另外一个比较重要的处理就是重复选择的好友会通过闪动颜色来提示。这里主要是通过setInterval()来实现

var i = 0;
var $obj = $($this.opts.resultContainer).find("[name='" + fUid + "']");
$obj.css("background-color", "#fff");
//变色
var interval = setInterval(function() {
    //IE和FF颜色输出不一样
    if ($obj.css("background-color") == "#ffffff" || $obj.css("background-color") == "rgb(255, 255, 255)") {
        $obj.css("background-color", "#6699cc");
        $obj.css("color", "#fff");
    } else {
        $obj.css("background-color", "#ffffff");
        $obj.css("color", "#666666");
    }
    i++;
    if (i == 4) {
        $obj.attr("style", "");
        clearInterval(interval);
    }
}, 300);
 

複数選択モードで選択された友達は、getResult() メソッドを通じて取得できます。このメソッドは、友達 ID を格納する配列を返します。

5.デフォルトパラメータ:

前述のパラメータのほとんどは、主に DOM 内の対応するボタンとコンテナを指定するために使用されます。DOM 構造を変更しない限り、これらのパラメータを変更する必要はありません。

/**
* デフォルトのパラメータ
*

<br> * totalSelectNum 複数選択モードでは、選択する人の最大数、デフォルトは 30 です<br> * selectType 選択モード、デフォルトは「複数」 "、単一の場合、選択されている場合は、single<br> * selectCallBack 単一選択モードでは、選択後のコールバック関数。 <br> * 

**/
Giant.ui.friendsuggest.defaults = {
btnAll:"#ui-fs .ui-fs-icon",
btnCloseAllFriend:"#ui- fs .ui-fs-all .close",
btnNextPage:"#ui-fs .ui-fs-all .next",
btnPrevPage:"#ui-fs .ui-fs-all .prev" 、
selectFriendType:"#ui-fs-friendtype",
allFriendContainer:"#ui-fs .ui-fs-all",
allFriendListContainer:"#ui-fs .ui-fs-all. ui-fs-allinner div.list",
fredNumberContainer:"#ui-fs .ui-fs-allinner .page b",
resultContainer:"#ui-fs .ui-fs-result",
input:"#ui-fs .ui-fs-input input",
inputContainer:"#ui-fs .ui-fs-input",
dropDownListContainer:"#ui-fs .ui-fs -list",
inputDefaultTip:"友達の名前を入力してください (フルスペル入力をサポート)",
noDataTip: "この友達は友達リストに存在しません",
ajaxUrl: "ajax.asp",
ajaxLoadAllUrl:"ajax.asp",
ajaxGetCountUrl:"ajaxcount.asp",
ajaxGetFriendTypeUrl:"ajaxFriendType.asp",
totalSelectNum:30,
ajaxBefore:null,
ajaxError :null,
selectType:"multiple",
selectCallBack:null
};

6. メソッドの呼び出し:

DOM 構造が変更されていない限り、呼び出しは非常に簡単です。
var test = new Giant.ui.friendsuggest();
もちろん、$(document).ready(function(){}) 内に配置する必要があります。そうしないと、対応する DOM が見つかりません。
パラメータを変更する必要がある場合は、上記のデフォルトのパラメータを確認し、変更する必要があるパラメータを渡します。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール