Currently, layui officials have not provided the structure and style of the layim friend search page. I am personally very curious, so I made a set myself, and now upload it to share with everyone. I am not a front-end developer, so some aspects are not comprehensive enough. Please give me some advice! First present the effect picture to calm you down Layim find friends, find groups, add friends, join groups:
1. Binding user member list/** html code*/ <textarea title="User Template" 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="avatar"> <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> Friends </button> {{# } else { }} <span class="c_red">Already friends</span> {{# } }} </p> </div> </div> </div> {{# }); }} </textarea> /** js code */ $.ajax({ type: "get", url: "../json/friend.json", async: true, data: data, success: function (data) { var json = data; var list = json.data; if(list != null){ // Data converted to HTML format var html = laytpl(LAY_Friend.value).render({ data: list }); control.html(html); }else{ control.append('<div style="color:#ccc; margin:150px 350px;">No users matching the search criteria were found</div>'); } } }); 2. Add friends /** * Add friends */ $(document).on('click', '.addFriend', function() { var myBut = $(this); var userId = myBut.attr("userId"); // Pop up the add friend verification interface layim.add({ type: 'friend' ,username: user.username ,avatar: user.avatar ,submit: function(group, remark, index){ layer.msg('Friend request has been sent, please wait for the other party to confirm', { icon: 1 }); // Modify button myBut.parent().html('<span class="c_red">Application has been submitted</span>'); // Insert your push information code here} }); }); 3. Push informationUse socket push to add friend application // Push a message var msg = { type: "addMsgbox", // Defined casually, used to distinguish message types on the server side sendType: 1, // Defined casually, used to distinguish message types on the server side fromId: loginUserId, // Applicant toId: user.id, // Friend ID groupId: group, // Group remark: remark // Verification information } websocket.send(JSON.stringify({ type: 'chatMsgbox' // Just define it, used to distinguish message types on the server side, data: msg })); 4. Guess you likehttps://www.jb51.net/article/23188.htm This is the end of this article about layim finding friends and groups in javascript. For more relevant layim finding friends and groups content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Specific use of nginx keepalive
>>: Detailed explanation of MySQL master-slave replication practice - GTID-based replication
First, let's look at three situations where m...
Variables defined in SASS, the value set later wi...
Preface Everyone knows that many sites now charge...
HTML text formatting tags 標簽 描述 <b> 定義粗體文本 ...
Table of contents 1. HTTP Range Request 1.1 Range...
The main function of a calculator is to perform n...
Use event delegation to implement message board f...
Table of contents Linux--File descriptor, file po...
Today I will introduce to you a difference betwee...
Docker Compose can realize the orchestration of D...
A common development need is that we want to coll...
Preface During the development process, you will ...
The growth path from a Linux novice to a Linux ma...
This article shares the specific code of JS+AJAX ...
question The code has no prompt: Many non-front-e...