YII 2 框架:帮助.它仅适用于网格视图的第一页

我让Jquery在鼠标悬停在文本上时显示工具提示。它在每个页面上都运行良好。

我的网格视图中还有一个图像列。我制作了Jquery，当鼠标悬停在图像上时放大这些图像但问题是，它只适用于第一页

我读了一些建议在JS脚本中使用SELECTOR的文章，但我不知道如何实现它。

请帮助我。

非常感谢，很抱歉打扰大家。

这是我的观点代码

<?php
	yiiwebJqueryAsset::register($this);
	yiibootstrapBootstrapPluginAsset::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 yiihelpersHtml;
use yiigridGridView;
use yiiwidgetsPjax;
use yiihelpersArrayHelper;
use yiihelpersUrl;
use yiihelpersBaseUrl;
$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' => yiigridActionColumn::className(),
				//'controller' => 'MarketingController',
				'template' => '{update}{delete}{view}',
				'header' => Html::a('<i class="glyphicon glyphicon-plus"></i>&nbsp;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>

尝试以这种方式注册 Js。

use yiiwebView;

然后你的JavaScript代码像这样实现...

<?php
$this->registerJs("
$('body').tooltip({selector: '[data-toggle="tooltip"]'});
$('.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});
    }); 
", View::POS_END);

您也可以尝试POS_LOAD或POS_READY

您可能正在使用 Ajax GridView。在代码中，事件"hover"的侦听器仅在加载时添加到页面中已存在的元素中。您需要事件委派

$('body').on('mouseenter', '.enlargephoto', 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');
});
$('body').on('mouseleave', '.enlargephoto' ,function(){
    $('.photobox').remove();
});
$('body').on('mousemove', '.enlargephoto' function(e){
    var xx = e.pageX - 20;
    var tt = e.pageY - 120;
    $('.photobox').css({top:tt, left:xx});
});

悬停事件不再存在，所以我在真实事件中打破了它。

相关内容

最新更新

热门标签：