如何在自己的Typo3 6.2扩展中包含.js文件？

我使用扩展构建器，extbase和fluid在Typo3 6.2中进行了扩展。
我想在前端添加一个timepicker。
我在网上发现了一个.js文件，并希望在扩展程序处于活动状态时将其包含在内，因为我经常需要它。
我把这个文件放在这里：EXT：/Resources/Public/JS/timepicker.js。
我在this文章中看到了一个解决方案，但在我的setup.txt的底部添加了page.includeJS.tx_myExtension = EXT:/Resources/Public/JS/timepicker.js无法正常工作。
我没有定义page，所以我认为这可能是原因，但我真的不知道 - 这是我的setup.txt（自动生成）/typo3conf/ext // Configuration/TypoScript/：如何在自己的Typo3 6.2扩展中包含.js文件？

plugin.tx_myext_test { 
    view { 
     templateRootPath = {$plugin.tx_myext_test.view.templateRootPath} 
     partialRootPath = {$plugin.tx_myext_test.view.partialRootPath} 
     layoutRootPath = {$plugin.tx_myext_test.view.layoutRootPath} 
    } 
    persistence { 
     storagePid = {$plugin.tx_myext_test.persistence.storagePid} 
    } 
} 

plugin.tx_myext._CSS_DEFAULT_STYLE (
    textarea.f3-form-error { 
     background-color:#FF9F9F; 
     border: 1px #FF0000 solid; 
    } 

    input.f3-form-error { 
     background-color:#FF9F9F; 
     border: 1px #FF0000 solid; 
    } 

    .tx-lcappoints table { 
     border-collapse:separate; 
     border-spacing:10px; 
    } 

    .tx-lcappoints table th { 
     font-weight:bold; 
    } 

    .tx-lcappoints table td { 
     vertical-align:top; 
    } 

    .typo3-messages .message-error { 
     color:red; 
    } 

    .typo3-messages .message-ok { 
     color:green; 
    } 
)

最终我想让我的前端函数工作，它已经与datepicker一起工作，因为我在我的根模板中包含了jQuery。但我不想在这里包括时间选择器，只是为了扩展。

<script> 
    $(function() { 
     $('.lc-datepicker').datepicker(); 
     $('.lc-timepicker').timepicker(); 
    }); 
</script>

来源

2016-10-02 Cold_Class

您可以使用正确的语法为EXT:这样的：（你忘了extkey）

page.includeJS.myextension = EXT:extkey/Resources/Public/JS/timepicker.js

请记住，它可以改善你的网站的性能，使用includeJSFooter而不是includeJS。

page.includeJS是全球可用的TypoScript属性。因此，如果您在网站的根目录TS模板中使用该文件，则无论插件是否在使用，JavaScript文件都将嵌入到每个页面中。所以我建议在下面使用Fluid方法，如果你想让JS只在嵌入了插件的页面上。

为了实现这一点，使用资源视图助手在你的模板：

<script src="{f:uri.resource(path: 'JS/timepicker.js')}"></script> 
<script> 
    $(function() { 
     $('.lc-datepicker').datepicker(); 
     $('.lc-timepicker').timepicker(); 
    }); 
</script>

资源视图助手使用相对Resources/Public目录扩展的路径。

来源

2016-10-02 20:55:26 lorenz

它不工作，现在 - 与“page.includeJSFooter.tx_myExtension = EXT：tx_myExtension /资源/ Public/JS/timepicker.js“ 我必须刷新哪个缓存以确保它不是因为它（前端，一般或系统）？哪个扩展名的意思是准确的，它在哪里定义？不是插件的名字，对吧？ –

你的第二个例子终于奏效了......但奇怪的是：我不得不从JS开始......否则输出是“Public/Public” 希望我能弄清楚我的第一个解决方案有什么问题.. 。 –

对不起，我的坏，在'f：uri.resource' VH的路径相对于'Resources/Public'。修复。我还将'myextension'改为'extkey'，以强调需要扩展键，它等于'typo3conf/ext'中扩展的目录。除了普通的页面缓存之外，你不需要删除其他东西。尝试查看后端的TypoScript树，以确定您的TS是否正确应用。 – lorenz

您可以定义在您的控制器类中包含JS，以确保它只为您的扩展加载。

在Typo脚本，有JS文件中配置：

plugin.tx_myext.settings.javascript.file = EXT:myext/Resources/Public/JS/timepicker.js

在控制器动作：

$this->response->addAdditionalHeaderData('<script src="' . 
      $GLOBALS['TSFE']->tmpl->getFileName($this->settings['javascript']['file']) . 
      '" type="text/javascript"></script>');

来源

2016-10-02 21:10:06 jokumer

但我可以在我的扩展文件夹中将我的拼写错误添加到我的setup.txt文件中吗？到目前为止它不工作:( 它确实加载了一个空头文件 “我写了plugin.tx_myext.settings.javascript.file = EXT：myext/Resources /公共/ JS/timepicker.js在我的setup.txt文件的底部，就像你说的那样。 –

这个解决方案的缺点是它在某种程度上不灵活 - 如果脚本被加载，需要改变代码（例如在全局上下文中）。 – lorenz

如何在自己的Typo3 6.2扩展中包含.js文件？

回答

相关问题