jQWidgets jqxNavigationBar initContent 属性

The initContent property is a callback function that initializes the content of the navigation bar. When this property is set, the items in the navigation bar are created dynamically by this function instead of adding them to the navigation bar manually.

Syntax

function initContent(): any;

Parameters

None

Return Value

The function returns an object that represents the navigation bar content. This object is created by using the jQWidgets Component library.

Example

Here is an example of a navigation bar that uses the initContent() function to initialize its content:

import { jqxNavigationBarComponent } from 'jqwidgets-ng/jqxnavigationbar';
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('navbar') navbar: jqxNavigationBarComponent;

    initContent(): any {
        let data = [
            { title: 'Dashboard', icon: 'fa fa-dashboard' },
            { title: 'Messages', icon: 'fa fa-envelope' },
            { title: 'Settings', icon: 'fa fa-cogs' }
        ];

        let source = {
            datatype: 'array',
            datafields: [
                { name: 'title', type: 'string' },
                { name: 'icon', type: 'string' }
            ],
            localdata: data
        };

        let dataAdapter = new jqx.dataAdapter(source);

        let settings = {
            width: '100%',
            height: 40,
            theme: 'custom',
            source: dataAdapter,
            displayMember: 'title',
            valueMember: 'icon',
            selectionMode: 'none'
        };

        let navbarContent = $('<div>');
        this.navbar.createWidget(navbarContent, settings);

        return navbarContent;
    }
}

In the above code, the initContent() function is defined and is called when the navigation bar is initialized. The function creates an array of objects that contains the titles and icons of each navigation item. It then creates a data source that is used to populate the navigation bar. Finally, the function returns the content of the navigation bar as a jQuery object.

Conclusion

The initContent() property of the jQWidgets jqxNavigationBar component is a powerful feature that allows developers to create dynamic navigation bars. By using this property, developers can customize the appearance and behavior of the navigation bar to meet their specific needs.