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 comments... read them below or add one }
Post a Comment