Foxit Developer

Component selectors ​

UIExtension provides CSS-like selector syntax to find components quickly. Use it for fragment target values and for querying the component tree.

Syntax ​

SelectorExampleDescription
name selector'componentName', 'component_name','component-name', 'component-name1', '1component'Name selectors use letters, digits, underscores, or hyphens only.
type selector'@div','@dropdown-menu', '@print:print-dialog'Component type from the layout template; starts with @. May include module-name: before the tag.
star selector'*'All components.
children selector'selector1>selector2'Components matching selector2 whose parent matches selector1.
descendants'selector1 selector2'selector2 descendants of selector1.
attribute selector[attr=value]Attribute attr equals value.
attribute selector[attr^=value]attr starts with value.
attribute selector[attr$=value]attr ends with value.
attribute selector[attr*=value]attr contains value.
attribute selector[attr!=value]attr is not value.
method selectorselector1::childAt(index)Child at index i of matches for selector1.
method selectorselector1::parent()Parent of matches for selector1.
method selectorselector1::allAfter()Following siblings of matches for selector1.
method selectorselector1::allBefore()Preceding siblings of matches for selector1.
index-related selectorselector1::eq(index)Match at zero-based index for selector1.
index-related selectorselector1::last()Last match for selector1.
index-related selectorselector1::first()First match; same as selector1::eq(0).

Examples ​

html
<html>
</html>
<script>
    UIExtension.PDFUI.module('custom', [])
            .controller('customController', {
                handle: function () {
                    const root = this.component.getRoot();
                    const contextmenuItems = root.querySelectorAll('fv--page-contextmenu>@contextmenu-item');
                    contextmenuItems.forEach(function (contextmenu) {
                        contextmenu.element.style.cssText += 'color: red';
                    })
                }
            })
    var CustomRibbonAppearance = UIExtension.appearances.RibbonAppearance.extend({
        getDefaultFragments() {
            / 移除 export comment 下拉菜单。
            return [{
                target: 'home-tab-group-hand::childAt(0)',
                action: 'after',
                template: `<xbutton class="fv__ui-toolbar-show-text-button">Click me!</xbutton>`
            }, {
                target: 'commentlist-export-comment::parent()',
                action: 'remove'
            }];
        }
    });

    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomRibbonAppearance,
        addons: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}