https://github.com/webix-hub/webix-jquery

Using Webix with jQuery
https://github.com/webix-hub/webix-jquery

jquery webix webix-integration

Last synced: 12 days ago
JSON representation

Using Webix with jQuery

• Host: GitHub
• URL: https://github.com/webix-hub/webix-jquery
• Owner: webix-hub
• Created: 2017-03-23T18:29:00.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-22T13:38:14.000Z (over 7 years ago)
• Last Synced: 2024-11-17T03:43:11.846Z (about 1 month ago)
• Topics: jquery, webix, webix-integration
• Language: JavaScript
• Homepage: http://webix.com
• Size: 14.6 KB
• Stars: 2
• Watchers: 9
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
jQuery adapter for Webix UI

==========================

[![npm version](https://badge.fury.io/js/webix-jquery.svg)](https://badge.fury.io/js/webix-jquery)

Before Webix 4.3 this module was part of webix.js.

Making preparations

-------------------

JQuery is included by a link specified in your document's head section: 

~~~html

~~~

Component initialization

-----------------------

~~~js

$('#div ID/ .CSS selector').webix_component({config});

~~~

Let it be list:

~~~js



  ...

$("#listA").webix_list({

	width:320, height:600,

	template:"#votes# #rank# #title#",

	data:big_film_set

});

~~~


**Related sample:** [JQuery List](https://webix-hub.github.io/webix-jquery/samples/01_list.html)

Working with Components 

--------------------------

You can get to any component using the same scheme and apply functions to it. 

~~~js

$('#div ID/ .CSS selector').webix_component().count() 

~~~

Advantages of JQuery Integration

-------------------

1 . An HTML container for any component can be specified by its **ID** or **CSS class** used with it. With the webix library means HTML container can be defined by its ID only:

~~~js





...

$("#listA").webix_calendar({config}); // div ID

$(".calendar_here").webix_calendar(); //CSS selector

~~~


2 . If you use the same **CSS class for several nodes**, you can create **multiple instances** of the same view by pointing to this CSS class during component initialization. 

~~~js





...

$(".calendar_here").webix_calendar();

~~~


**Related sample:** [JQuery Calendar](https://webix-hub.github.io/webix-jquery/samples/02_calendar.html)

3 . An **HTML table** can be a **data source** for the component initialized in the same container. Each column in the table is reflected as a template item for the component:

~~~html

	1

	Record #102

	5406

~~~

Columns in template are called ##data## and are numbered starting from 0. 

~~~js

{

	template:"
#data2# 
 #data0#. #data1#",

	...

}

~~~


**Related sample:** [JQuery List from HTML table](https://webix-hub.github.io/webix-jquery/samples/03_from_table.html)