現在、layuiの関係者はlayim友達検索ページの構造とスタイルを提供していません。私は個人的に非常に興味があるので、自分でセットを作り、それをアップロードしてみんなと共有します。私はフロントエンド開発者ではないので、いくつかの側面は十分に網羅されていません。アドバイスをお願いします。 まずは落ち着くための効果画像を提示します Layim は友達を探す、グループを探す、友達を追加する、グループに参加する:
1. ユーザーメンバーリストのバインド/** HTML コード*/ <textarea title="ユーザーテンプレート" id="LAY_Friend" style="display:none;"> {{# layui.each(d.data, function(index, item){ }} <div class="layui-col-sm4 layui-col-md4 layui-col-lg2"> <div class="layui-card"> <div class="アバター"> <img class="layadmin-homepage-pad-img" src="{{ item.avatar }}" /> </div> <div class="units"> <p>{{ item.userName }}({{ item.userCode }})</p> <p>{{ item.roleNames }}</p> <p> {{# if(item.isValid == 0){ }} <button userId="{{ item.userId }}" class="addFriend layui-btn layui-btn-xs" style="background-color:#7ADDD4;"> <strong>+</strong> 友達 </button> {{# } それ以外 { }} <span class="c_red">すでに友達です</span> {{# }} </p> </div> </div> </div> {{# }); }} </テキストエリア> /** js コード */ $.ajax({ タイプ: "get", URL: "../json/friend.json", 非同期: true、 データ: データ、 成功: 関数 (データ) { var json = データ; var list = json.data; if(リスト != null){ // データは HTML 形式に変換されます var html = laytpl(LAY_Friend.value).render({ データ: リスト }); コントロール.html(html); }それ以外{ control.append('<div style="color:#ccc; margin:150px 350px;">検索条件に一致するユーザーは見つかりませんでした</div>'); } } }); 2. 友達を追加する/** * 友達を追加 */ $(document).on('click', '.addFriend', function() { var myBut = $(this); var userId = myBut.attr("userId"); // 友達追加検証インターフェースをポップアップ表示 layim.add({ タイプ: '友達' 、ユーザー名: user.username 、アバター: user.avatar ,submit: 関数(グループ, コメント, インデックス){ layer.msg('友達リクエストが送信されました。相手からの確認をお待ちください', { icon: 1 }); // ボタンを変更します。myBut.parent().html('<span class="c_red">アプリケーションが送信されました</span>'); // ここにプッシュ情報コードを挿入します} }); }); 3. プッシュ情報ソケットプッシュを使用して友達アプリケーションを追加する // メッセージをプッシュする var msg = { type: "addMsgbox", // 適当に定義、サーバー側でメッセージの種類を区別するために使用される sendType: 1, // 適当に定義、サーバー側でメッセージの種類を区別するために使用される fromId: loginUserId, // 申請者 toId: user.id, // 友人 ID groupId: group, // グループ remark: remark // 検証情報 } websocket.send(JSON.stringify({ type: 'chatMsgbox' // 定義するだけです。サーバー側でメッセージの種類を区別するために使用されます。data: msg })); 4. 好きなのはhttps://www.jb51.net/article/23188.htm これで、layim が JavaScript で友達やグループを見つける方法に関するこの記事は終わりです。layim が友達やグループを見つける方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL マスタースレーブレプリケーションの実践の詳細説明 - GTID ベースのレプリケーション
大量のデータベース データを最適化することは非常に高度な科学であり、開発者が習得する必要がある専門的...
この記事では、Web ページ レイアウト デザインのいくつかの簡単な原則をまとめ、Web ページ デ...
MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...
目次前提TypeScript と JavaScriptコードエディタの選択TypeScriptを学ぶ...
目次1. プロセス制御2. シーケンシャルプロセス制御3. 分岐フロー制御if文1. 支店構造2. ...
目次序文🌟 1. APIの紹介2. 複数のデータソースの監視3. リスニングアレイ4. 監視対象5....
目次セマフォNginx ホットデプロイメント上記のブログ投稿に従ってください。ファイアウォールをオフ...
CentOS7では、MySQLをインストールすると、MariaDBもデフォルトでインストールされます...
フロントエンドのクロスドメイン問題に2日間近く悩まされましたが、ようやくngnxを使って解決したので...
入力を制限する一般的な方法1. ボタンが押されたときに点線のボックスを消すには、入力に属性値hide...
目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...
ビンログBinLog は、データベース テーブル構造の変更 (テーブルの作成、変更など) とテーブル...
基本的な環境設定まずはご自身でドメイン名とサーバーを購入してくださいクラウドサーバーECSに基づいて...
最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...
この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...