当前位置：文江博客话题详情

jQuery移动高亮效果

发布于 2024-12-12 08:13:56 字数 124 浏览 0 评论 0原文

我希望将 jquery ui 之类的突出显示效果应用于元素，但我使用的是 jquery mobile。 jquery mobile 中是否有内置的东西可以让我做到这一点，而无需引用任何 jquery ui 内容？

谢谢

原文

分享到QQ

分享到微博

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

发布评论

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

计㈡愣 2024-12-19 08:13:56

像这样的东西会起作用吗？

注意：这可能会影响哈希导航，但这都是 CSS

http://jsfiddle.net/MEzAU/

CSS

:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}

HTML

<a href="#1">Link 1</a>
<a href="#2">Link 2</a>
<a href="#3">Link 3</a>
<p id="1">Paragraph 1</p>
<p id="2">Paragraph 2</p>
<p id="3">Paragraph 3</p>

链接参考：

http://snook.ca/archives/html_and_css/yellow-fade-technique-css-animations

Would something like this work?

NOTE: this might affect the hash navigation but it's all CSS

http://jsfiddle.net/MEzAU/

CSS

:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}

HTML

<a href="#1">Link 1</a>
<a href="#2">Link 2</a>
<a href="#3">Link 3</a>
<p id="1">Paragraph 1</p>
<p id="2">Paragraph 2</p>
<p id="3">Paragraph 3</p>

Link reference:

http://snook.ca/archives/html_and_css/yellow-fade-technique-css-animations

回复收藏 0 原文

絕版丫頭 2024-12-19 08:13:56

您也可以尝试这种黄色淡入淡出技术解决方案： http://jsfiddle.net/xb8Km/

这是一个不错的解决方案因为您不必使用 :target，它是为可能干扰 jQuery Mobile ajax href 的锚点 href 构建的；它也不需要 jQuery UI 中的 .effect 函数，该函数不是为 jQuery mobile 设计的。

<div class="yft">
    <div class="content">This is some content</div>
    <div class="yft_fade"> </div>
</div>

<script>
  $(document).ready(function() {
    $(".yft").click(function() {
        $(this).find(".yft_fade").show().fadeOut();
    });
  });
</script>

<style>
  .yft_fade {
    background-color:yellow;
    display:none;
  }
  .content {
    position:absolute;
    top:0px;
  }
</style>

You could also try this yellow fade technique solution: http://jsfiddle.net/xb8Km/

Its a nice solution because you don't have to use :target, which is built for anchors hrefs that could interfere with jQuery Mobile ajax hrefs; it also doesn't need the .effect function from jQuery UI which is not designed for jQuery mobile.

<div class="yft">
    <div class="content">This is some content</div>
    <div class="yft_fade"> </div>
</div>

<script>
  $(document).ready(function() {
    $(".yft").click(function() {
        $(this).find(".yft_fade").show().fadeOut();
    });
  });
</script>

<style>
  .yft_fade {
    background-color:yellow;
    display:none;
  }
  .content {
    position:absolute;
    top:0px;
  }
</style>

回复收藏 0 原文

~没有更多了~