Implementation of _jquery dynamic list effect based on jquery and bootstrap framework

Recently, based on the jquery and bootstrap framework, we have implemented a front-end effect with a dynamic list, basically realizing the same effect as the dynamic list. As follows:

1. Basic list Items

2. Full-text expansion of list items, folding (in the figure to expand the first item)

3. Review item launched

4. List data loading (load all)

5. Draw the effect of the point of praise function

6. Hover display function of reply list

The HTML code is as follows:

<! DOCTYPE html>  

The

CSS file code is as follows (MAIN.CSS):

<style>/* Global navigadion/* nav{width:100%; 
Height:3.5em; 
Padding-top:0em; 
Vertical-align:middle; 
Background-image:-moz-linear-gradient (Top, #99FFFF, #FFFFFF); 
Background-image:-webkit-gradient (linear, left top, left bottom, color-stop (0, #99FFFF), Color-stop (1, #FFFFFF)); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #99FFFF ', endcolorstr= ' #FFFFFF ', gradienttype= ' 
0 '); 
}. nav-content{width:1024px; 
Margin-left:auto; 
Margin-right:auto; #nav_user_name, #nav_user_avatar, #nav_btn_notice, #nav_btn_discuss, #nav_btn_read, #nav_btn_index, #nav_search_ 
Text, #nav_search_text {margin-top:0.5em; 
}. brand{font-size:2.5em; 
Font-weight:lighter; 
Color: #5e5e5e; font-family: "Microsoft Jhenghei"! 
Important 
}. Avatar img{padding:0.2em; 
} #notice_num {visibility:visible; 
backgroung-color:red; 
Color:white; 
Width:1.6em; 
Height:1.6em; 
background:red; 
-moz-border-radius:1em; 
-webkit-border-radius:1em; 
Border-radius:1em; PositionFixed 
} #nav_user_name {float:right; 
} #nav_user_avatar {float:right; 
}. content{width:1024px; 
Margin-left:auto; 
Margin-right:auto; 
}. left{Float:left; 
width:100%; 
}. right{Background-color:white; 
Float:left; 
width:100%; 
}. foot{Float:left; 
}. Foot span{font-size:0.8em; 
Font-weight:lighter; 
}. dashed-line{border-bottom:1px dashed; 
Border-bottom-color: #C9C9C9; 
}/*##############################################*//* dynamic list/. dynamic_node{width:100%; 
border-top:1px solid #eee; 
Padding-bottom:1em; 
Padding-top:1em; 
Float:left; 
}. dn_left{width:50px; 
Float:left; 
}. dn_left img{width:50px; 
height:50px; 
}. dn_dianzan,.dn_zannum{width:100%; 
Float:left; 
Margin-left:auto; 
Margin-right:auto; 
Text-align:center; 
}. dn_right{Padding-left:1em; 
width:666px; 
Float:left; 
}. dn_title label{font-weight:lighter; 
Color: #6b6b6b; 
}. Dn_title a span{color: #259; 
Font-weight:bold; }. dn_username_name{Font-weight:bold;
Font-size:0.8em; 
Color: #259; 
}. dn_username_signature{Font-size:0.8em; 
}. dn_action{Float:right; 
}. dn_action span{float:right; 
Margin-left:1em; 
Margin-top:1em; 
Font-size:0.8em; 
}. dn_content_digest,.dn_content_text{Float:left; 
Font-size:0.8em; 
Color: #363636; 
width:100%; 
}. dn_content_text{Display:none; 
}. dn_content_close1,.dn_content_close2{Float:right; 
Display:none; 
Font-size:1em; 
}. dn_action{Display:none; 
Float:right; 
}. dn_comm{Float:left; 
width:100%; 
Display:none; 
}. dn_comm_items{Float:left; 
width:100%; 
}. dn_comm_item{Float:left; 
Margin-top:0.8em; 
border-top:1px solid #eee; 
Padding-top:0.8em; 
}. dn_comm_item_left{width:50px; 
Float:left; 
}. dn_comm_item_mid{width:560px; 
Float:left; 
}. dn_right_top{width:100%; 
Float:left; 
}. dn_comm_item_right{width:30px; 
Float:right; 
Text-align:center; 
}. dn_comm_item_left img{width:30px; 
height:30px; }. dn_comm_item_middle_username,.dn_comm_item_mid_content,.dn_comm_item_mid_time{Float:left; 
Font-size:0.8em; 
}. dn_comm_item_mid_action{Float:right; 
Margin-left:1em; 
Font-size:0.8em; 
Display:none; 
}. dn_comm_item_mid_action span{margin-left:1em; 
}. dn_comm_dianzan{Font-size:1em; 
width:100%; 
Margin-left:auto; 
Margin-right:auto; 
}. dn_comm_zannum{Font-size:1em; 
Color: #797979; 
width:100%; 
Margin-left:auto; 
Margin-right:auto; 
}. dn_comm_foot_left{Float:left; 
Padding-top:0.4em; 
Color: #797979; 
width:50%; 
Font-size:0.7em; 
}. dn_comm_replay{Float:left; 
width:100%; 
Margin-top:1em; 
Padding-top:1em; 
border-top:1px solid #eee; 
}. dn_comm_replay_field{Float:left; 
width:100%; 
Margin-bottom:1em; 
}. dn_comm_replay_buttoms a,button{float:right; 
}. dn_comm_replay_buttoms_cancel{padding-top:0.5em; 
Margin-right:1em; 
}. dn_comm_dianzan{width:100%; 
Float:left; 
}. dn_comm_showall{Float:left; 
width:100%; 
Margin-top:1em; 
Padding-top:1em; 
border-top:1px solid #eee; }. Dn_comm_showall #dn_comm_showall_button{Float:left; 
width:80%; 
margin-left:10%; 
margin-right:10%; 
Margin-top:1em; 
border-top:1px solid #eee; 
}/*##############################################*//* */global{width:716px; 
}. list_layout,.load_flag{width:100%; 
Float:left; 
Display:block; 
}. load_flag{Padding-top:1em; 
border-top:1px solid #eee; 
Margin-bottom:3em; 
}. Load_flag button{float:left; 
width:80%; 
margin-left:10%; 
margin-right:10%; 
}. load_flag #load_flag_info {float:left; 
Text-align:center; 
width:80%; 
margin-left:10%; 
margin-right:10%; 
Display:none; /*##############################################*//* */</style> JS file contents are as follows (Test.js): [JavaScript] View plain C 
Opy $ (document). Ready (function () {Url_user = "http://user.com/i="; 
url_img = "http://127.0.0.1/pages/"; 
Url_dianzan = "http://dianzan.com"; 
Url_dn_detail = "http://dt.com/i="; 
Layout_list = $ (". List_layout"); 
T_DN = $ ("#t_dn"); 
T_dn_comm = $ ("#t_dn_comm"); Maxnum = 2; 
Max load Number num = 1; Load_Flag = $ (". Load_flag"); 
function Render_dn_list (ARR_DN) {for (var i=0; i<arr_dn.length;i++) {var node_dn = T_dn.clone (); Node_dn.find (". dn_id"). attr ("Content", arr_dn[i]["id")); Dynamic ID node_dn.find (". user_id"). attr ("Content", arr_dn[i]["userid")); User ID Node_dn.find (". Dn_left. Dn_user_avatar a"). attr ("href", url_user+arr_dn[i]["userid")); User name link Node_dn.find (". Dn_left. Dn_user_avatar a img"). attr ("src", url_img+arr_dn[i]["Avatar"]); User Avatar Node_dn.find (". Dn_zannum span"). Text (arr_dn[i]["Zan"]); Point Praise//node_dn.find (". Dn_dianzan a"). attr ("href", arr_dn[i]["Avatar")); Point Praise Link Node_dn.find (". Dn_title a"). attr ("href", url_dn_detail+arr_dn[i]["FID"]+ "#" +arr_dn[i]["ID"]); Jump dynamic page Anchor Node_dn.find (". Dn_title a span"). Text (arr_dn[i]["from"]); belongs to title Node_dn.find (". Dn_username a"). attr ("src", url_user+arr_dn[i]["userid")); User name link Node_dn.find (". Dn_username_name"). Text (arr_dn[i]["username")); User name Node_dn.find (". Dn_username_signature"). Text (arr_dn[i]["signature")); User signed Var DIgest = ""; 
var content = arr_dn[i]["Content"]; if (Content.length >) {digest=content.substring (0,150) + "... 
"; 
} else{digest=content; } node_dn.find (". Dn_content_digest"). Text (digest); 
Summary Node_dn.find (". Dn_content_digest"). Append ("<a href= ' # ' > Show All </a>"); Node_dn.find (". Dn_content_text"). Text (content); Body Node_dn.find (". Dn_action_time"). Text (arr_dn[i]["Posttime")); Publish time/Add Click Summary Event Node_dn.find (". Dn_content_digest"). Click (function () {var dn_right = $ (this). Parent (). Parent () par 
ENT (); 
Dn_right.find (". Dn_content_text"). Toggle (); 
Dn_right.find (". Dn_content_digest"). Toggle (); 
Dn_right.parent (). Find (". Dn_content_close1"). Toggle (); 
Dn_right.parent (). Find (". Dn_content_close2"). Toggle (); 
Dn_right.parent (). Find (". Dn_action"). Toggle (); 
var comm= dn_right.find (". Dn_comm"); 
if (Comm.css ("display") = = "Block") {comm.css ("display", "none"); return false; 
// !! 
} 
); Add Click Collapse Event Node_dn.find (". Dn_content_close2,.dn_content_close1"). Click (functIon () {var dn_right = $ (this). Parent (). parent (); 
Dn_right.find (". Dn_content_text"). Toggle (); 
Dn_right.find (". Dn_content_digest"). Toggle (); 
Dn_right.parent (). Find (". Dn_content_close1"). Toggle (); 
Dn_right.parent (). Find (". Dn_content_close2"). Toggle (); 
Dn_right.parent (). Find (". Dn_action"). Toggle (); 
var comm= dn_right.find (". Dn_comm"); 
if (Comm.css ("display") = = "Block") {comm.css ("display", "none"); return false; 
// !! 
} 
); Add hover underline effect Node_dn.find (". Dn_action_comm,.dn_action_share,.dn_action_report") to comment, share, Report button. Hover (function () {$ 
(this). CSS ("text-decoration", "underline"); return false; 
// !! 
The function () {$ (this). CSS ("Text-decoration", "none"); return false; 
// !! 
} 
); 
Adds a Node_dn.find event (". Dn_dianzan") to the list item. Click (function () {//alert (' Zan '); 
var Dn_left = $ (this). parent (); 
var zan_num = Dn_left.find (". Dn_zannum span"); 
var Currzan = Zan_num.text (); 
Zan_num.text (parseint (Currzan) +1); 
Zan_num.animate ({fontsize: "1.2em"}, "fast"); $ (this). Animate ({foNtsize: "1.2em"}, "fast"); 
Zan_num.animate ({fontsize: "1em"}, "fast"); 
$ (this). Animate ({fontsize: "1em"}, "fast"); return false; 
// !! 
} 
); 
Load comments and Process Comment Item event function Load_comm (dn_id,dn_comm_items,flag) {var load_url = "Mockdata/commdata_"; 
if (flag = = 1) {Load_url = "mockdata/commdata_"; 
} else{load_url = "Mockdata/commdata_"; } $.ajax ({url: "Mockdata/commdata_" +dn_id, type: "Get",//Use Get method to access background dataType: "JSON",//Return data in JSON format Async:false,//d ATA: "pageindex=" + pageindex,//the data to be sent Complete:function () {$ ("#load"). Hide ();},//ajax hidden loading prompt success When the request completes: 
Function (msg) {//msg for the returned data, here do the data binding var encoded = $.tojson (msg); 
Ret_code =$.evaljson (encoded). Code; 
ARR_DN =$.evaljson (encoded). Data; 
if (Ret_code = = "=") {for (Var i=0;i<arr_dn.length;i++) {var n_comm = T_dn_comm.clone (); 
N_comm.find (". dn_comm_id"). attr ("Content", arr_dn[i]["id")); 
N_comm.find (". Dn_comm_item_left a"). attr ("href", url_user+arr_dn[i]["userid")); N_comm.find (". Dn_comm_item_left img"). attr ("content"),url_img+arr_dn[i]["Avatar"]); 
N_comm.find (". Dn_comm_item_middle_username a"). attr ("href", url_user+arr_dn[i]["userid")); 
N_comm.find (". Dn_comm_item_middle_username a span"). Text (arr_dn[i]["username"); 
N_comm.find (". Dn_comm_item_mid_content span"). Text (arr_dn[i]["content"]); 
N_comm.find (". Dn_comm_foot_left span"). Text (arr_dn[i]["Posttime"]); 
N_comm.find (". Dn_comm_zannum span"). Text (arr_dn[i]["Zan"]); 
Adds a hover effect n_comm.hover (function () {$ (this) to a comment item. FIND (". Dn_comm_item_mid_action"). Toggle (); 
}); 
Add a point of Praise animation effect var Zan = N_comm.find (". Dn_comm_dianzan") to a comment item; 
Zan.click (function () {var zan_num = $ (this). Parent (). Find (". Dn_comm_zannum"); 
var Currzan = Zan_num.text (); 
Zan_num.text (parseint (Currzan) +1); 
Zan_num.animate ({fontsize: "1.2em"}, "fast"); 
$ (this). Animate ({fontsize: "1.2em"}, "fast"); 
Zan_num.animate ({fontsize: "1em"}, "fast"); 
$ (this). Animate ({fontsize: "1em"}, "fast"); 
return false; 
} 
); 
Dn_comm_items.append (N_comm); 
} else{alert (Ret_code); 
} 
} 
}); 
}; LoadPopular comments on a particular item Node_dn.find (". Dn_action_comm"). Click (function () {var DN = $ (this). Parent (). Parent (). Parent () parent (); 
Dn.find (". Dn_comm"). Toggle (); 
var dn_comm_items = Dn.find (". Dn_comm_items"); 
Dn_comm_items.empty (); 
var dn_id = Dn.find (". dn_id"). attr ("content"); 
Load_comm (dn_id,dn_comm_items,0); return false; 
// !! 
} 
); Loads all comments for an item node_dn.find (". Dn_comm_showall_button"). Click (function () {var DN = $ (this). Parent (). Parent (). Parent (). 
Parent (); 
var dn_comm_items = Dn.find (". Dn_comm_items"); 
Dn_comm_items.empty (); 
var dn_id = Dn.find (". dn_id"). attr ("content"); 
Load_comm (dn_id,dn_comm_items,1); return false; 
// !! 
} 
); 
Layout_list.append (NODE_DN);  
The function fill_list () {$.ajax {url: ' mockdata/listdata ', type: ' Get ',//Use the Get method to access the background dataType: "JSON",//Return data in JSON format Async:false,//data: "pageindex=" + pageindex,//the data to be sent Complete:function () {$ ("#load"). Hide ();},// When Ajax requests are complete hide loading hint success:function (msg) {//msg for the returned data, here do the data binding var encoded = $.tojson (msg);
Ret_code =$.evaljson (encoded). Code; 
ARR_DN =$.evaljson (encoded). Data; 
if (Ret_code = = "") {render_dn_list (ARR_DN); 
else{alert (Ret_code); 
} 
} 
}); 
//Register Event $ (". Load_flag") for the Load Data button. Click (function () {if (num <= maxnum) {fill_list (); 
num++; 
} else{Load_flag.find ("#load_flag_info"). CSS ("Display", "block"); 
Load_flag.find ("#load_flag_button"). CSS ("display", "none"); 
} 
}); 
Fill_list ();  });

Forged List Data format:

{" 
Code": "", " 
data": [ 
{ 
"ID": "1", 
"FID": "1212", 
"userid": "1001", 
"Avatar": " Images/user.png "," 
type ":" Read annotation ", 
" from ":" Sutra/First product law will be divided by ", 
" username ":" User name ", 
" signature ":" User personality signature "," 
Digest ":" Content summary content to pick. To content summary, want content to content "," Content 
":" When the elders need Bodhi. In the public. That is, from the seat. Partiality to the right shoulder. Right knee on the ground. Palms respectfully. And the White Buddha says. Shiyo. The Tathagata is a good protector of all bodhisattvas. He who is good pays the bodhisattva. The world's most respected. Good man. Good woman. Hair 耨 Doro Three virtuous three Bodhi heart. Where should cloud live, cloud how to subdue its heart. Buddha say. Good and good. Need Bodhi. As thou hast said. The Tathagata is a good protector of all bodhisattvas. He who is good pays the bodhisattva. Thou shalt listen now. When I say to thee. Good man. Good woman. Hair 耨 Doro Three virtuous three Bodhi heart. To live, to yield to its heart. Only then. The world's most respected. May the music be heard. ", 
" Posttime ":" 2015-09-08 12:00:09 ", 
" Zan ":" M " 
}, 
{ 
" ID ":" 3 ", 
" FID ":" 1212 ", " 
userid": "1001", " 
Avatar": "Images/user.png", 
"type": "Reading Annotation", 
"from": "Sutra/First product law will be divided by", 
" Username ":" User name ", 
" signature ":" User character signature ", 
" Digest ":" Content Summary content picks. " To content summary, to content to content "," "Contents 
": "Not in a Buddha two Buddha 345 Buddha and seed good roots." has been in the countless thousands of Buddhas of all kinds of good roots. Smell is chapters. Even a person who believes in the net. Need Bodhi. The Tathagata learns to see. are all sentient beings. As immeasurable merit. Why so. All sentient beings have no reply to me. Human phase. All sentient beings phase. The life of a person is a phase. Unable to phase. There is no unlawful phase. Why so. are all sentient beings. If the heart takes the phase. For the life of all my beings. If the phase of the extraction. That I am a living person. Why so. If we take the illegal phase, that is the life of all of us. is therefore not to be applied. Should not be taken illegally. ", 
" Posttime ":" 2015-09-08 12:00:09 ", 
" Zan ":" 100 " 

Forged Comment Data format:

{" 
Code": "", " 
data": [ 
{ 
"ID": "100001", 
"FID": "1212", 
"userid": "1001", 
"Avatar": "Images/user.png", 
"username": "User name", 
"content": "When the elders need Bodhi." He who is good pays the bodhisattva. Thou shalt listen now. When I say to thee. A good man should live as a surrender to his heart. Only then. The world's most respected. May the music be heard. ", 
" Posttime ":" 2015-09-08 12:00:09 ", 
" Zan ":" M " 
}, 
{ 
" ID ":" 100001 ", 
" FID ":" 1212 " , " 
userid": "1001", " 
Avatar": "Images/user.png", 
"username": "User name", 
"content": "When the elders need Bodhi." He who is good pays the bodhisattva. Thou shalt listen now. When I say to thee. A good man should live as a surrender to his heart. Only then. The world's most respected. May the music be heard. ", 
" Posttime ":" 2015-09-08 12:00:09 ", 
" Zan ":" 100 " 

The above is a small set of the introduction of jquery and Bootstrap based on the framework of the implementation of the dynamic list of the front-end effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!