Components catalogue (jComponent 20)

UI components for jComponent 20, with configuration options and usage examples.

RecipeTags

j-AjaxLoading

This component can show a loading text for async AJAX operations.

component

j-Animation

This component can animate elements with .animation class.

component

j-Approve

j-Approve: easy usage; singleton

component

j-ASelected

The component adds selected class to <a element if the href attribute of the element will contain URL address from the web browser. It's targeted for public websites.

component

j-Attachments

The component displays attachments in the simple list. A user can remove attachments.

component

j-Audio

j-Audio: singleton; the component can play and stop audio/sound mp3

component

j-AutoComplete

j-AutoComplete: works with <input tags only; singleton

component

j-AutoDarkMode

The component automatically applies dark mode according to the operation system.

component

j-AutoExec

This component automatically executes a method defined in exec option.

component

j-AutoFill

The component wraps all nested elements into the <form> element with disabled form events.

component

j-AutoSelect

The component automatically adds .selected class according to the selector class='autoselect' within the entire HTML document. This component is a perfect solution for server-side rendering and subseq

component

j-Avatar

Avatar component needs to register your own theme. It contains default theme.

component

j-BackToTop

j-BackToTop: works as singleton

component

j-Backup

The component for data saving data to and loading from the local storage of the browser.

component

j-Banners

j-Banners: fully responsive; simple CSS animation

component

j-BarChart

Please review an example and keep a data-source.

component

j-Box

The component supports dynamic evaluation of the content of <script type='text/html'>. The example below contains a script with HTML and the component evaluates the content if the j-Form will be displ

component

j-Breadcrumb

j-Breadcrumb: NEW: arrowicon {String} arrow icon (default: ti ti-angle-right)

component

j-Button

A simple button component with great features.

component

j-Calendar

The component must be called manually or works with textbox or j-Input component automatically. The component is a singleton.

component

j-Carousel

j-Carousel: supports touch gestures (swipe) and fixed full size on mobile; learn from example

component

j-Carousel2

Is a simple carousel component optimized for desktop computers and mobile devices. Each elemet must be wrapped into the <figure> element (look to example).

component

j-Centered

New version of this component supports dynamic evaluation of the content of <script type='text/html'>. The example below contains a script with HTML and the component evaluates the content if the j-Fo

component

j-Checkbox

j-Checkbox options: required, label, disabled, checkicon, reverse

component

j-Checkboxlist

j-Checkboxlist: for custom design you can use j-CheckboxListExpert; now supports darkmode

component

j-CheckboxListExpert

Perfect component for checboxlist with custom styles. It's a little bit advanced but absolutely worth it!

component

j-CheckPath

j-CheckPath: Singleton; Development tool

component

j-Children

The component renders draggable items as a tree without the possibility of collapsing. Data-Source must be Object Array in the form: { id: String, children: [ ], YOUR PROPERTIES }, { ... }

component

j-Choose

The component is alternative to CheckboxListExpert and RadioButtonListExpert.

component

j-ChunkyScroll

j-ChunkyScroll: can handle thousands items/elements

component

j-Cl

The component parses inline data defined in the component's element. Data is parsed to the code list format.

component

j-ClBind

The component reads an item with a linked data source. The component supports Tangular template inside the element (optional). As the value is stored in the {{ value.something }} variable.

component

j-Click

The component calls a method or can set a value according to the path.

component

j-ClickBox

This component is optimized for SEO. It reads all links and creates a clickable box. The component automatically highlight a value according to the URL param.

component

j-Clipboard

j-Clipboard: It works as singleton; Uses navigator.clipboard.writeText() or document.execCommand('copy') as fallback

component

j-ClipboardImage

This component automaticaly captures images in Clipboard.

component

j-Clock

j-Clock: supports dark mode; works only with Bootstrap Grid System (otherwise is need to fix CSS)

component

j-CloudEditor

j-CloudEditor: it works in the iframe; supports multiple cursors (shift + cmd + arrow-down/up)

component

j-CloudEditorSimple

It's a simple alternative to j-CloudEditor. You can specify the main configuration in the config, and the value is {String} (in j-CloudEditor is configuration part of value).

component

j-Code

It's a simple alternative to j-CloudEditor. You can specify the main configuration in the config, and the value is {String} (in j-CloudEditor is configuration part of value). It's the same component a

component

j-CodeMirror

j-CodeMirror: supports multiple cursors (shift + cmd + arrow-down/up); supports finding selected text (cmd + d)

component

j-ColorPicker

j-ColorPicker: Component is singleton; Simple color picker

component

j-ColorPickerButton

j-ColorPickerButton: Component is singleton; Supports Dark theme

component

j-ColorSelector

j-ColorSelector options: disabled, required

component

j-Columns

The component Columns is a very simple alternative to j-Layout and j-Layout2. With this component you can set columns with 100% height by your needs.

component

j-Configuration

j-Configuration: supports dark mode; NEW: datasource {String} optional, a path to the data-source for config items

component

j-Confirm

j-Confirm: easy usage; singleton

component

j-Console

j-Console: easy usage; singleton

component

j-Console2

j-Console2: easy usage; supports dark mode

component

j-ContentEditable

j-ContentEditable: easy usage; supports great features

component

j-ContentSlider

The code below solves a problem with rendering component when the the component is dynamically displayed.

component

j-ContextMenu

If the value isn't defined then the component uses name as value.

component

j-Controls

j-Controls: singleton

component

j-Cookie

j-Cookie: singleton; uses localStorage

component

j-Cookie2

j-Cookie2: singleton; uses localStorage

component

j-CountDown

The component can show an action when time is expired.

component

j-Crop

j-Crop: zoom; drag and drop

component

j-Dashboard

The component expects Array of objects.

component

j-DataGrid

This grid was created for single page applications and enterprise applications.

component

j-DataSource

The component loads data from the external source via AJAX() method and it binds the value according to the config.path.

component

j-DataTable

BETA: This component is targeted for SPA and server-side listing.

component

j-DatePicker

The component must be called manually or works with j-Input component automatically. The component is a singleton.

component

j-Detach

The component can detach/attach all children (HTML elements). For example, if you have elements inside a panel, you can move the elements e.g., to the j-Windows.

component

j-Detail

This component can render values from model. Supports inline mapping - look into the source-code of the example.

component

j-Developer

This component monitors jComponent single page application. Just include component under the <body> element. It works only with jComponent +v18.

component

j-Diagram

j-Diagram options: parent, margin, marginxs, marginsm, marginmd, marginlg, reverse

component

j-Directory

It's similar component like j-Suggestion, but has improved design and supports more handy features.

component

j-Display

The component calculates the interval between displays automatically. The default display type is lg.

component

j-Dockable

The dockable component expects Array of objects.

component

j-DonutChart

j-DonutChart options: tooltip, format, presentation, select, redraw, animate, size, highlight

component

j-DragDropElement

On drag event displays modal inside given element with text Drop & drop files here. On moving dragged files away from element or dropping dragged files modal will hide. Also on drop event exec functio

component

j-DragDropFiles

j-DragDropFiles options: exec, class, click, accept

component

j-Draggable

A simple component which can capture drag & drop operation.

component

j-Drawer

j-Drawer: NEW: width {Number} a default width (default: 250); NEW: widthlg {Number} optional, width for large displays

component

j-DrawZone

The component can draw a zone (polygon). This component uses [OpenLayers](https://openlayers.org/) library with the [OpenStreetMap](https://www.openstreetmap.org/) map engine.

component

j-Dropdown

j-Dropdown options: required, items, icon, label, type, datasource, text, value

component

j-DropdownCheckbox

j-DropdownCheckbox: NEW now supports dark mode

component

j-DropdownList

j-DropdownList options: required, datasource, limit, disabled, dirplaceholder, dirsearch, check

component

j-DropFiles

j-DropFiles: singleton; captures all dropped files into the window

component

j-Duplicator

BETA VERSION. This component is a bit special component because it can duplicate same content several times with diffferent data-source. Imaging some text editor with tabs which each tab contains diff

component

j-DynamicValue

This component is very special component. It can keep a value for example Number and at the same it can render another readable text. This component is optimized for dynamic usage, so it needs to be l

component

j-DynamicValueList

This component is very special component. It can keep values for example Number and at the same it can render another readable text. This component is optimized for dynamic usage, so it needs to be li

component

j-EAN13

The component will draw EAN-13 barcode according to the path value.

component

j-Edit

The component enables contenteditable attribute for elements with edit or edit2 classes.

component

j-Editable

This component can edit all elements with editable class. It works with data-bind or dynamic values. Learn more from example.

component

j-ElementID

This component fills the data-id attribute with the value read from the path.

component

j-Emoji

j-Emoji: Using UTF emoji; Personal history with frequently used emoticons

component

j-EmojiButton

j-EmojiButton: Component is singleton; Supports Dark theme

component

j-Empty

j-Empty: NEW wait {Boolean} waits for the data (default: false)

component

j-EmptyInline

The component will display text inside the element if the value is empty or the array doesn't contain an item.

component

j-Enter

This component evaluates some method if the user press enter. Important: component finds all input elements and performs CAN() for the path.

component

j-Enterbox

A simple EnterBox. Each value needs to be confirmed via enter key or clicking on the button.

component

j-Error

j-Error: easy usage; errors are displayed only if the path contains an array in the form below:

component

j-ErrorHandler

This component captures the ON('ERROR', function(err event trigger from the ERROR() method and tries to display form more comfortably.

component

j-Exec

The component executes a method when the user clicks on the same element with the exec, exec2, or exec3 class. More information is below. The component is a singleton, and it works for the whole HTML

component

j-Expander

j-Expander: NEW height {Number} a max. height (default: 150); NEW iconup {String} icon up (default: ti-angle-double-up)

component

j-ExpansionPanel

j-ExpansionPanel options: multiple, icon, data-id, title, icon

component

j-Extend

This component is a specific component with powerful functionality. When the component is evaluated then it executes two events in the form below. The component can be helpful in web applications that

component

j-FaIcons

j-FaIcons: Font-Awesome Icons; singleton

component

j-FaIconsButton

j-FaIconsButton: it uses j-FaIcons

component

j-FaviconUnread

j-FaviconUnread: NEW badge {Boolean} optional, enables usage of navigator.setAppBadge() (default: true)

component

j-Features

j-Features: only for desktop computers; singleton

component

j-FeedbackButton

j-FeedbackButton: singleton; universal usage

component

j-FileBrowser

The component will open a file browser and returns selected files.

component

j-FileReader

j-FileReader: singleton; easy usage

component

j-FileSaver

This component is a wrapper for the [FileSaver.js library](https://github.com/eligrey/FileSaver.js/). With this component you can easily save locally generated files directly in the web browser.

component

j-FileUpload

Is very helpful component for uploading e.g. profile photos. I consider this component as inline file upload. Look into the html source. The component uploads files via multipart/form-data.

component

j-FileUploader

A simple component for uploading files. It supports auto-resizing images.

component

j-FileUploadList

This component can upload files and the result adds into the model. Model must be the array.

component

j-FixedModal

The content of the j-FixedModal is divided to 3 parts: header, body and footer. Each part must be defined. The component adds CSS classes to each part, for example first div will contain ui-fixedmodal

component

j-FloatingBox

j-FloatingBox: supports dark mode

component

j-FloatingInput

j-FloatingInput: singleton; supports dark mode

component

j-FloatingPanel

You can combine methods with j-Shortcuts component.

component

j-FloatingSearch

A simple floating search input. It uses absolute position and it's targeted above of toolbars because it can overlay the toolbar.

component

j-Flow

j-Flow: identifiers can't contain char; NEW onpause {String} a path to method fn(path, is), it's executed when the output/input is paused

component

j-Folder

The component can render a content like file browser. path must be in the form e.g. Directory/Directory/File. Learn from example.

component

j-FontAwesome

A simple FontAwesome viewer with fulltext searching. Supports a recent feature and it's responsive.

component

j-FontAwesomeBox

A simple FontAwesome viewer with fulltext searching. Optimized for jComponent +v17.

component

j-Form

component

j-FormData

With this component you can send data via the POST/PUT/DELETE method to the current window or another.

component

j-FormTab

j-FormTab: The component moves the content of this component under <body> tag (because of positioning); The component expects array

component

j-FullForm

The component moves the content of this component under <body> tag (because of positioning) and it supports evaluation of the content of <script type='text/html'>. The example below contains a script

component

j-Gallery

j-Gallery: works with Bootstrap Grid System; easy usage

component

j-Gauge

j-Gauge options: decimals, format, colors, text, stroke

component

j-GPS

The component tries to read GPS coordinates.

component

j-Grid

Display tabular records with filtering, paging and a configurable datasource.

component

j-HashChange

The component captures all changes for #hashtag in the URL address. When change, it emits event hash. The component reacts to the real changes.

component

j-HighlightSyntax

Simple syntax highlighter with help of Highlight.js.

component

j-Icons

j-Icons: Total.js Icons list; singleton

component

j-IdleTime

This component emits event ON('idletime', function(is) {}) when the website is in idle. It reacts on mouse, keyboard, touch events or focusing of window. And the component sets Boolean according to th

component

j-iFrame

The component renders another URL address (stored in the path attribute) directly in the iframe. The biggest benefit is auto-resizing of the iframe element according to the parent selector.

component

j-iFrameEditable

j-iFrameEditable: can edit HTML safely; height of iframe is automatically counted from the body

component

j-iFramePreview

j-iFramePreview: easy usage for e.g. invoices, mails or some other previews; can render HTML safely

component

j-iFrameViewer

This component show a layer (over the content) with a iframe.

component

j-ImageUploader

A simple singleton component for uploading of resized images. The component uploads base64 according to the schema defined in options of caller.

component

j-ImageViewer

j-ImageViewer: singleton; place the component under <body element

component

j-ImportCSV

Output of this component is mapped array. The component uses j-Directory component.

component

j-Importer

j-Import is a great component for importing HTML templates, scripts or styles according to the path and condition. The component can help with SPA applications because you can easily import templates,

component

j-InfiniteScroll

j-InfiniteScroll options: parent, margin, padding, autoscroll, exec

component

j-Info

j-Info: singleton; show: SETTER('info', 'show', options)

component

j-InfoWindows

The InfoWindows component expects Array of objects.

component

j-InlineDatePicker

j-InlineDatePicker options: required, firstday, today, days, months, badges, append

component

j-InlineForm

component

j-InlineProperties

j-InlineProperties: easy usage for different cases; singleton

component

j-Input

j-Input is multifuncional input component which supports a lot of features and it's optimized for everyday usage. It's a great alternative to j-Textbox and j-Dropdown. Works only with jComponent +v17.

component

j-InputTags

j-InputTags: if licon or ricon starts with ! then the component render a raw value instead of icon

component

j-Intro

j-Intro: NEW: delay {Number} a delay for next button between clicks; NEW: nexticon {String} a done icon (default: ti ti-chevron-right)

component

j-IsOpen

j-IsOpen is a simple component for showing opening hours. The component supports auto-refresh datetime.

component

j-JSONTree

j-JSONTree creates tree view from json data.

component

j-Kanban

Important: each item needs own ID {String}, look to example.

component

j-KeySelection

This component allows user to select some items by up/down keys and confirm selection by the enter key.

component

j-KeyValue

A simple component for create key/value pairs values.

component

j-LargeForm

component

j-Markdown

This component contains only Markdown parser.

component

j-Layer

j-Layer: Works with Bootstrap; NEW: autofocus {Boolean/String} focuses the first input, textarea (default: false)

component

j-Layout

Making of layout is very easy and with a lot of possibilities. Layout must have own HTML structure. Look to example. The example below describes only meta data of the layout.

component

j-Layout2

Making of layout is very easy.

component

j-LazyContent

This component shows own content when it's visible. It supports helpful features as redraw and hide.

component

j-LazyImages

The component tries to find all <img elements with data-src='' attribute and if the element is visible then the component will update src='' attribute with the value from data-src='' attribute.

component

j-LazyLoad

j-LazyLoad: easy usage; can be used for everything

component

j-Leaflet

This component uses [Leaflet](https://leafletjs.com/) library with the [OpenStreetMap](https://www.openstreetmap.org/) map engine. The component uses 3rd party dependencies.

component

j-LineChart

Please review an example and keep a data-source.

component

j-ListBox

j-ListBox: NEW dark mode; Works with Bootstrap

component

j-ListDetail

The component divides the content for listing part and detail part. Displaying of detail part depends on the path {Boolean}.

component

j-ListForm

j-ListForm: NEW: delay {Number} initial delay for displaying detail (default: 1000 ms); NEW: component.add() opens a form for creating record

component

j-Listing

j-Listing: easy usage; works with the whole Arrays only on client-side

component

j-ListMenu

A ListMenu component for custom list items. You need to style it.

component

j-ListMenuEditable

Component for editable list menu

component

j-LiveStats

j-LiveStats: supports dark mode; responsive

component

j-LoadContent

The component loads a content from the template <script type='text/html'> and appends it into the element. It's a great solution for reusable content. Learn from example.

component

j-Loading

j-Loading: it automatically assigns flags @showloading and @hideloading; NEW: style {Number} a loading style (default: 1)

component

j-Locale

This component sets current browser locale (number format, date format and time format) according to the navigatior.language.

component

j-MainProgress

This component is singleton. The component is visible when the value if more than 0 and less than 100. Data-binding expects Number.

component

j-Map

j-Map: easy usage; two way binding works with GPS (so the component returns GPS coordinates into the model when the text is used instead of GPS)

component

j-MapZones

The component for drawing and displaying zones on the map. This component uses [OpenLayers](https://openlayers.org/) library with the [OpenStreetMap](https://www.openstreetmap.org/) map engine. The co

component

j-MarkdownEditor

This component use https://simplemde.com/ editor for markdown editing.

component

j-MarkdownPreview

This component depends on j-Markdown component. It uses highlight.js library for syntax highlight.

component

j-Masonry

A simple Masonry component. The component renders an Array according to the display size to columns.

component

j-Menu

j-Menu: easy usage for different cases; works with touches

component

j-Message

j-Message: singleton; easy usage

component

j-MinHeight

This component sets a minimal height for the parent (defined) element. The component is usefull for intranet applications.

component

j-MiniForm

component

j-MobileCarousel

Works only with Bootstrap grid system and in mobile devices xs.

component

j-Modal

Is a simple alternative to j-Form.

component

j-Modificator

This component can modify behaviour of element according to the preddefined schema. The component can be hooked on a body element (because it's singleton) and it's optimized for the performance.

component

j-MonacoEditor

The component renders [Monaco editor](https://microsoft.github.io/monaco-editor/).

component

j-MonthlyCalendar

Month and day names are taken from MONTHS and DAYS properties defined in jComponent library.

component

j-Movable

The component handles similar draggable element and supports movement between each other. Each element according to the selector must have defined draggable='true' attribute.

component

j-Movement

This component captures basic keyboard keys like arrows, enter and esc.

component

j-MultiOptions

MultiOptions component uses this color scheme: <http://codepen.io/devi8/pen/lvIeh> and the declaration below will show all colors in the widget settings.

component

j-NativeNotifications

j-NativeNotifications: easy usage; singleton

component

j-Navigation

j-Navigation: a simple navigation component like Tree; easy for customization

component

j-NavLayout

A simple and fully responsive navigation layout.

component

j-NoScrollbar

j-NoScrollbar: this component is something like j-ViewBox without native/custom scrollbar

component

j-NoSQLcounter

j-NoSQLcounter: easy usage; datasource must be in the form: [{ id: 201702, year: 2017, month: 2, value: 1690 }]

component

j-Notifications

j-Notifications: easy usage; singleton

component

j-NotificationsPanel

j-NotificationsPanel: easy usage; singleton

component

j-Notify

j-Notify: errors are handled automatically

component

j-NotifyBar

j-NotifyBar: singleton; success message SETTER('notifybar/success', 'MESSAGE')

component

j-ObjectEditor

j-ObjectEditor: NEW: exec {String} a path to the function(key, value) and it's executed if the value is changed

component

j-ObjectTree

Expandable/Collabsible object tree.

component

j-Offline

This component displays a message box when there is no internet connection.

component

j-OneTime

This component executes a method only once and it waits for expiration.

component

j-Packeta

This component allows customers to select a [Packeta](https://www.packeta.com/) pickup point. After selection, a complete pickup point object is retrieved, which can be processed using a callback func

component

j-Page

This component can handle different contents asynchronously. The component has same functionality like j-Part. If the element doesn't contain any content then the component downloads the content accor

component

j-Pages

The component is a better alternative to the j-Section component. As a result, you can easily make a multi-page app with dynamic content loading when needed. The result looks very intuitive for mobile

component

j-Panel

component

j-Parameters

This component can changed internal parameters.

component

j-Part

This component can handle different contents asynchronously. If the element doesn't contain any content then the component downloads the content according to the url defined in configuration.

component

j-Parts

This content can handle multiple parts stored in the Array and focus on one specific part. It simulates something like browser tabs.

component

j-PasswordMeter

This component evaluates password according to the rating. Rating is counted as a percentage: 100% = Strong, 50% = Good, 0% = Weak.

component

j-Paste

The component captures paste event.

component

j-Period

The component for picking a time period.

component

j-Permissions

j-Permissions: - jComponent v19|v20; NEW: exec {String} optional, it executes a method (path.to.method) when the user changes the value

component

j-Pictures

The component displays images in a simple list. A user can remove and rearrange images.

component

j-PictureUpload

j-PictureUpload: easy usage; works with Bootstrap Grid System

component

j-PictureUploadExpert

j-PictureUploadExpert: advanced usage; drag and drop support

component

j-Pin

A simple PIN maker.

component

j-Planner

Display scheduled items in a planner.

component

j-Preview

This component resizes the picture automatically according to the settings and uploads it to the server in base64 format.

component

j-PriceRange

The component stores value as string 200-500, explanation: from-to.

component

j-Printer

The component can print a HTML content.

component

j-Progress

j-Progress options: animate

component

j-Prompt

The component (singleton) displays a prompt window with single-line or multiline input.

component

j-Properties

The component uses j-DatePicker, j-TimePicker, j-Directory, j-Emoji, j-ColorPicker and j-FaIcons components.

component

j-Properties2

The component uses j-DatePicker, j-TimePicker, j-Directory, j-Emoji, j-ColorPicker and j-Icons components.

component

j-QRCode

This component creates a QR code. It includes the [QRCode library](https://davidshimjs.github.io/qrcodejs/).

component

j-QRCodeGenerator

j-QRCodeGenerator: easy usage; uses <http://goqr.me> server

component

j-RadioButton

j-RadioButton: for custom design you can use j-RadioButtonExpert; now you can use datasource

component

j-RadioButtonExpert

Perfect component for radiobutton with custom styles. It's a little bit advanced but absolutely worth it!

component

j-Range

j-Range: supports dark mode

component

j-Rating

j-Rating: easy usage

component

j-RawEditable

j-RawEditable is a simple component with a big hidden functionality. It's targeted for additional customization.

component

j-RawInput

j-RawInput is a simple input component with a big hidden functionality. It's targeted for additional customization.

component

j-Ready

This component executes some operations when the component is ready.

component

j-reCAPTCHA

Display a reCAPTCHA challenge and bind its response token to the model.

component

j-Releaser

The component can release after some time own content (DOM) + memory. We recommend to use it for j-DataGrid, j-CodeMirror, j-CloudEditor, etc..

component

j-Remember

The component calls a function within the repeat interval. Information about the previous call is stored in localStorage.

component

j-Resource

Resources are very great solution for e.g. translate some texts in all scripts. The component can be appended multiple-times and all components use one repository for storing keys and values.

component

j-Restart

The component is very primitive and it will only display the content if the value is positive. It can be useful for single page applications that change a version in the background and the front end n

component

j-Rows

The component Rows is a very simple alternative to j-Layout and j-Layout2.

component

j-Rules

The component can create a simple rules which you can transform to some engines like Total.js Flow. The component uses j-Directory component.

component

j-Scanner

The component for scanning documents.

component

j-Scrollbar

Custom scrollbars. IMPORTANT: It wraps current content by adding two nested div elements with relative position. It works with jComponent v17 only.

component

j-ScrollPercentage

Component must be attached on the element which will be as a scroll container. For the entire window use body element.

component

j-Search

Simple fulltext search component. This component can show/hide elements according to the searching phrase.

component

j-SearchBox

The component contains a search box (input).

component

j-SearchData

This component tries to filter data according to the search phrase.

component

j-SearchInput

Customizable search input.

component

j-Section

j-Section: keeps a fixed percentage height; great usage for intranet applications

component

j-SelectBox

j-SelectBox: NEW raw {Boolean} (optional) allow raw HTML to be rendered as text (default: false)

component

j-Selected

The component can set a specific class to a specific element according to the simple condition.

component

j-Selection

The component supports something like checkbox list.

component

j-ServerGrid

BETA VERSION. This grid is designed for single page and enterprise applications. It's a simple alternative to the much more powerful j-DataGrid.

component

j-ServerList

BETA VERSION. This componnet is designed for single page and enterprise applications.It has nearly the same functionality as the j-ServerGrid, but it gives developers more freedom to create custom ite

component

j-ServerListing

j-ServerListing: easy usage; second model $ contains info about data-source { index: Number, page: Number, pages: Number, count: Number, value: YOURDATA }

component

j-ShoppingCart

j-ShoppingCart: singleton; supports discount

component

j-Shortcuts

This component can help with creating keyboard shortcuts. The component is singleton.

component

j-SingleUpload

This component works with loading (when the file is uploading) and message (when server throws an error) component.

component

j-Slider

This slider works only with 100% X axis. Output: percentage (from 0 to 100).

component

j-SnackBar

j-SnackBar: singleton; info message SETTER('snackbar/show', 'MESSAGE', '[BUTTONLABEL]', [callbackdismiss])

component

j-Sounds

This component contains some predefined sounds like beep, fail, success, etc... Path contains a volume control in percentage, 0 disables playing.

component

j-SplashScreen

A splash screen for single page applications. The body has to be wrapped into the <script type='text/html'>HTML</script> tag. The component will be destroyed automatically.

component

j-Spotlight

j-Spotlight: singleton; works with Bootstrap Grid System

component

j-Stash

The component can postpone elements without destructing and detaching from the DOM. This component can help you with dynamic content from the server side. We use the component in the Total.js FlowStre

component

j-Stats12

j-Stats12 options: height, max, border, highlight

component

j-Stats24

j-Stats24 options: height, max, tooltiplarge, tooltip, tooltiptext, border, highlight

component

j-Stats7

j-Stats7 options: height, max, border, highlight, firstday

component

j-StatsBarSimple

The component needs to have a defined template for rendering content and a tooltip. For an understanding look to the example.

component

j-StatusInput

j-StatusInput: easy usage for different cases; supports Dark mode

component

j-Sticker

j-Sticker: NEW: minheight {Number} a minimal height of scroll area for applying of classes

component

j-Suggestion

If the value isn't defined then the component uses name as value.

component

j-SVGIcons

This component registers a new Web component in the form <ui-svgicon name='iconname'></ui-svgicon>.

component

j-Swiper

j-Swiper: wrapper for [Swiper.js library](https://swiperjs.com/); easy usage

component

j-SwitchButton

j-SwitchButton options: required, disabled, border, align, description

component

j-Table

Display records in a configurable table.

component

j-TableGrid

The component makes a simple table grid (composed of div elements) divided by a simple border that you can modify.

component

j-TabMenu

j-TabMenu options: class, selector, datasource, disabled, exec, attr

component

j-Tabs

j-Tabs options: icon, data-id, title, icon

component

j-Tagger

Tagger can render items in the array and each item can be removed.

component

j-Template

j-Template: when the model is null or undefined then the template will be hidden

component

j-Templates

Templates must be defined in <script type='text/html' data-name='NAMEOFTEMPLATE'>Tangular template</script> element. This component supports one special template called empty that will be visible if t

component

j-Textarea

j-Textarea: NEW supports hidden scrollbar

component

j-Textbox

j-Textbox: NEW innerlabel {Boolean} optional, enables inner label (default: true)

component

j-TextboxList

j-TextboxList: NEW movable {Boolean} enables changing of position for existing items

component

j-Time

This component renders a current time.

component

j-TimePicker

The component must be called manually or works with j-Input component automatically. This component is a singleton.

component

j-Title

j-Title: easy usage; singleton

component

j-ToggleBox

ToggleBox can re-order or hide items in Array. The component expects Array.

component

j-ToggleButton

Icons can be in the form: circle or ti ti-circle.

component

j-ToggleMore

Is a simple component to toggle content.

component

j-Tooltip

j-Tooltip: singleton; universal usage

component

j-TouchMove

Simple touchmove component for easy touch navigation next/prev/up/down.

component

j-Tour

IMPORTANT: Put this component on the bottom of the body element

component

j-Tree

Setter automatically extends each object by adding .$pointer property with a tree index.

component

j-TreeView

This component is only a beta preview. It's still under construction.

component

j-Typed

Config is the same as [typed.js](https://github.com/mattboldt/typed.js#customization). The only difference is that all keys are lowercase. This is to maintain consistency with other components. The on

component

j-UIBuilder

This component renders the application designed via UI Builder. You can load the app via the path specified in the component or via the config.url option. The path can contain a URL address to the JSO

component

j-Unsaved

j-Unsaved: easy usage

component

j-Upload

The component can perform uploading of files.

component

j-Validate

The component contains the same source-code as the j-Validation component.

component

j-Validation

The component contains the same source-code as the j-Validate component.

component

j-View

This component can be helpful for reusable views in intranet apps. The component wraps the view into the isolated scope, and the value according to the component path will be used as a model for the v

component

j-ViewBox

j-ViewBox: keeps a fixed percentage height; great usage for intranet applications

component

j-VirtualWire

This is a very special UI component that can move elements from element to another element according to the selector and the value of the path. Look to the example for understanding.

component

j-Watch

The component can evaluate the method in the form function(value, element, type, path) when the value (according to the path) is changed. The component can simplify watching changes in the model.

component

j-Watcher

This component executes the code defined in the <script type='text/js'></script> tag.

component

j-Wiki

Great component for inline Wiki/Documentation.

component

j-Window

A new version of this component supports dynamic evaluation of the content of <script type='text/html'>. The example below contains a script with HTML and the component evaluates the content if the j-

component

j-Windows

The windows component expects an Array of objects.

component

j-WizardExpert

A simple solution for making of advanced wizards. Wizard downloads steps (as HTML parts) according to the schema. Steps are wrapped into custom scopes, so they are under validation.

component

j-Wysiwyg

j-Wysiwyg: supports dark mode

component

j-Xterm

The component renders a terminal output/input directly in the web browser. IMPORTANT: the example doesn't work as you expect, it needs a real terminal output.

component