简介： 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说，他们还不习惯去考虑应用程序基本的外观，因为这些以前都是由操作系统来处理的。了解 jQuery UI，一个基于 jQuery 的 UI 工具箱，使创建漂亮的界面更为容易。本文同时也介绍了一些 jQuery 插件，可以加速 Web 开发并有助于创建我们所熟悉的，且流畅、直观、灵活的界面。

简介

如果您是一个传统桌面应用程序开发人员，并且正在转向开发 Web 应用程序，在学习 HTML 和 CSS 方面您可能不会遇到什么困难，但为应用程序设计一个漂亮的外观可能会是一个挑战。jQuery UI 和各种 jQuery 插件对于快速将 Web 应用程序组合在一起有极大的帮助，只需在 GUI 设计上花费少量的时间。

JavaScript 和 jQuery

如果您希望页面有任何形式的动态内容或者交互，那么 JavaScript 一直是构建 Web 页面的一个固有部分。如果没有 JavaScript，您想要在运行时更新页面，都必须刷新页面，这会导致界面不便于操作。在最近几年中，JavaScript 日益重要，因为它使得 Web 应用程序变得更加强大。JavaScript 甚至通过像 Node.js （一个服务端 JavaScript 引擎）这样的技术，在服务端也能找到一席之地。如果您想温习 JavaScript 的基本内容以及了解关于 Node.js 的更多信息，请查看 参考资料 的链接。

jQuery 是一个主要使用客户端 JavaScript 代码的库。它可以大幅度提高编写 UI 代码的速度，并提供了许多常用操作的快捷方式。它还包括了一个灵活的、用于创建动态界面并且浏览器兼容的 Ajax 库。更多信息链接请查看 参考资料，包括该库开发版和产品版拷贝的下载链接。产品代码已经是 “最小化的”，这意味着所有不必要的空白和注释都被删除了。如果您想了解该库的内部实现，那么强烈建议使用开发版拷贝，因为它更容易阅读。在使用任何第三方库之前，您都需要对其进行审查，以保证您理解并喜欢它的质量和功能。

jQuery UI

jQuery UI 是一个 UI 小部件和 CSS 样式表的集合，它们被打包到一起以完成常用的任务，例如通过 JavaScript 和 CSS 来创建一个向用户提示信息的自定义窗口，而不是使用旧有的弹出窗口。当您访问 jQuery UI 网站时（链接请查看 参考资料），您会发现并没有直接下载的选项。相反，网站提供了一个构建自定义下载的链接。点击该链接，您可以组装适合您自己的个性化包，您可以去掉任何不需要使用的组件（例如 Accordion 或者 Datepicker 小部件）来缩小库的大小。

当您下载自己的 jQuery UI 包时，还需要注意其他一些文件。development-bundle 目录下包含了 demonstrations和documentation，它们虽然有用但不是产品环境下部署所必需的。但是，在 css 和 js 目录下的文件，必须部署到您的 Web 应用程序中。js 目录包含 jQuery 和 jQuery UI 库；而 css 目录包括 CSS 文件和所有生成小部件和样式表所需的图片。

内容主题/皮肤

jQuery UI 除了提供从主页上组装下载之外，您还可以选择使用某个特定主题。为了节省时间，jQuery UI 页面提供了一个工具，可以用来查看网站当前可用的不同主题，或者您也可以在网站上通过指定喜欢的颜色，来创建属于您自己的主题。这样做主要是为您自动组装所需的 CSS 设置，以便节省一些时间。例如，图 1 展示了 Humanity 主题（顶部）与 Start 主题（底部）的对比。每个主题都包括所有对应的图标集合。

图 1. Humanity 主题与 Start 主题的对比 

主题提供了一个简单获取所有美观的 UI 组件的方式，而无需您花费大量时间修改 CSS 值或者使用图片编辑器制作静态图片元素。本文中的示例使用了 Humanity 主题。但是，使用皮肤并不意味着您不能使用自己的 CSS 来满足或者重写 jQuery UI CSS。清单 1 提供了一个基本的使用 jQuery 和 jQuery UI 的 HTML 模板，并且包括了一个自定义的 CSS 文件，app.css，其重写了按钮中文本周围的空间大小。它还包括了app.js，您可以在此编写特定于应用程序的 JavaScript 代码。
清单 1. 一个加载 jQuery UI 的基本 HTML 模板

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
03 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
04 <head>
05 <link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.8.10.custom.css"/>
06 <link rel="stylesheet" type="text/css" href="css/app.css" />
07 <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
08 <script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
09 <script src="js/app.js"></script>
10 <body>
11 </body>
12 </html>
13  
14 app.css:
15 body {
16         font-size: smaller;
17 }
18  
19 /* Override jQuery UI theme's padding on buttons: */
20 .ui-button-text-only .ui-button-text {
21         padding: 0.2em 0.5em;
22 }

界面改进：Dialog 小部件

许多 Web 开发人员都热衷于使用 alert 或者 confirm 功能，以便为访问者提供（或者从访问者获取）消息。不过这些消息非常的不美观，尤其是它们通常包括一个诸如 “www.yoursite.com 的页面……” 的标题，实在不够醒目。另一个常见做法是打开一个弹出窗口。这个方法由于弹出窗口拦截器的问题，使用的越来越少，不过它也有些过时。

使用 jQuery UI Dialog 功能，当您需要与某个访问者交互时，您可以展示任意内容或者一个通过 display:none 隐藏了的预定义<div> 标签。图 2 显示了该功能在整个外观上的不同。
图 2. 对比一个普通的 alert 窗口和一个 jQuery UI Dialog 小部件 

在显示内容的文档中，当有一个独立的 <div> 标签时，使用 Dialog 小部件是最简单的。一般来说，只要有一个可重复用于对话框的空 <div> 标签，它就可以正常工作。首先，设置内容，然后显示对话框，如 清单 2 所示：
清单 2. 显示一个 jQuery UI Dialog 小部件

01 <div style="display: none;" id="dialogHolder"><p id="dialogContent"></p></div>
02  
03 JavaScript 代码:
04 $('#dialogContent').html('Isn\'t this <b>cooler</b>?<br /><br />By setting
05    modal to true, you can require the user to dismiss this before interacting
06   with more of the page.');
07 $('#dialogHolder').dialog({
08   autoOpen: true,
09   title: 'Hello!',
10   modal: true,
11   buttons: {
12     "Go Away": function() {
13       $(this).dialog("close");
14     }
15   }
16 })

界面改进：Accordions 和选项卡

jQuery UI 引入了一个名为 Accordion 的小部件，它允许您拥有多个含有内容的区域，但是一般情况下，只有一个区域是可见的（默认）。点击其他区域，会通过一个动画效果来隐藏可见区域，然后显示新的区域。Accordion 的一个优点是几乎能够拥有无限个部分，因为多余的是按照垂直排布的。这个功能提供了一个流畅并且简单的界面。

许多网站访问者对传统的选项卡式的布局更加熟悉。这里，当前选中的选项卡是可见的，而其他选项卡是隐藏的，因为受到水平宽度的限制，所以有效地限制了选项卡的个数。图 3 显示了一个 Accordion 小部件（顶部）和一个 Tab 小部件 （底部）。

图 3. jQuery Accordion 和 Tab 小部件 

Accordions 通过一个含有多个区域序列的 <div> 来创建。每个区域由一个 <h3> 以及一个 <a> 标签开始，随后是一个含有每个 accordion 区域内容的子容器 <div> 。类似的，选项卡控件也使用了一个含有其他内容的 <div>，然后使用一个 <ul> 标签来定义 选项卡。在每个 <li> 中，使用了一个锚标签 （<a>）将选项卡绑定为 <div> 的内容。 接下来，是一系列定义了实际内容的 <div>元素，它们的 id 与无序列表（<ul>）相对应。查看 清单 3 更容易理解。一旦内容定义完毕，就可以在相应 <div> 元素的 jQuery 选择器上，通过调用 .accordion(); 或者 .tab(); 来初始化 accordion 或者选项卡功能。
清单 3. 创建一个 Accordion 小部件和一个 Tab 小部件

01 <div id="accordionDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
02   <h3><a href=#">Top Section</a></h3>
03   <div>
04     <p>Initial content for the first "tab" of the accordion goes here.</p>
05   </div>
06   <h3><a href=#">Next Section</a></h3>
07   <div>
08     <p>More content...</p>
09   </div>
10   <h3><a href=#">Last section</a></h3>
11   <div>
12     <p>You can have as many accordion sections as needed.</p>
13   </div>
14 </div>
15  
16 <div id="tabDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
17   <ul>
18     <li><a href="#t1">First Tab</a></li>
19     <li><a href="#t2">Middle Tab</a></li>
20     <li><a href="#t3">Last Tab</a></li>
21   </ul>
22   <div id="t1">
23     <p>First tab content goes here. The anchor href for the tab titles must
24        match the div for the content.</p>
25   </div>
26   <div id="t2">
27     <p>Second Tab Content</p>
28     <br />
30   </div>
31   <div id="t3">
32     <p>As with the Accordion, you can have as many tabs as you want, although
33        horizontal width places some practical limit there.</p>
34   </div>
35 </div>
36  
37 in JavaScript code:
38 $(document).ready(function() {
39   $('#accordionDemo').accordion();
40   $('#tabDemo').tabs();
41 }

小部件： Progressbar

jQuery UI 还提供了一个进度条小部件，用于需要长时间运行的操作。这个小部件十分易于使用。定义一个带有 ID 但是没有内容的<div> ，然后在其上调用 progressbar 方法；例如 $('#yourDiv').progressbar();。在实际中，这个小部件可以与 Ajax 结合使用来反映一个操作的进度。

小部件： Datepicker

一个对于输入的日期格式有严格要求的网站会令人反感，尤其是访问者来自不同的国家（有各自的日期格式）。但是使用一个可以接受任意格式的输入框也是危险的，需要进行后端验证，并且当输入的日期无法解析时，还要有办法通知访问者。一个简单的解决方案是使用一个日期选择小部件，正如 jQuery UI 所提供的。它有广泛的功能，包括限制日期范围，重新对日历上的日期命名（用于国际化），以及其他功能。它使用起来很简单。创建一个如下所示的标准文本输入框：

1 <input type="text" id="dateDemo" size="10">

然后使用如下代码将其转变为一个日历：

1 $('#dateDemo').datepicker({ 'maxDate': '+4m'});

上面的代码定义了一个最大日期，即从当前时间开始后的四个月（撰写本文时为 2011 年 3 月 5 日）。截图 图 4 反映了这一点。

图 4. jQuery UI Datepicker 小部件

使用 jQuery 动画

jQuery 自身提供了使用 animate 的能力，可以实现将任意属性从一个值过渡到其他值的动画效果。 当您定义自己的动画效果时这个功能很有用。但是通常编写自己的动画效果会花费很多时间。jQuery UI 添加了一些预定义动画，包括 stand-alone effects Bounce、Highlight、Pulsate、Shake、Size 以及 Transfer，以及其他例如 Blind Clip、Drop、Explode、Fade、 Fold、Puff、Slide 以及 Scale 等 Show 和 Hide 效果。这些效果都用于常用的 jQuery show 和 hide 方法；例如， $('#googleLogo').show('slide', {}, 1000); 或者 $('#googleLogo').hide('explode', {}, 2000);。

jQuery 插件

第三方已经为 jQuery 开发了大量的插件。虽然这些插件都需要 jQuery，但是它们通常都独立于 jQuery UI，不需要 jQuery UI 也可以使用。我们来看一下一些特别有用的插件。

Simple Tree

自从 Microsoft® Windows® Explorer 第一次出现以来，基于树的菜单就流行起来。它是一种在复杂资源集合（例如文档）中导航的简单方式。jQuery Simple Tree 插件可以很容易的实现树状菜单，并且在点击时支持任意 JavaScript 动作。如果需要，插件还可以支持拖拽树的项（item），对其重新组织，并在放下时触发一个方法。（下载链接请查看 参考资源 ；所有所需的组件可以在 下载 一节的样例代码中找到。）图 5 显示了使用中的 Simple Tree 插件。

图 5. The Simple Tree jQuery 插件 

树的内容通过一个单独的外部 <ul> 元素来定义，包含一个定义了树的 ID，以及用于样式化的 CSS 设置。在其内部，使用一个 <li>元素来定义一个根项。在这个元素内部，放置了另一个 <ul> 元素，以及位于该元素中的树项（每一项都在其自己的 <li> 元素中）。清单 4 说明了这个布局。当完成后，调用 simpleTree 方法来激活树功能。
清单 4. 使用 Simple Tree 创建一个树菜单

01 <head>
02   <link rel="stylesheet" type="text/css" href="css/jquery.simple.tree.css" />
03   <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
04   <script src="js/jquery.simple.tree.js" type="text/javascript"></script>
05 </head>
06 <body>
07   <ul id="treeDemo">
08     <li><span>Here are some items.</span>
09       <ul>
10         <li id="TopmostBranch"><span>Top Branch</span>
11           <ul>
12             <li id="SubItem1"><span>Sub items</span></li>
13             <li id="SubItem2"><span>are in another</span></li>
14             <li id="SubItem3"><span><ul> level.</span>
15               <ul>
16                  <li id="SubSubItem1"><span>like this!</span></li>
17               </ul>
18             </li>
19           </ul>
20         </li>
21         <li id="AnotherBranch"><span>Another Branch</span></li>
22         <li id="LastBranch"><span>Last Branch</span></li>
23       </ul>
24     </li>
25   </ul>
26 </body>
27  
28 in JavaScript code:
29 $(document).ready(function() {
30   $('#treeDemo').simpleTree({
31   autoclose: true,
32   afterClick: function(node) {
33     alert($('span: first',node).parent().attr('id') + " was clicked.");
34   },
35   animate: true,
36   drag: false
37   });
38 });

Uploadify

Uploadify jQuery 插件允许您将文件上传到您的网站，而不需在一个新的页面进行 POST 操作，并且在文件上传时显示一个进度条指示。上传自身是通过一个 Adobe® Flash® 组件来处理。该工具允许大量的自定义，包括指定允许的文件扩展名、大小限制、以及是否允许一次选择多个文件。当每个文件上传完成后，会调用 onComplete 方法；当所有文件完成后会调用 onAllComplete 方法。 Uploadify 默认的上传处理程序会在响应中返回已上传的文件名，但是这个处理程序可以很容易的进行定制化，以满足您的需要（例如，将一个文件上传到一个论坛或者执行其他动作）。清单 5 显示了如何使用 Uploadify 来创建一个文件上传。
清单 5. 将一个标准的文件输入转化为 Uploadify 上传程序

01 <head>
02   <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
03   <script src="uploadify/swfobject.js" type="text/javascript"></script>
04   <script src="uploadify/jquery.uploadify.v2.1.4.min.js"type="text/javascript"></script>
05 </head>
06 <body>
07   <div style="margin-left: auto; margin-right: auto; width: 200px">
08     <b>Upload a file to test:</b> <input id="uploadifyDemo"
09        name="uploadifyDemo" type="file" />
10   </div>
11 </body>
12  
13 in JavaScript code:
14 $(document).ready(function() {
15   $('#uploadifyDemo').uploadify({
16     'auto': true,
17     'folder': 'tmp',
18     'cancelImg': 'uploadify/cancel.png',
19     'script': 'uploadify/uploadify.php',
20     'uploader': 'uploadify/uploadify.swf',
21     onComplete: function(evt, id, file, resp, data) {
22       alert('The file "' + file['name'] + '" with size "' + file['size'] +
23             '" was uploaded. (It will be deleted in a few minutes
24             automatically.)' + "\n\nThe upload script returned: " + resp);
25     }
26   });
27 });

保证您的上传目录不能被公共访问或者被很好的保护是一个很好的做法。如果不这么做，可能会导致攻击者上传他们自己的代码并在您的服务器上执行。在这个示例中，文件被写入到文章示例目录下的 tmp/ 目录中，因此您只需要编写一个.htaccess 规则，禁止所有访问者访问 tmp/ 目录。此外很重要的一点是，保证运行您 Web 服务器的用户（例如www-data 或者 apache）拥有上传目录的写权限。

Simpletip

不管是桌面还是基于 Web，任何应用程序对用户来说都应该是可以自助生成文档的，以方便用户使用。Tooltips 是实现这一点的一个快速的方式。在使用 tooltip 几十年后，大多数人在不确定“pf ”是什么时，都会不自觉的将鼠标停留在屏幕上某一项，等待一些弹出帮助。Simpletip 插件使这很容易做到。通过 Simpletip，您可以创建基本的工具提示或者使用其他选项来控制位置。它还支持显示和隐藏工具提示的效果，包括通过一个 JavaScript 方法自定义的动画效果。通过使用$('#elementId').html()，工具提示的内容可以来自于硬编码的文本或者其他一些页面内容，例如一个隐藏的 <div>元素。您也可以通过编程的方式，编写类似$('#simpleTip3').simpletip({ content:getToolTip()}); 的代码，使用 Ajax 或者从文档中的其他来源来获取内容。 清单 6 展示了在句中单词上使用工具提示的不同样式。
清单 6. 使用 Simpletip 创建一个工具提示

01 <head>
02   <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
03   <script src="js/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
04 </head>
05 <body>
06   <p>
07     SimpleTip lets you add <a id="simpleTip1">simple tooltips</a>,
08     including <a id="simpleTip2">more advanced</a> tooltips or even
09     <span id="simpleTip3">tooltips with effects</span> with a minimum of fuss.
10   </p>
11  
12   <div id="simpleTip2Content" style="display: none;">
13     <div style="padding: 5px;">
14       <b>Fancy</b> content can be defined in a separate div.
15     </div>
16   </div>
17 </body>
18  
19 in JavaScript code:
20 $(document).ready(function() {
21   $('#simpleTip1').simpletip({
22       content: 'A basic tooltip.',
23       fixed: false
24   });
25  
26   $('#simpleTip2').simpletip({
27       content: $('#simpleTip2Content').html(),
28       fixed: true,
29       position: ['100', '0']
30   });
31  
32   $('#simpleTip3').simpletip({
33     content: 'Some content to animate',
34     hideEffect: 'slide',
35     showEffect: 'custom',
36     showCustom: function() {
37       $(this).css({
38         display: 'block',
39         fontSize: '0.3em',
40         color: '#0000ff',
41         backgroundColor: '#ffffff'
42       });
43       $(this).animate({
44         color: '#ff0000',
45         fontSize: '1em'
46       }, 400);
47     }
48   });
49 });

结束语

通过使用本文中描述的工具，您可以为您的 Web 应用程序快速创建可视化控件，并将精力关注于网站的实际功能。您还需要仔细考虑自然的页面流程，以及应用程序中每个页面的可用性，即使使用了 jQuery UI 和这些插件，仍需要仔细设计页面。但是，它们可以提高开发速度并简化实现。要下载包含本文中所有样例代码的完整 Web 页面，请查看 下载 一节。欢迎您使用它开始构建您的项目。

来自: blog.jobbole.com

使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序的更多相关文章

  1. jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...

  2. 基于jQuery UI的调色板插件推荐colorpicker

    1.下载地址 点击网页最下端Download,即可下载 2.使用方法 本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少 引入和初始化   引入js文件 & ...

  3. day15—jQuery UI之widgets插件

    转行学开发,代码100天——2018-03-31 今天学习了jQuery UI的widgets插件,主要包括accordion插件 accordion插件 该插件表示折叠面板效果,点击头部展开/折叠被 ...

  4. 第四十四课：jQuery UI和jQuery easy UI

    jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...

  5. 《jQuery、jQuery UI及jQuery Mobile技巧与示例》勘误收集

    此书由程学彬 (http://weibo.com/ironbin)和我合译完成,此篇博客作为勘误收集而用,若译文有误或者有任何疑问,欢迎留下评论,或者给我发邮件(地址:gzooler@gmail.co ...

  6. jQuery UI与jQuery easyUI的冲突解决办法

    jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...

  7. jquery ui和jquery easy ui的区别

    jquery ui 是jquery开发团队 开发,适用于网站式的页面.jquery easyui 是第三方基于jquery开发,适用于应用程序式的页面. 两者的方法调用也略有不同:jquery ui ...

  8. 50个实用的jQuery代码段让你成为更好的Web前端工程师

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...

  9. 构建 iOS 风格移动 Web 应用程序的8款开发框架

    使用 HTML5,CSS3 和 JavaScript 开发移动应用经过实践证明是一种可行的方式.这里收录了几款 iOS 风格的手机应用程序开发框架,帮助您使用擅长的 Web 技术来开发移动应用程序.这 ...

随机推荐

  1. android中ImageView的ScaleType属性

    android中ImageView的ScaleType属性 ScaleType的值分别代表的意义: ImageView是Android中的基础图片显示控件,该控件有个重要的属性是ScaleType,该 ...

  2. 图解最小生成树 - 普里姆(Prim)算法

    我们在图的定义中说过,带有权值的图就是网结构.一个连通图的生成树是一个极小的连通子图,它含有图中全部的顶点,但只有足以构成一棵树的n-1条边.所谓的最小成本,就是n个顶点,用n-1条边把一个连通图连接 ...

  3. Linux内核“问题门” - 学习问题、经验集锦

    陈宪章说:“学贵有疑,小疑则小进,大疑则大进.疑者,觉悟之机也,一番觉悟一番长进.” 培根说:“多问的人将多得.” 还在学校的时候导师在激情讲演之后对着会议室里形态各异但均静默不语的我们痛心疾首的说: ...

  4. Python 字典 in 操作符

    描述 Python 字典 in 操作符用于判断键(key)是否存在于字典(D)中,如果键在字典中返回True,否则返回False. 在Python2中还可以使用 has_key() 方法,官方文档推荐 ...

  5. mysql-5.7 扩展innodb系统表空间详解

    一.innodb系统表空间的简介: innodb 系统表空间是由若干个文件组成的,表空间的大小就是对应文件的大小,表空间文件是由innodb_data_file_path 这人参数来定义的.下面我们来 ...

  6. javascript linkedlist data structures

    在使用C++的时候我们经常会使用到各种容器,这些容器其实就是一种数据结构.在java中其实也是如此.但是由于javascript只给我们提供了一种内置的数据结构数组,准备来说是对象.没有我们常见的那些 ...

  7. 在CentOS 7上安装Node.js的4种方法（yum安装和源码安装）

    CentOS 7上的安装方法,其中涵盖了源码安装,已编译版本安装,EPEL(Extra Packages for Enterprise Linux)安装和通过NVM(Node version mana ...

  8. 3dmax坐标系与导出fbx的坐标系

    3dmax和opengl都是右手坐标系,但是3dmax是z轴向上,而opengl中是Y轴向上.如图: 所以在3dmax的fbx导出对话框中有“轴转化”一项,可以设置“Y向上”或者“Z向上”. 默认是“ ...

  9. Android Gradle 引用本地 AAR 的几种方式

    折衷方案: 1.方式2 - 不完美解决办法2 2.再使用"自定义Gradle代码"来减轻重复设置的问题. 自定义Gradle代码如下: repositories { flatDir ...

  10. IR的评价指标之MRR

    MRR(Mean Reciprocal Rank): 是一个国际上通用的对搜索算法进行评价的机制,即第一个结果匹配,分数为1,第二个匹配分数为0.5,第n个匹配分数为1/n,如果没有匹配的句子分数为0 ...