【发布时间】：2017-05-12 04:55:20
【问题描述】：
我让 Jquery 在鼠标悬停在文本上时显示工具提示。它适用于每一页。
我的网格视图中还有一个图像列。 当鼠标悬停在它们上时，我让 Jquery 放大这些图像 但问题是，它只适用于第一页
我阅读了一些建议在 JS Script 中使用 SELECTOR 的文章，但我不知道如何实现它。
请帮帮我。
非常感谢，很抱歉打扰大家。
这是我的查看代码
<?php
\yii\web\JqueryAsset::register($this);
\yii\bootstrap\BootstrapPluginAsset::register($this);
$tooltipjs=<<< 'SCRIPT'
$('body').tooltip({selector: '[data-toggle="tooltip"]'});
SCRIPT;
$this->registerJs($tooltipjs);
$jss = <<< 'SCRIPT'
$(".enlargephoto").hover(function(){
$(".photobox").remove();
var srcval = $(this).attr("src");
var names = $(this).attr("namas");
$("<div class=\'photobox\' ></div>")
.html("<p class=\'names\'>"+names+"</p><img src="+srcval+"></img>")
.appendTo("#usergrids").hide().fadeIn("fast");
},function(){
$(".photobox").remove();
});
$(".enlargephoto").mousemove(function(e){
var xx = e.pageX - 20;
var tt = e.pageY - 120;
$(".photobox").css({top:tt, left:xx});
});
SCRIPT;
$this->registerJs($jss);
$css=<<< 'SCRIPT'
.photobox
{
margin-left:200px;
visibility:visible;
opacity:1;
-moz-opacity:1;
position: absolute ;
padding:10px;
border:2px solid Silver;
background:-moz-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond);
background:-webkit-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond);
background:-o-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond);
box-shadow:2px 4px 75px DarkSlateGray;
-webkit-box-shadow:2px 4px 75px DarkSlateGray;
-moz-box-shadow:4px 2px 75px DarkSlateGray;
}
.photobox img
{
width:200px;
height:200px;
border:2px inset Snow;
}
.photobox .names p
{
line-height:15px;
font-family: 3Dumb ;
font-size:25px;
font-weight:bold;
text-shadow: 3px 3px 3px DarkSlateGray;
color:MidnightBlue;
text-align:center;
text-transform:uppercase;
}
SCRIPT;
$this->registerCss($css);
?>
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
use yii\helpers\ArrayHelper;
use yii\helpers\Url;
use yii\helpers\BaseUrl;
$this->title = Yii::t('app', 'Users List');
?>
<div class="user-record-index">
<?php Pjax::begin(['id' => 'userform']); ?>
<?= GridView::widget(['id'=>'usergrids','options' => ['data-pjax' => true ],
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
[
'label' => 'Foto',
'format' => 'html',
'filter'=> '',
'content' => function($data)
{
$dest = Yii::getAlias('@web/');
return Html::img($dest . $data->filepath,[
'class'=>'enlargephoto','width' => '50px','height'=>'50px',
"style"=>"border:1px ridge Silver; box-shadow:2px 3px 15px Black;
-webkit-box-shadow:2px 3px 15px Black;
cursor:pointer",
'namas'=>$data->nama,
]);
},
'contentOptions' => ['class' => 'content-grid-css'],
'headerOptions' => ['class' => 'header-grid-css'],
],
[
'attribute'=>'username',
'format'=>'html',
'content' => function($data)
{
return Html::tag('div', $data->username,
[
'data-toggle' => 'tooltip',
'data-placement'=>'right',
'title'=> $data->nama,
'style'=> 'cursor:pointer;'
]);
},
'options' => ['width' => '120'],
'contentOptions' => ['class' => 'content-grid-css'],
'headerOptions' => ['class' => 'header-grid-css'],
],
[
'attribute'=>'nama',
'format'=>'html',
'content' => function($data)
{
return Html::encode($data->nama);
},
'contentOptions' => ['class' => 'content-grid-css'],
'headerOptions' => ['class' => 'header-grid-css'],
],
[
'attribute'=>'email',
'format'=>[
'Email',
],
'value' => function($data)
{
return Html::encode($data->email);
},
'contentOptions' => ['class' => 'content-grid-css1'],
'headerOptions' => ['class' => 'header-grid-css'],
],
[
'attribute'=>'create_at',
'format' => ['datetime', 'php:d-m-Y H:i:s'],
'options' => ['width' => '120'],
'content' => function($data)
{
return Html::encode($data->create_at);
},
'contentOptions' => ['class' => 'content-grid-css'],
'headerOptions' => ['class' => 'header-grid-css'],
],
[
'class' => \yii\grid\ActionColumn::className(),
//'controller' => 'MarketingController',
'template' => '{update}{delete}{view}',
'header' => Html::a('<i class="glyphicon glyphicon-plus"></i> Add New',['create','id'=>'addb']),
'buttons' =>
[
'update' => function($url, $model, $key)
{
return Html::a('<span class="glyphicon glyphicon-pencil"></span>',
$url,['title'=> Yii::t('app','update'),]);
},
'delete' => function($url, $model, $key)
{
return Html::a('<span class="glyphicon glyphicon-trash"></span>',
$url,['title'=> Yii::t('app','delete'),'data-pjax' => 'userform',
'data-confirm' => Yii::t('app','Are you sure to delete this item'),
'data-method' => 'post',
]);
}
],
'contentOptions' => ['class' => 'content-grid-css'],
'headerOptions' => ['class' => 'header-grid-css'],
],
],
]); ?>
<?php Pjax::end() ?>
</div>【问题讨论】：
标签： php gridview pagination yii2 jquery-hover