"추가"버튼 스타일 트위터
2 페이지 1
이 문서에서 나는 jQuery 라이브러리를 사용하여 트위터에 "자세히"버튼의 효과를 재현하는 방법을 설명합니다.
우리가 uninitiated위한 재현하려는 버튼을, 당신이 (점점 웹 2.0의 환경에서 사용 에이 잭스 기술 덕분에 가능하는) 페이지를 새로 고쳐야하는 필요없이 기본적으로 표시되는 메시지의 목록을 확장할 수 있습니다.
우리는 하나의 테이블로 구성되어 테스트 데이터베이스를 생성하여 시작합니다 :
(테이블 게시물 CREATE msg_id INT PRIMARY KEY AUTO_INCREMENT, 메시지 텍스트 );방금 만든 당신이 두 분야로 구성되어있는 테이블을 볼 수 있듯이 :
- 메시지를 식별합니다 msg_id;
- 텍스트를 포함하고 메시지를;
내 편의를 위해 나는 데이터베이스에만 연결을있는 PHP 파일을 (나는 포함에 사용됩니다) 만들어지고 난 "dbconfig.php '이라고 불리는
<? PHP $ Conn = mysql_connect ( "호스트", "USERNAME", "비밀 번호") 또는 죽을 (mysql_error ()); mysql_select_db ( "NAME_DB", $ conn) 또는 죽을 (mysql_error ()); ?>다른 이름으로 파일 "dbconfig.php"이 동일한 코드를 여러 번 다시 작성하지만큼, 우리가 만드는 파일에 포함됩니다 언급했다.
두 개의 파일을 작성하는 데 필요한 효과를 수행하려면 :
- 먼저 최초의 "N"메시지의 표시에 사용;
- 그리고 AJAX 요청을 만들 것입니다 두 번째는 (jQuery와 함께 구현)의 "다음 메시지"를 표시합니다.
<HTML>
<HEAD>
더 <TITLE> 버튼 트위터 스타일 </ TITLE>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ SCRIPT>
<script type="text/javascript">
$ (함수 () {
$는 ( '. 더'). (함수 () {클릭하십시오
var에 요소 = $ (이);
var에 오류 = element.attr ( 'ID');
$ ( '# Morebutton') HTML ( '<img src="loading.gif" />').;
$. 아약스 ({
형식 : 'POST',
URL : 'more_ajax.php'
날짜 : 'lastmsg ='+ 메시지,
캐시 : 거짓,
성공 : 함수 (HTML) {
$ ( '# Morebutton') 제거 ().;
$ ( '# More_updates') 추가 (HTML).;
}
});
false를 반환;
});
});
</ SCRIPT>
</ HEAD>
<BODY>
<div align="center" style="width:500px;">
<? PHP
( 'dbconfig.php') 포함;
$ Sql_check = mysql_query ( "더 msg_id DESC 한도 2 주문에서 *를 선택");
동안 ($ 행 = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ 행 [ 'msg_id'];
$ 메시지 = $ 행 [ '메시지'];
?>
<사업부 ID = "<PHP 에코 msg_id $;?>"클래스 = "boxMsg">
<span style="padding:5px;"> <PHP 에코 $ 메시지;?> </ SPAN>
</ 사업부>
<? PHP
}
?>
<div id="more_updates"> </ 사업부>
<div id="morebutton"> <ID = "<PHP 에코 msg_id $;?>"클래스 = "자세히"HREF = "#"> 자세히 </ A> </ 사업부>
</ 사업부>
</ BODY>
</ HTML>
당신은 처음 2 게시물 (내림차순으로 "msg_id"로 정렬) 본 후 볼 수 있듯이, ID "more_update"(다음 메시지가있다 "포장"이됩니다)하고 다음을 나타내는 사업부와 빈 사업부가 우리가 연결하는 '추가'링크 - jQuery를 사용하는 방법 - 작업 요청 메시지를.
문서의 머리글 (<HEAD> ...</ HEAD>)는 jQuery 라이브러리를 호출 후에, 우리는 링크를 "추가"(이 기능은 '과이라고와 관련된 자바 스크립트 기능을 설명 Click 이벤트 ).
링크 식별자의 "ID"( "msg_id")에서 찍은이 함수가 마지막으로 메시지를 표시와 함께,이 식별자는 다음 매개 변수로 두 번째 PHP 파일에 보내집니다 AJAX 요청 한편, 사업부 컨테이너의 내용을 교체 아름다운 여자와 "추가"링크 효과 "로드"로 애니메이션 GIF 그저 시간을 죽이고.
AJAX 요청이 성공했다면 (응용 프로그램 속성의 성공) 우리는 "morebutton"를 모든 사업부를 제거하고 컨테이너 사업부를 사용하여 "more_update"에 (다른 메시지를 포함) HTML 응답을 삽입 추가를 .
 |
ASP 제로 (전자책)
처음부터 마이크로 소프트 ASP와 VBScript를 학습. 단 29에 €. |
 |
자바 스크립트 (코스)
클라이언트측 스크립팅 가이드를 완료하십시오. 39 €에서. |
 |
PHP (코스)
동적 웹 사이트를 만드는 전체 과정. 49 €에서. |