显示动态内容的工具提示
Show tooltip for dynamic content
我有下面的HTML代码,它显示了带有信息的动态行数,然后有一个图像链接,我单击该链接可以基于compentence_ID
字段获得关于单击的行的一些特定信息。。
echo "<td>".$compi['Competence_ID']."</td>";
echo "<td><p style='text-align: center;'>".$compi['Competence_Group']."</p></td>";
if(isset($compi['Competence_class'])){echo "<td>".$compi['Competence_class']."</td>";}else echo "<td><p style='text-align: center;'>-</p></td>";
echo "<td>".$compi['Competence_Description']."</td>";
echo "<td class='evaluation'>";
echo "<select class='ownlevelselect' id='ownlevelselect-.".$compi['Competence_ID']."' name='level-".$compi['Competence_ID']."' >";
if (isset($compi['ownlevel']) && $compi['ownlevel']!= '' && !empty($compi['ownlevel']) && $compi['ownlevel']!= 0) {
echo "<option selected value='".$compi['ownlevel']."' selected='selected'>".$compi['ownlevel']."</option>";
}
echo "<option value='' >--</option>";
echo "<option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option>";
echo "</select>";
echo $compi['ownlevel'];
// Below are the links I click to view the content
echo '<a target="_blank" href="'.INDEX.'?categ='.$_GET['categ'].'&action='.$_GET['action'].'&subaction=viewlevels'.'&levels='.$compi['Competence_ID'].'">';
echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("What is this?").'"/></a>';
echo "</td>";
echo "<td>";
这是有效的,我可以根据发布的ID看到相应的信息。但我想知道是否有任何方法可以在工具提示中显示该信息,而无需单击链接并POST ID。这是一个从DB中检索数据的脚本,我在单击图像时显示了这个脚本。
function fetchlevels($Competence_id){
$this->query="SELECT * FROM levels WHERE comp_id=".$_REQUEST['levels'];
$tulos=$this->suoritaKysely();
return $tulos;
}
简单的答案是:您可以使用ajax来完成。
我们可以在这里提供确切的代码,但你可能想了解这个概念,所以我相信下一个视频教程是一个很好的起点。
youtube视频教程:在鼠标上加载动态内容
在视频描述中,您可以找到视频教程及其相关文件的下载链接。你需要的是第二个例子。
为了让这个例子发挥作用,你只需要更改配置文件:connect.php和这个数据库
--
--数据库:ajax
--
--表data
的表结构
如果data
不存在,则创建表(CCD_ 5 int(11(NOT NULL AUTO_INCREMENT,CCD_ 6 varchar(45(不为空,CCD_ 7 varchar(45(不为空,CCD_ 8 varchar(45(不为空,主键(id
()ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=11;
--
--表data
的转储数据
插入data
(id
、title
、fname
、lname
(值(1,"Web Developer","Chris","Johnson"(,(2,"Web Designer"、"Joe"、"Black"(,(3,"老师","杰森","麦金托什"(,(4,"居家男人","Jake","Kawaguchi"(,(5,"Sans Man Card"、"Brett"、"Williams"(,(6,"我不知道…","托弗","豪登"(,(7,"Gamer"、"Jason"、"Luzader"(,(8,"Wingman"、"Chuck"、"Strong"(,(9,"篮球运动员","查克","巴克利"(,(10,《歌手》、《玛尔塔》、《佐雷》(;
代码内
echo '<a target="_blank" compId='$compi['Competence_ID']' href="#">';
echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("What is this?").'"/></a>';
如果上面的PHP代码有问题,请原谅。基本思想是在锚标签的属性上设置id
<script>
$( document ).tooltip({
items: "img",
content: function() {
var element = $( this );
var parent=element .parent();
if ( element.is( "img" ) ) {
var text = $.ajax({ type: "GET", url: remote_url, async: false, }).responseText;//remoe_url is url of your PHP whenre you have code to return the content in tooltip. You can take id as parent.attr('compId')
return text;
}
}
});
</script>
- d3.js Chord图的动态工具提示
- 将引导工具提示添加到动态创建的按钮中
- 如何使用单击属性和工具提示动态创建表格单元格,该工具提示将超链接到页面
- Twitter Bootstrap - 带有动态变化插入的工具提示
- 用于动态引导工具提示的自定义KnockoutJS绑定处理程序
- 动态谷歌图表的工具提示错误
- 动态引导工具提示不会在手动触发时显示
- 使用 dojo 将鼠标悬停在动态下拉列表选择上时添加工具提示
- 在Highcharts中,使特定点的工具提示始终可见且动态,我将更改其点
- 如何从简介.js工具提示中动态添加或删除下一个/上一个按钮
- 为 D3 中的动态数据生成工具提示
- 如何动态更改基于目标元素的绝对工具提示的位置
- 将引导工具提示绑定到 d3 动态创建的 SVG 元素
- 如何创建动态定位的工具提示
- 在我的自定义指令中动态添加 bootstrap.ui 工具提示
- 引导工具提示动态css规范
- 使jquery工具提示动态
- 使用angular UI工具提示动态更改工具提示类
- 如何使qtip2工具提示动态
- jQuery UI工具提示-动态内容