- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个信息量很大的游戏屏幕,即使只有第一段代码(在屏幕上显示许多行星),我的代码也开始看起来有点困惑/复杂.
如果可能的话,我还想对查看“查看源代码”的用户隐藏其中的一些内容,但这是次要问题。
基本上,下面的代码在屏幕上的不同绝对位置绘制 X 个行星,并为每个行星提供鼠标悬停工具提示。
必须有一种“更好”和/或更有效的方法来做到这一点吗?基本上,我会很感激任何提示。
我担心的主要原因是 Qtip2 工具提示将变得更加复杂,并且页面中将添加各种玩家信息,以及一些聊天/新闻/信息框。当我仍然有主菜要传送到页面时,我不想开始意大利面条代码!
我认为我主要关心的是我将生成的大量脚本标签。按照我添加到页面的每个工具提示一个的速度。行星图像(及其标签)的“回声”肯定是不可避免的......我真的不知道,我对此有点陌生。
<!-- File: /app/View/Games/main.ctp -->
<?php
echo $this->Html->script('jquery-1.8.2.min');
echo $this->Html->script('jquery.qtip');
$game = $this->Session->read('Game');
?>
<?php
foreach ($game['Planet'] as $planet) {
echo $this->Html->image('../img/planet/' . $planet['planet_image_file'] .'.png', array('class' => 'planet_img planet_' . $planet['id'], 'id' => 'planet_' . $planet['id'], 'alt' => $planet['planet_name'], 'style' => 'position:absolute;top:' . $planet['y_position'] . 'px;left:' . $planet['x_position'] . 'px;'));
echo '<script>$(\'.planet_' . $planet['id'] . '\').qtip({content: \'' . $planet['planet_name'] . '\'});</script>';
echo '<label for="' . $planet['planet_name'] . $planet['id'] . '" style="position:absolute;top:' . ($planet['y_position'] - 20) . 'px;left:' . $planet['x_position'] . 'px;">' . $planet['planet_name'] . '</label>';
}
?>
最佳答案
使用样式表而不是所有内联样式。如果动态添加样式,则始终可以有 <style>
header 中的元素,您可以根据需要动态附加 css 定义。
使用图像 Sprite 来帮助优化。这更适合操作背景图像,而不是内联图像,但对于它提供的性能提升来说,这可能是值得的。
您需要使用 css 图像背景的元素,而不是内联图像,但 DOM 也可以很简单。
不要调用一堆脚本来添加 qtip 东西,而是将 qtip 所需的信息作为每个元素的数据属性,并在外部 js 文件中使用一个函数,该函数循环访问元素并根据数据属性执行 qtip 操作。
foreach ($game['Planet'] as $planet) { echo $this->Html->image('../img/planet/' . $planet['planet_image_file'] .'.png', array('class' => 'planet_imgplanet_' . $planet['id '], 'id' => 'planet_' 。$planet['id'], 'alt' => $planet['planet_name'], 'data-planet-name' => $planet['planet_name']) ); 回声''。 $planet['planet_name'] 。 ''; }
jQuery
$('.planet_img').each(function(){
$(this).qtip({content: $(this).data('planet-name')});
})
关于jquery - 在 PHP 页面中混合 CakePHP、jQuery 和 Qtip2 时,如何避免不良、丑陋的编码习惯?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13180152/
我目前正在尝试创建一个文本选择脚本,以便人们可以标记文本,然后将其插入到表单中。 因此我想显示一个带有“发送到表单”链接的弹出窗口,但是我在使用 qtip(我在我的网站上到处都在使用)创建工具提示时遇
我试图在节点的右键单击事件上显示 qtip。 我已经在鼠标悬停或点击事件上做到了,他们工作了。但是我不能让它在右键单击时工作。 position: { my: 'top left',
我的系统中有这个界面。 我为所有 Success-[] Failed-[] 链接分配了 mailListBtn 类。当用户单击成功-[]失败-[]时,它将调用此js代码 $(".mailListBtn
我正在使用 jQuery 1.4.2 和 qTip 2.0 pre. 我有一个 qTip,它显示一个对象的 onClick 并用一个 mouseleave 关闭。我使用下面的 JS 在 mousele
我正在使用 jQuery qtip插入。我希望 qtip 的内容是动态加载的图像。 我正在使用的网址有效。如果我访问该网址,我会看到一张图像。 然而,qtip 显示了一些......奇怪的东西。结果如
单击链接时,我会显示一个 qTip,它从 ajax 请求获取其内容。内容包含一个关闭按钮。所以我将其添加到我的配置中... hide: { when: { ta
尝试在 AngularJS 指令中为 cytoscape 节点创建 qtip 工具提示时,遇到错误消息 Uncaught TypeError: qtip.$domEle.qtip is not a f
我目前正在将 qTip jQuery 插件与 Full Calendar 结合使用。这两个都很好用。但是,我目前遇到了一个问题。 有时,我的 qTip 内容有很多数据。由于 qTip 工具提示的宽度和
我尝试在创建 qtip 之前触发 someFunction() $('.selector').qtip({ content: { text: someFunction(this.id
有人可以向我展示一个简单的示例,说明如何设置和使用 qTip jQuery 插件,以便在我将鼠标悬停在图像上的位置的左下角显示工具提示。 我尝试遵循 the qTip site 中的演示/示例但似乎无
我在 qtip 工具提示中有一个按钮,可以在单击它时删除目标对象。但删除目标对象(日历事件)后工具提示保持可见。如何删除/隐藏工具提示?下面是 qtip 选项和屏幕截图。 var content =
如何防止 qtip 在包含“大”数据的网格 单元格上显示 不适合其宽度? (关于ExtJS 6.5.2 - 现代工具包) 示例 将其添加到 sencha fiddle 中: Ext.applicat
我有一个窗口间隔,每 5 秒运行一次代码。但是,此代码可能会删除并重新创建可能向用户显示 QTip 的某些元素。 有没有办法使用 JQuery 查找是否存在可见的 QTip? 谢谢 最佳答案 您可以使
我使用 asp.net mvc razor 代码。我使用 qtip 在鼠标悬停时显示弹出窗口。我在设置页面中有一个复选框,用于启用/禁用 qtip。 这是我的代码: function tooltip(
我有一个包含 UpdatePanel 的页面,我在页面上单击时添加了一些表单。 在这些新添加的元素中,我有必须使用 qTip 的图像。 我有这个: $(document).ready(function
function callQtip(textContent, cnt, object_iframe) { var iFrameEleId = object_iframe $(iFram
我试图在这里获取 qtip 示例: http://craigsworks.com/projects/qtip/demos/position/fixed 这样当猫头鹰的图像移动时,qtip 也会随之移动
我有一张 table 。在每个表中,当有人将鼠标悬停在 TR 上时,我希望它通过 qtip 显示工具提示。 这是我的 jquery 代码: $('.contacttr').qtip({
$(document).ready(function () { $('a.link').qtip({ content: {
我在表中的项目上调用了 qTip.. $('#orders_table a[rel]').each(function (){ $(this).click(function(){
我是一名优秀的程序员,十分优秀!