基于jquery的页面划词搜索JS

以下是“基于jquery的页面划词搜索JS”的完整攻略：

1. 简介

这是一个基于jquery的页面划词搜索JS插件，可以让用户选中页面中的关键词后，通过右键菜单或者快捷键快速搜索该关键词。同时，该插件还支持自定义搜索引擎和快捷键等功能。

2. 安装

该插件依赖于jquery库，为了运行该插件需要先引入jquery库文件，然后引入该插件的js和css文件。

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/word-search.css">
  <script src="js/word-search.js"></script>
</head>

3. 使用方法

3.1 简单使用

在需要使用该插件的页面上加入以下代码即可：

<script>
  $(function() {
    $('body').wordSearch();
  });
</script>

3.2 自定义设置

该插件支持多种自定义设置，包括自定义搜索引擎、自定义快捷键等。以下是一个示例设置：

<script>
  $(function() {
    $('body').wordSearch({
      searchEngines: {
        baidu: {
          name: '百度',
          url: 'https://www.baidu.com/s?wd=$'
        },
        google: {
          name: '谷歌',
          url: 'https://www.google.com/search?q=$'
        }
      },
      shortcuts: {
        searchSelectedText: 'Ctrl+Shift+S'
      }
    });
  });
</script>

该设置会添加两个自定义搜索引擎：百度和谷歌，以及一个快捷键：Ctrl+Shift+S，用于快速搜索选中的文本。

4. 示例

4.1 示例1

以下是一个最简单的示例，该示例会在页面上运行一个默认设置的划词搜索JS插件：

<!DOCTYPE html>
<html>
  <head>
    <title>示例1</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/word-search.css">
    <script src="js/word-search.js"></script>
  </head>
  <body>
    <h1>示例1</h1>
    <p>这是一个示例页面，用于演示划词搜索JS插件的最简单用法。</p>
    <p>当你选中某个单词后，会弹出快捷搜索菜单，可以选择默认的搜索引擎进行搜索。</p>
    <p>为了让插件生效，需要在页面上加入以下代码：</p>
    <pre><code>$(function() {
  $('body').wordSearch();
});</code></pre>
  </body>
</html>

4.2 示例2

以下是一个自定义设置的示例，该示例会在页面上运行一个自定义设置的划词搜索JS插件：

<!DOCTYPE html>
<html>
  <head>
    <title>示例2</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/word-search.css">
    <script src="js/word-search.js"></script>
  </head>
  <body>
    <h1>示例2</h1>
    <p>这是一个示例页面，用于演示划词搜索JS插件的自定义设置用法。</p>
    <p>当你选中某个单词后，会弹出快捷搜索菜单，可以选择自定义的搜索引擎进行搜索。<br>
       同时，你也可以按下自定义的快捷键Ctrl+Shift+S，快速搜索选中的文本。</p>
    <p>为了让插件生效，需要在页面上加入以下代码：</p>
    <pre><code>$(function() {
  $('body').wordSearch({
    searchEngines: {
      baidu: {
        name: '百度',
        url: 'https://www.baidu.com/s?wd=$'
      },
      google: {
        name: '谷歌',
        url: 'https://www.google.com/search?q=$'
      }
    },
    shortcuts: {
      searchSelectedText: 'Ctrl+Shift+S'
    }
  });
});</code></pre>
  </body>
</html>

以上就是“基于jquery的页面划词搜索JS”的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jquery的页面划词搜索JS - Python技术站