web-dev-qa-db-ja.com

ユーザー名にマウスオーバーすると、ポップアップビューが表示されます

ユーザーがユーザー名にマウスオーバーしたときにユーザーのポップアップajax情報またはビューを持つユーザーの写真を表示する方法。 ajaxを非表示にせずにプロファイルユーザーから情報を取得したい。 FacebookやLinkedInなど

7viewsusersajaxtheming
1
user1630

これがあなたを助けることを願っています

Drupal 7では、要件に応じてqTip（Stylish jQuery Tooltips）を使用できますViewsを含むモジュール。

  • QTipをインストールして構成したら、qtipの例を確認します（qtip README.txtを参照）。

  • この例では、いくつかのユーザーフィールドを含むビューを作成しました。これらのフィールドは、ユーザーの写真をホバーするとポップアップします。

  • 新しいビューを作成し、ポップアップに表示するフィールドを追加します。 enter image description here

  • ユーザー情報をポップアップで表示するには、適切な構造を与える必要があります（qtip README.txtを読んでください）。

  • profile_imageビューフィールドのHTML構造を追加しました

    enter image description here

  • ユーザー画像の上にマウスを置くと、ユーザー情報がポップアップします。そして、[〜＃〜] css [〜＃〜]を必要に応じて変更します。

  • BeautyTips を参照することもできます。たとえば、これを参照できます link

Drupal 7：Ajaxロード

手順

  • ホバーでユーザーの詳細を表示するには、属性をユーザー名に追加する必要があります。これは、アクティブなテーマの一時ファイルでプリプロセス関数 template_preprocess_username を使用して実行できます。
     
function themeName_preprocess_username(&$variables) {
  $variables['attributes_array'] = array('class' => array("user-info"), 'data-uid' => $variables['account']->uid);//adding more attributes for your requirement
}
  • ポップアップに表示するフィールドを含むビューを作成します。

  • Get/user_details /％のようなユーザーの詳細を取得するメニューを作成します。ここで％はユーザーIDです。このメニューはユーザーの詳細を返します。

    
function test_menu() {
...
$items['get/user_details/%'] = array(
'title' => t(''),
'type' => MENU_CALLBACK,
'page callback' => 'get_user_details_ajax_callback',
'page arguments' => array(2),
'access arguments' => array('access content'),
);
...
return $items;
}
//Implement the ajax callback to get user details
function get_user_details_ajax_callback ($uid) {
$html = '';
$html = views_embed_view('VIEWNAME','display_id', $uid);
return $html;
}

  • ホバーに関するユーザーの詳細を表示するには、$。ajaxを使用してajax呼び出しを行う必要があります

  • ユーザーがユーザー名にカーソルを合わせると、data-uid属性が取得され、ユーザー情報を取得するためにajax呼び出しが行われます。

  • ユーザーの詳細を取得したら、それを追加してポップアップとして表示します。

    
Drupal.behaviors.getUserDetails = {
    attach: function (context, settings) {
      var replace_wrapper = 'user-'+$(this).attr('data-uid')+'details';
      //add html to show user details
      $( "a.user-info" ).each(function( index ) {
        if(!$(this).closest('div').hasClass('user-details-wrapper')){

          $(this).append("<div class='user-details-wrapper'><div class'"+replace_wrapper+"'></div></div>");
    }
  });
  $('a.user-info').mouseenter(function(){
    if($(replace_wrapper).is(':empty')){//if empty then make ajax call and
      var url = Drupal.settings.basePath + 'get/user_info/'+ $(this).attr('data-uid');
      $.ajax({
        url: url,
        type: 'GET',
        success: function (data) {
          //create html and append to replace_wrapper
          var user_detail_html = '';
          //code to get user html here
          $(replace_wrapper).each(function( index ) {
            $(this).html(user_detail_html);
          });
        }
      });
    }else{
      //show popup here
      $('user-details-wrapper').show();
    }
  }).mouseleave(function() {
    //hide popup here
    $('user-details-wrapper').hide();
  });
 }
}
</ code>

  • 要件に応じて変更を加えます

    注： views_embed_view

7
inizio

カスタムモジュールに新しいパスを作成します。

function MODULE_menu() {
  $items['get/profile/%/ID'] = array(
    'page callback' => 'get_info',
    'page arguments' => array('$nid', 1),
    // …
  );
}

ページのコールバックで、次のコードを使用します。

function  get_info($nid) {
  $userInfo = user_load($nid);

  // Create your HTML.

  return $output;
}

ユーザーがユーザー名の上にマウスを置くと、AJAXでそのURLが呼び出されます。

 $.ajax({
   type: "POST",
   url: "<?php echo url('get/profile'); ?>/"+NID,
   async: false,
   cache: false,
   timeout: 30000,
   success: function(resp) {
     $('popUp').html(resp);
   }
 });

そのためのビューを作成する必要はありませんが、それを使用する必要がある場合は、ビューを作成し、ページのコールバックで次のコードを使用できます。

function  get_info($nid) {
  views_embed_view('VIEWNAME');
  return $output;
}
0
Zakaria Elhariri