jQuery.Mark高亮显示关键词_JS搜索结果中高亮插件
2016-05-11 12:32:43  By: dwtedx

jQuery.Markj是一个关键字文本高亮的插件、一款支持变音符号的脚本、可自定义同义词、自定义元素、自定义class名称、单词边界和iframe、它可以通过搜索的方式来高亮所有的指定关键字、非常适合搜索等场景、效果非常不错、效果图如下

jquery 代码高亮插件


CSS代码

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">
    body {
      margin: 15px;
    }

    div.search span,
    div.search input[name="keyword"] {
      display: block;
    }

    div.search input[name="keyword"] {
      margin-top: 4px;
    }

    div.panel {
      padding: 1em 12em;
      margin-bottom: 15px;
    }
    div.panel-body p{
        text-indent: 2em;
    }

    span.match {
      background: yellow;
      color: black;
    }
</style>


JS代码

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="dist/jquery.mark.min.js"></script>
<script type="text/javascript">
    $(function() {

      var mark = function() {

        // Read the keyword
        var keyword = $("input[name=´keyword´]").val();

        // Determine selected options
        var options = {
          "className": "match"
        };
        $("input[name=´opt[]´]").each(function() {
          options[$(this).val()] = $(this).is(":checked");
        });

        // Mark the keyword inside the context
        $(".context").removeMark();
        $(".context").mark(keyword, options);
      };

      $("input[name=´keyword´]").on("keyup", mark);
      $("input[type=´checkbox´]").on("change", mark);

    });
</script>


jQuery.Mark关键词高亮源代码下载链接: jQuery 关键词高亮 密码: gss1

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


猜你喜欢的

快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+