如何解决SPFx WebPart - 选项卡
我对 SPFX WebPart 开发完全陌生。
我正在尝试开发一个 Tab Web 部件 - HTML 似乎可以正确呈现,但是 Javascript 没有触发(也许我使用的方式不正确)。
非常感谢您提供一些帮助。
提前致谢。
//The webpart.ts file
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './JqueryWebPart.module.scss';
import * as strings from 'JqueryWebPartStrings';
import MyTabTemplate from './MyTabTemplate';
import * as jQuery from 'jquery';
import 'jqueryui';
import { SPComponentLoader } from '@microsoft/sp-loader';
export interface IJqueryWebPartProps {
description: string;
}
export default class JqueryWebPart extends BaseClientSideWebPart<IJqueryWebPartProps> {
public constructor() {
super();
SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
}
public render(): void {
this.domElement.innerHTML = MyTabTemplate .templateHtml;
jQuery('.tabs',this.domElement);
function openCity(evt,cityName) {
// Declare all variables
var i,tabcontent,tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
// Show the current tab,and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},groups: [
{
groupName: strings.BasicGroupName,groupFields: [
PropertyPaneTextField('description',{
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
================================================ ==
//the template.ts file - holding the html
export default class MyTabTemplate {
public static templateHtml: string = `
<div class="tabs">
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event,'London')">London</button>
<button class="tablinks" onclick="openCity(event,'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event,'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
`;
}
解决方法
您不能直接在 render() 中添加函数 openCity。您需要将其添加到脚本标记中,如下所示:
public render(): void {
this.domElement.innerHTML = MyTabTemplate.templateHtml;
jQuery(".tabs",this.domElement);
let head: any =document.getElementsByTagName("head")[0] || document.documentElement,script = document.createElement("script");
script.type = "text/javascript";
script.text =
'function openCity(evt,cityName) { var i,tabcontent,tablinks;tabcontent = document.getElementsByClassName("tabcontent");for (i = 0; i < tabcontent.length; i++) {tabcontent[i].style.display = "none";}tablinks = document.getElementsByClassName("tablinks");for (i = 0; i < tablinks.length; i++) {tablinks[i].className = tablinks[i].className.replace(" active","");}document.getElementById(cityName).style.display = "block";evt.currentTarget.className += " active";}';
head.insertBefore(script,head.firstChild);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。