复制chrome webstore元素效果

发布于 2025-01-03 05:02:42 字数 653 浏览 0 评论 0原文

这个有点棘手，我在这里创建了jsfiddle http://jsfiddle.net/WXmcL/10/ 有点复制 https://chrome.google.com/webstore/category/home 插件容器。除了元素链接之外，一切都很好。

我需要

 <a class="link" href="linktoapp"></a>

正确定位，但也需要让用户到达，

<a href="linktoinfo">Info1</a>

因为我不能在 a 元素中包含任何 ul 或 div，所以我无法实现此效果。是的，我可以做 span，但我的评级包含 ul 、 div 等，并且我会在其中添加更多标记。如果您检查 Chrome 商店，您始终可以链接到该应用程序并同时达到评级。他们将所有元素放入 a 标记内，但页面验证没有看到它。所以在我看来，这是用 js on load 完成的还是？

谢谢你！

原文

This one is bit tricky ,
I created jsfiddle here
http://jsfiddle.net/WXmcL/10/
to kinda replicate the https://chrome.google.com/webstore/category/home
addons containers. all is fine except that a element link.

I need to position the

 <a class="link" href="linktoapp"></a>

correctly but also let the users reach the

<a href="linktoinfo">Info1</a>

since I cant have any ul or divs inside the a element I am not able to achieve this effect. Yes I can do spans but my ratings contain ul , divs etc and I would have more markup inside it. If you check on chrome store you can always link to the app and in same time reach the rating. They put all the elements inside the a tag but the page validation is not seeing it. So it seems to me that is being done with js on load or ?

Thank you!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黎夕旧梦 2025-01-10 05:02:42

当你构建效果一段时间时，你应该忘记验证。让它与您需要的标记一起工作，然后您可以坐下来拿走无法验证的内容并通过 JavaScript 注入它。

mootools 有一个很棒的 Element 构造函数。

new Element("a.linktoinfo[html=Info]").inject(element);

您可以通过构造函数选项对象将任何属性传递给它。

例如。

new Element("a", {
    "class": "foo",
    "href": "#",
    "events" : {
        click: function() {
            showInfo(this.getParent());
        }
    }
}).inject(element.getElement("a.link", 'after');

等等等等。

顺便说一句，当您变形类时，只需确保它变形您不同的属性即可。在您的情况下，使 .myInfoOn / .myInfoOff 具有不同的高度是有意义的。在未更改的其他值之间分配变形是没有意义的。

这种类型的 morph 会解析您在每个事件上传递的类中定义的所有 css 规则，实际上，您最好手动设置它。如果它是硬连线的，它的规模会更小，我意识到 - 但你可以将其设置为类中的变量。

you should forget about validation whilst you are building your effects for a while. get it to work with the markup you need, then you can sit back and take away what won't validate and inject it via javascript.

mootools has a wonderful Element constructor.

new Element("a.linktoinfo[html=Info]").inject(element);

you can pass on any property into it via the constructor options object.

eg.

new Element("a", {
    "class": "foo",
    "href": "#",
    "events" : {
        click: function() {
            showInfo(this.getParent());
        }
    }
}).inject(element.getElement("a.link", 'after');

etc etc.

btw when you morph classes, just make sure it morphs the properties you differ. in your case, it makes sense to make .myInfoOn / .myInfoOff that have the different heights. there is no point in assigning a morph between other values that have not been changed.

that type of morph parses all the css rules defined in the class that you pass on every event and in reality, you are better off setting it manually. it will scale less if it's hardwired, I realise that - but you can set as a variable into your class.

回复收藏 0 原文

~没有更多了~