我正在使用www.euroworker.no/order上http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm中的工具提示示例>
我这里有这段代码可以使用,但是似乎无法正常工作,我已经尝试了所有我能想到的东西(没有很多东西)
这是代码。
{foreach from=$cart.cartItems item="item" name="cart"} <div class="{zebra loop="cart"}"> <div id="sgproductview"> <div id="cart2Varekode"> <p> {if $product.sku} <span class="param">{$item.product.sku}</span> {else} <span>{img src=$item.Product.DefaultImage.paths.1 alt=$item.Product.name_lang|escape}</span> {/if} </p> </div> <div id="cart2Produkt"> <p>{if $item.Product.ID} <a href="{productUrl product=$item.Product}" data-tooltip="sticky{$smarty.foreach.cart.iteration}" target="_blank">{$item.Product.name_lang|truncate:20}</a> {else} <span>{$item.Product.name_lang|truncate:20}</span> </a> {/if} </p> <p> {include file="order/itemVariations.tpl"} {include file="order/block/itemOptions.tpl"} {if $multi} {include file="order/selectItemAddress.tpl" item=$item} {/if} </p> </div> {if $item.Product.DefaultImage.paths.3} <div id="mystickytooltip{$smarty.foreach.cart.index}" class="stickytooltip"> <div style="padding:5px;"> <div id="sticky1" class="atip" style="width:200px;"> <img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br> {$item.Product.name_lang} </div> <div id="sticky2" class="atip" style="width:200px;"> <img src={$item.Product.DefaultImage.paths.3} alt="{$item.Product.name_lang|escape}"><br> {$item.formattedPrice} </div> <div id="sticky3" class="atip" style="width:200px;"> <img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br> {$item.Product.name_lang}PRODUCT 3 </div> <div id="sticky4" class="atip" style="width:200px;"> <img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br> {$item.Product.name_lang} </div> </div> </div> {/if} <div id="cart2Price"> <p class="actualPrice"> {$item.formattedPrice} </p> </div> <div id="salg"></div> <div id="cart2Salg"> <p></p> </div> <div id="antallbox"> <p class="cartQuant"> {textfield name="item_`$item.ID`" class="text"} </p> </div> <div id="cart2Total"> <p> {if $item.count == 1} <span class="basePrice">{$item.formattedBasePrice}</span><span class="actualPrice">{$item.formattedPrice}</span> {else} {$item.formattedDisplaySubTotal} <div class="subTotalCalc"> {$item.count} x <span class="basePrice">{$item.formattedBasePrice}</span><span class="actualPrice">{$item.formattedPrice}</span> </div> {/if} </p> </div> <div id="delete"> {if 'ENABLE_WISHLISTS'|config} <a href="{link controller=order action=moveToWishList id=$item.ID query="return=`$return`"}">{t _move_to_wishlist}</a> {/if} <a id="slett" href="{link controller=order action=delete id=$item.ID query="return=`$return`"}" title="Slett"><!--{t _remove}--></a> </div> </div> </div> {/foreach}
和Javascript
var stickytooltip={ tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips fadeinspeed: 200, //duration of fade effect in milliseconds rightclickstick: false, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ? stickybordercolors: ["#0a5692", "#0a5692"], //border color of tooltip depending on sticky state stickynotice: ["Press \"s\"", "or right click", "to sticky box"], //customize tooltip status message stickynotice2: "Click outside this box to hide it", //customize tooltip status message //***** NO NEED TO EDIT BEYOND HERE isdocked: false, positiontooltip:function($, $tooltip, e){ var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1] var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y $tooltip.css({left:x, top:y}) }, showbox:function($, $tooltip, e){ $tooltip.fadeIn(this.fadeinspeed) this.positiontooltip($, $tooltip, e) }, hidebox:function($, $tooltip){ if (!this.isdocked){ $tooltip.stop(false, true).hide() $tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[0]}).html(this.stickynotice) } }, docktooltip:function($, $tooltip, e){ this.isdocked=true $tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[1]}).html(this.stickynotice) }, init:function(targetselector, tipid){ jQuery(document).ready(function($){ var $targets=$(targetselector) var $tooltip=$('#'+tipid).appendTo(document.body) if ($targets.length==0) return var $alltips=$tooltip.find('div.atip') if (!stickytooltip.rightclickstick) stickytooltip.stickynotice[1]='' stickytooltip.stickynotice=stickytooltip.stickynotice.join(' ') stickytooltip.hidebox($, $tooltip) $targets.bind('mouseenter', function(e){ $alltips.hide().filter('#'+$(this).attr('data-tooltip')).show() stickytooltip.showbox($, $tooltip, e) }) $targets.bind('mouseleave', function(e){ stickytooltip.hidebox($, $tooltip) }) $targets.bind('mousemove', function(e){ if (!stickytooltip.isdocked){ stickytooltip.positiontooltip($, $tooltip, e) } }) $tooltip.bind("mouseenter", function(){ stickytooltip.hidebox($, $tooltip) }) $tooltip.bind("click", function(e){ e.stopPropagation() }) $(this).bind("click", function(e){ if (e.button==0){ stickytooltip.isdocked=false stickytooltip.hidebox($, $tooltip) } }) $(this).bind("contextmenu", function(e){ if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element stickytooltip.docktooltip($, $tooltip, e) return false } }) $(this).bind('keypress', function(e){ var keyunicode=e.charCode || e.keyCode if (keyunicode==115){ //if "s" key was pressed stickytooltip.docktooltip($, $tooltip, e) } }) }) //end dom ready } } //stickytooltip.init("targetElementSelector", "tooltipcontainer") stickytooltip.init("*[data-tooltip]", "mystickytooltip")
我想我应该在“ mystickytooltip”中添加与smarty索引等效的javascript。我对Javascript没有太多经验。
谢谢
我正在使用来自www.euroworker.no/order上http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm的工具提示的示例,这里有此代码可以使用,但似乎并没有工作...
您显示的代码是一个循环,但是循环的内容(将重复的标记)正在为元素分配id
值。例如:
<div id="mystickytooltip" class="stickytooltip">
@@ kyle:找到解决方法了。我遇到了同样的问题