Domino XPages 开发：JS与CSS引用方法

"本文主要介绍如何在Domino XPages开发中引用JavaScript和CSS文件，以增强页面的功能和样式。" 在Domino XPages开发中，引入JavaScript和CSS是构建交互式用户界面的关键步骤。这两种技术分别负责处理动态行为和定义视觉外观。下面将详细讲解两种引用方法。 1) 直接在代码中引用 这种方法是在XPage或Custom Control的源代码中直接插入`<script>`和`<link>`标签来引用外部资源。例如，为了引入jQuery库和EasyUI主题，可以按照以下方式编写代码： ```html <script language="javascript" type="text/javascript" src="easyui/jquery-1.9.1.min.js"></script> <script language="javascript" type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <link href="easyui/demo/demo.css" rel="stylesheet" type="text/css"/> <link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/> <link href="easyui/themes/icon.css" rel="stylesheet" type="text/css"/> ``` 同时，对于特定浏览器的兼容性问题，可以通过条件语句来选择性地引用不同版本的JavaScript库，如针对IE9-11的适配： ```html <script language="javascript" type="text/javascript" src="#{javascript:if(context.getUserAgent().isIE(9,11)|| (!context.getUserAgent().isIE())) { return 'easyui/jquery-2.1.1.min.js'; } else { return 'easyui/jquery-1.11.0.min.js'; }}"> </script> ``` 此外，还可以引入自定义的JavaScript文件（如`buttons.js`）和CSS文件（如`buttons.css`），以及特定功能的脚本（如`datagrid-filter.js`）。 2) 使用`<xp:this.resources>`引用 另一种方法是通过`<xp:this.resources>`标记来添加资源。这种方式更加灵活，便于管理，特别是在大型项目中。例如： ```xml <xp:this.resources> <xp:script src="/jquery-1.9.1.min.js" clientSide="true"></xp:script> <xp:script src="/jquery.easyui.min.js" clientSide="true"></xp:script> <xp:styleSheet href="/demo/demo.css"></xp:styleSheet> <xp:styleSheet href="/themes/default/easyui.css"></xp:styleSheet> <xp:styleSheet href="/themes/icon.css"></xp:styleSheet> </xp:this.resources> ``` 在这个例子中，`<xp:script>`和`<xp:styleSheet>`标签分别用于添加JavaScript和CSS文件，`clientSide="true"`属性确保它们在客户端被加载。这种方法允许在XPage或Custom Control级别定义资源，并且可以在整个应用中复用。 总结，Domino XPages开发中引用JS和CSS的方式既包括直接在HTML代码中插入引用，也支持通过`<xp:this.resources>`组件进行组织和管理。这两种方法各有优缺点，根据项目的规模和需求可以选择合适的方法。正确地引用这些资源将极大地提升XPages应用的用户体验和功能完整性。