Bạn muốn theo dõi những bình luận mới nhất từ trang Twitter? Plugin Twitter sẽ giúp tải những bình luận mới nhất của người dùng Twitter trên toàn cầu với chức năng lọc ngôn ngữ thô tục để tránh những nội dung xấu trên trang web của bạn.Plugin này còn có chức năng hỗ trợ tìm kiếm nhiều người dùng, hiển thị hình Avatar và đặc biệt là không làm chậm trang web khi các tweet đang hạ tải.
Xem Demo.
Sau đây là các bước cài đặt:
1. Đặt các file jQuery và javasctipt bên dưới vào trước thẻ </head>.
Tiếp đến cần tạo phần chứa nội dung plugin, đặt thành phần div với định dạng id như sau:
Xem Demo.
Sau đây là các bước cài đặt:
1. Đặt các file jQuery và javasctipt bên dưới vào trước thẻ </head>.
<style type="text/css">
/*JUITTER PLUGIN CSS*/
#juitter{width:550px;float:left;}
#juitterSearch{clear:both;padding:7px 0 5px 0;}
#juitterSearch P{font-size:1.2em;color:#2CAF1D}
#juitterSearch INPUT{padding:4px;border:solid 1px #666;width:250px;color:#666}
#juitterContainer{} /*Juitter container*/
#juitterContainer .twittList{margin:0;padding:0;} /* UL that will contain the list of tweets */
/* Bellow the list of tweets "<li>" */
#juitterContainer .twittLI{list-style:none;background:#EEFDEA;margin:0;padding:5px 0 0 0;border-bottom:dashed 1px #CAF8C9;padding:3px;clear:both;height:55px;}
#juitterContainer .twittList SPAN.time{color:#777;font-size:0.9em}
#juitterContainer .twittList A{color:#006600;} /*Links inside the tweets list */
/* Bellow the CSS for the avatar image */
#juitterContainer .juitterAvatar{float:left;border:solid 1px #D3EECA;background:#FFF;margin-right:5px;padding:2px;width:48px;;height:48px;}
#juitterContainer .jRM{float:right;clear:both} /*read it on twitter link*/
#juitterContainer .extLink{} /*CSS for the external links*/
#juitterContainer .hashLink{} /*CSS for the hash links*/
/*end of Juitter CSS*/
</style>
<script language="javascript" src="http://juitter.com/app/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script language="javascript" src="http://juitter.com/app/js/jquery.juitter.js" type="text/javascript"></script>
<script language="javascript" src="http://juitter.com/app/js/system.js" type="text/javascript"></script>
Các các file trên thì file jquery-1.3.1.min.js là phần lõi jQuery để làm cho plugin hoạt động, file jquery.juitter.js là file lõi và cấu hình plugin, file system.js là file mẫu về cách làm cho plugin hoạt động trên trang web của bạn./*JUITTER PLUGIN CSS*/
#juitter{width:550px;float:left;}
#juitterSearch{clear:both;padding:7px 0 5px 0;}
#juitterSearch P{font-size:1.2em;color:#2CAF1D}
#juitterSearch INPUT{padding:4px;border:solid 1px #666;width:250px;color:#666}
#juitterContainer{} /*Juitter container*/
#juitterContainer .twittList{margin:0;padding:0;} /* UL that will contain the list of tweets */
/* Bellow the list of tweets "<li>" */
#juitterContainer .twittLI{list-style:none;background:#EEFDEA;margin:0;padding:5px 0 0 0;border-bottom:dashed 1px #CAF8C9;padding:3px;clear:both;height:55px;}
#juitterContainer .twittList SPAN.time{color:#777;font-size:0.9em}
#juitterContainer .twittList A{color:#006600;} /*Links inside the tweets list */
/* Bellow the CSS for the avatar image */
#juitterContainer .juitterAvatar{float:left;border:solid 1px #D3EECA;background:#FFF;margin-right:5px;padding:2px;width:48px;;height:48px;}
#juitterContainer .jRM{float:right;clear:both} /*read it on twitter link*/
#juitterContainer .extLink{} /*CSS for the external links*/
#juitterContainer .hashLink{} /*CSS for the hash links*/
/*end of Juitter CSS*/
</style>
<script language="javascript" src="http://juitter.com/app/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script language="javascript" src="http://juitter.com/app/js/jquery.juitter.js" type="text/javascript"></script>
<script language="javascript" src="http://juitter.com/app/js/system.js" type="text/javascript"></script>
Tiếp đến cần tạo phần chứa nội dung plugin, đặt thành phần div với định dạng id như sau:
<div id="juitter">
<form method="post" id="juitterSearch" action="">
<p>Search Twitter: <input type="text" class="juitterSearch" value="Type a word and press enter" />
</p>
</form>
<div id="juitterContainer"></div>
</div>
Đặt phần code ở trên vào phần thân của trang web (giữa 2 thẻ <body>, </body>).
<form method="post" id="juitterSearch" action="">
<p>Search Twitter: <input type="text" class="juitterSearch" value="Type a word and press enter" />
</p>
</form>
<div id="juitterContainer"></div>
</div>
0 nhận xét | Viết lời bình