如何在AEM中运行外部js插件功能 [英] how to run external js plugin function in AEM

问题描述

在DOM加载到
adobe Experience Manager中后，如何运行属于外部插件的Java脚本函数？
当前在控制台中运行，但不在本地文件上运行。

how to run a java script function which belongs to an external plugin after the DOM gets loaded in adobe Experience Manager ? currently it run in console but not on local file.

推荐答案

请查看以下Adobe Helpx文章： - https://helpx.adobe.com/experience-manager/ using / custom-carousel-components.html

Please have a look at this Adobe Helpx Articles:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html

//为Adobe Experience Manager创建自定义旋转木马组件
涵盖了如何使用第三方AEM组件中的Javascript / JQuery插件。

//Creating Custom Carousel components for Adobe Experience Manager It covers, how to use third party Javascript/JQuery plugins in AEM components.

[来自文章]将JQuery Carousel API添加到CQ：ClientLibraryFolder节点

您将CSS文件和JQuery框架文件添加到cq：ClientLibraryFolder节点以定义客户端JSP的样式。添加的JQuery框架文件名为jquery-1.6.3.min.js。

You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.

除了JQuery框架文件外，还添加了JQuery Carousel API库。通过该库，您可以创建一个CQ小部件，该小部件可以从CQ DAM中检索图像并在轮播中显示图像。

In addition to the JQuery framework file, add the JQuery Carousel API library. This library enables you to create a CQ widget that retrieves images from the CQ DAM and displays the images within a carousel.

您可以从以下网址下载Carousel API库：

You can download the Carousel API library from the following URL:

http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/

您需要从下载的文件中检索以下JS文件：jquery.infinitecarousel.js。要将CSS文件和JQuery框架文件添加到您的组件，请在您的组件中添加一个cq：ClientLibraryFolder节点。创建节点之后，请设置允许JSP脚本查找CSS文件和JQuery库文件的属性。

You need to retrieve the following JS file from the downloaded file: jquery.infinitecarousel.js. To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.

要添加JQuery框架，请添加一个名为clientlibs到您的组件（稍后讨论）。将这两个属性添加到该节点。

To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.

名称类型值
的依赖关系String [] cq.jquery

category String [] jquerysamples < br>
依赖项属性通知CQ在页面中包括CSS文件和JQuery库。

Name Type Value dependencies String[] cq.jquery
categories String[] jquerysamples
The dependencies property informs CQ to include the CSS files and JQuery libraries in the page. The categories property informs CQ which clientlibs must be included.

在创建Clientlibs文件夹之后，添加stlye.css文件，JQuery库文件和两个地图文本文件。

After you create the Clientlibs folder, add the stlye.css file, the JQuery library files, and two map text files.

文本文件
您必须将文本文件添加到clientlibs文件夹中，该文件夹映射到JS文件。文本文件的名称是：js.txt。 js.txt文件包含JS文件名：jquery-1.6.3.min.js和jquery.infinitecarousel.js。

Text files You have to add a text file to the clientlibs folder that maps to the JS files. The name of the text file is: js.txt. The js.txt file contains the JS file names: jquery-1.6.3.min.js and jquery.infinitecarousel.js.

将文件添加到ClientLibs文件夹
右键单击/ apps / carousel / components，然后选择新建，节点。
确保节点类型为cq：ClientLibraryFolder，并将节点命名为clientlibs。
右键单击clientlibs，然后选择属性。将上表中指定的两个属性添加到该节点。
在文件系统上，导航到JQuery JS文件所在的文件夹。使用CRXDE将JS文件拖放到clientlibs节点。
在文件系统上，导航放置CSS文件的位置。使用CRXDE将CSS文件拖放到clientlibs文件夹中。
将TXT文件添加到名为js.txt的clientlibs文件夹中。添加本节中指定的内容。

Add the files to the ClientLibs folder Right-click /apps/carousel/components then select New, Node. Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs. Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node. On your file system, navigate to the folder where the JQuery JS files are located. Drag and drop the JS files to the clientlibs node by using CRXDE. On your file system, navigate where you placed the CSS files. Drag and drop the CSS files to the clientlibs folder by using CRXDE. Add a TXT file to the clientlibs folder named js.txt. Add the content specified in this section.

更多参考链接为：-

链接：- http://help-forums.adobe.com/content/adobeforums/zh-CN/experience-manager-forum/adobe-experience-manager.topic.html/forum__3vab-is_there_anytoolre .html

链接：- http://help-forums.adobe.com/content/adobeforums/zh-CN/ experience-manager-forum / adobe-experience-manager.topic.html / forum__rwhk-i_have_a_requirement.html

链接：- http://help-forums.adobe.com/content/adobeforums/zh-CN/experience-manager-forum/adobe-experience-manager.topic。 html / forum__6l3s-i_would_liketocrea.html

我希望这会对您有所帮助。

I hope this will help you.

感谢和关于
Kautuk Sahni

Thanks and Regards Kautuk Sahni

这篇关于如何在AEM中运行外部js插件功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！