-1

image(html tag)をクリックすると、ポップアップパネルが表示されます(例:Facebookの画像をクリックしたときのポップアップペインのように)。注:ポップアップペインには画像とテキストが含まれている必要があります(データベースから取得)。

どうすればそれができますか?事前にt​​hx

4

1 に答える 1

2

これに沿った何か:

HTMLページに、次の種類のコードを追加します。

(もちろん、最初にページにJqueryを含めます)

image(html tag)をクリックすると、

$('#idOfWhateveriWant').on('click',function(){

});

ポップアップパネルを表示したいのですが(例:Facebookのポップアップペインのように画像をクリックしたとき)。

$('#idOfWhateveriWant').on('click',function(){
   //window.open("whatever") 
   //ABOVE NOT RECOMMENDED

   //use below instead

   $.ajax({
   url: 'ajax/test.php',
   success: function(data) {
      $('.result').html(data);
      //or use some jquery plugin you made 
      //or external plugin
      // to make your pane appear
      //$.WHateverPopupPanePlugin(whatever,data)
      alert('Load was performed.');
   }); //SEE http://api.jquery.com/jQuery.ajax/
});

注:ポップアップペインには画像とテキストが含まれている必要があります(データベースから取得)。

ajax / test.phpの場合:

  1. 最初にmysqlデータベースを構成します。
  2. それにいくつかのデータを入れてください
  3. このようなコードを追加して、データベースのコンテンツにアクセスし、JSONオブジェクトとしてエコーします

以下のPHPの例:

 <?php 

  //--------------------------------------------------------------------------
  // Example php script for fetching data from mysql database
  //--------------------------------------------------------------------------
  $host = "localhost";
  $user = "root";
  $pass = "root";

  $databaseName = "ajax01";
  $tableName = "variables";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------
  include 'DB.php';
  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------
  $result = mysql_query("SELECT * FROM $tableName");          //query
  $array = mysql_fetch_row($result);                          //fetch result    

  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($array);

?>

追加のヘルプ:

于 2012-09-09T16:57:59.187 に答える