..


スポンサーリンク

"詳細"ボタンのスタイルのTwitter

によって書かれた記事ホレスMaico
ページ1の2

この記事ではjQueryライブラリを使用してTwitterに"詳細"ボタンの効果を再現する方法を説明します。

我々は再作成するボタンは、初心者のために、あなたが（ますますWeb 2.0の環境で使用されるAjax技術のおかげで可能となる） のページをリフレッシュするために必要とせずにデフォルトで表示されるメッセージのリストを拡張することができます。

我々は、単一のテーブルから構成されるテストデータベースを作成することから始めます。 

 



 （表の記事を作成







 msg_idのINT PRIMARY KEY AUTO_INCREMENT、

 





メッセージのテキスト







 ）;
ご覧のように構築したばかりのテーブルは2つのフィールドで構成されています。
  • メッセージを識別するmsg_idで 。
  • テキストが含まれているとメッセージ 。
私は意図的にデータベースのインスタンスの"骨を"減少しているが、明らかにあなたは開発の実際のニーズに基づいて、それを充実させることができます。

私の便宜のために私はデータベースにのみ接続し、私はそれを"dbconfig.php"と呼ばれているphpファイルを（私が包含に使用する）を作成 

 



 <？PHPの







で、$ conn = mysql_connect（"HOST"、"USERNAME""PASSWORD"）または死ぬ（はmysql_error（））;







 mysql_select_db（"NAME_DB"、$ connが）またはダイ（はmysql_error（））;







 ？>
としてファイル"dbconfig.phpが"同じコードを複数回書き換えしないように、我々が作成したファイルに含まれる言及。

2つのファイルを作成する必要が効果を実行するには：

  • まず最初の"n"をメッセージの表示に使用する。
  • とAjaxリクエストを行われる二つ目は（jQueryを使って実装されて）"次のメッセージ"を表示させる。
以下は、最初のphpファイル（"esempio.php"として保存できる）のコードは次のとおりです。 
 



 <HTML>







 <HEAD>







より多くの<title>ボタンTwitterのスタイル</タイトル>







 <link rel="stylesheet" type="text/css" href="style.css" />







全トラック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 ='+ msgに、



      



キャッシュ：falseの場合、



      



成功：関数（HTML）{



        



 $（'＃Morebutton'）削除（）;



        



 $（'＃More_updates'）追加（HTML）;



      



 }



    



 }）;



    



 falseを返します。



  



 }）;







 }）;







 </ SCRIPT>







 </ヘッド>







 <BODY>







 <div align="center" style="width:500px;">







 <？PHPの







 （'dbconfig.php'）が含まれます。







 $ Sql​​_check =するmysql_query（"より多くのmsg_idでDESCをLIMIT ORDER BY 2 SELECT * FROM"）;







中（$行=除いてmysql_fetch_array（$ sql_check））{



  



 $ msg_idで= $行['msg_idの'];



  



 $メッセージ= $行['メッセージ'];







 ？>







 <事業部のid ="<PHPのエコー$ msg_idで;？>"クラス="boxMsg">







 <span style="padding:5px;"> <php echoと$ msgに;？> </ SPAN>







 </ DIV>







 <？PHPの







 }







 ？>







 <div id="more_updates"> </ DIV>







 <div id="morebutton"> <Aのid ="<php​​ echoと同じmsg_idで$;？>"クラス="よりは"href ="＃">こちら</ a> </ DIV>







 </ DIV>







 </ BODY>







 </ HTML>
あなたが最初の2ポストを（降順で"msg_idで"記事の並び順）の表示の後に見ることができるように、idを"more_update"（次のメッセージをそこに"パック"になります）し、次を表すDIVを持つ空のdivがあるjQueryを使っての方法 - - アクションのリクエストのメッセージを私達が関連付けるどのへのリンク"詳細"。

文書のヘッダ（<HEAD> ...</ head>のは）、jQueryライブラリを呼び出した後、我々は、リンク"詳細"（この関数は"と呼ばれるに関連するJavaScript関数を説明し、クリックイベント ）。
リンクIDの"ID"（"msg_idで"）から取られたこの関数は、最後のメッセージを表示すると、この識別子は、後のパラメータとして第二のPHPファイルに送信されるAjaxリクエスト 、一方、divコンテナの内容を置き換える美しいで"More"をリンクさせる効果"ローディング"とアニメーションGIFだけの時間を殺すために、。

Ajaxリクエストが成功した場合（アプリケーションのプロパティの成功 ）私たちは"morebuttonを"すべてのdivを削除し、コンテナのdivを使用して"more_update"で（他のメッセージを含む）HTML応答を挿入追記を 。

同じカテゴリの...
E -ラーニング
ASPゼロ（電子ブック） ASPゼロ（電子ブック）
ゼロから、マイクロソフトのASPとVBScriptを学習。 わずか29€で。
ジャバスクリプト（コース） ジャバスクリプト（コース）
クライアントサイドスクリプトへのガイドを完了します。 39€から。
PHP（コース） PHP（コース）
動的なWebサイトを作成するためのフルコース。 49€から。
スポンサーリンク