jQWidgets @jqwidgets-blog - Tumblr Blog

http://ping.fm/7TGNo

Slider with Tooltip

In this post we will show you how to display a tooltip over the slider thumb when we drag it. We’ll skip the initialization of the jqxSlider and will move to the tooltip implementation.

1. Add the CSS style settings for the tooltip.

2. The ‘createTooltip’ function below will create the tooltip and add it to the document’s body.

function createTooltip() { var tooltip = $('<div />'); $(document.body).append(tooltip); tooltip.css('visibility', 'hidden'); tooltip.fadeTo(0, 0.6); tooltip.addClass('jqx-rc-all'); tooltip.addClass('tooltip'); return tooltip; }

3. The ‘refreshTooltip’ function updates the tooltip’s position and text.

function refreshTooltip(value) { var thumb = $($('#slider').find('.jqx-slider-slider')[1]), thumbX = thumb.offset().left, thumbY = thumb.offset().top; tooltip.css('left', thumbX - (tooltip.outerWidth(true) - thumb.outerWidth(true)) / 2); tooltip.css('top', thumbY - tooltip.outerHeight(true) - 3); tooltip.text(value); }

Let’s see how it works:

At first, we find the thumb’s position. Then we save the ‘left’ and ‘top’ position in the thumbX and thumbY fields. After that we position the tooltip. Finally, we set the tooltip’s text to the slider value.

4. Now, it is time to implement the logic when the tooltip should be visible or hidden. We will trigger the ‘mousedown’, ‘mousemove’ and ‘mouseup’ events. In the ‘mousedown’ handler, we will show the tooltip and set its text and position. The ‘mousemove’ handler will update the position and text. In the ‘mouseup’ handler, we will hide the tooltip.

#slider #tooltip #jqxslider #slider with tooltip #jquery slider #javascript slider

jqxSlider improvements coming in jQWidgets 1.3

In jQWidgets 1.3, the jqxSlider plugin will be enriched with a new feature that will allow you to set the slider’s display orientation to ‘horizontal’ or ‘vertical’. Of course, by default the slider will be displayed with ‘horizontal’ orientation. To change the orientation to vertical, simply set the ‘orientation’ property to ‘vertical’.

Here’s how to do it:

$(‘#jqxSlider’).jqxSlider({ orientation: ‘vertical’});

Populate jqxListBox with items from html select element

In this post we will show you how to add jqxListBox to your page and populate it with from a Select element.

To display a jqxListBox on a page, you need to add a DIV element to the HTML markup and set its id:

After that, initialize the listbox with the script below:

$("#jqxListBox").jqxListBox({ width: '200px', height: '250px'});

Now, you are ready to populate the listbox with items from a Select element.

Here’s a simple Select element.

<select style='height: 250px; width: 200px; ' size='2' id='select'> <option>Affogato</option> <option>Americano</option> <option>Bicerin</option> <option>Breve</option> <option>Café Bombón</option> <option>Caffé Corretto</option> <option>Café Crema</option> <option>Caffé Latte</option> </select>

jqxListBox has a function named ‘loadFromSelect’. This function allows you to load the data from a Select element and display it into the listbox. You just need to pass the ‘id’ of the Select element as parameter to the ‘loadFromSelect’ function and that’s all.

$("#jqxListBox").jqxListBox('loadFromSelect', 'select');

#listbox #jquery listbox #jqxlistbox #jqwidgets

jquery splitter

jqxSplitter is a jQuery plug-in which will be come with jQWidgets 1.3 and allow you to create any UI look you want. This jQuery plugin will help you to develop professional and flexible web sites with dynamic and complex layouts. Using the splitter you will be able to horizontally or vertically layout multiple elements, resize them within automatic or specified limits and collapse or expand elements by clicking a collapsing trigger. We know that it is very important for a modern web site to work well on every device and we develop the jqxSplitter keeping in mind that it should be completely functional on touch-enabled devices. Some of the most important and planned features are: saving and loading of the layout, option to persist the layout after reloading the page, expand, collapse and resize of the split panels and completely configurable visual appeal and animation effects.

#splitter #jqxsplitter #jqwidgets #border layout #splitter plugin #splitter widget #ui splitter

Adding jqxExpander to your web page

In this post we will show you how to add a jqxExpander to your web page.

1. Add the JavaScript files.

Create a “scripts” directory in the root directory of your webpage.

Copy the jqxexpander.js file into your scripts folder.

Copy the jqxcore.js file into your scripts folder.

Copy the jQuery.js file into your scripts folder.

Append the following code to the Head tag of your webpage:

2. Add the CSS stylesheet file(s).

Create “styles” directory in the root directory of your website.

Copy jqx.base.css in the styles folder.

Include the jqx.base.css in your web page’s Head tag.

3. Add the HTML markup for jqxExpander.

Create a DIV element in the document’s body with id=”expander”. The DIV must have two inner DIV elements – one for the head section and one for the content section.

<div id="expander"> <div>Head</div> <div>Content</div> </div>

Add the jqxExpander Header content in the first DIV element. Add any content that you want to display in the second DIV element.

4. Initialize jqxExpander using the script below:

#expander #jqxexpander #accordion #jqwidgets #jquery #javascript #javascript expander #expander plugin #jquery plugin

Building jQuery Menus with jQWidgets

jqxMenu is a jQuery plugin that let’s you add a beautiful Menu to your web site. In this post, we will expore how to set up a menu from an existing UL.

Let’s start with a simple ‘DIV’ element with ‘UL’ as a child element.

<div id='jqxMenu'> <ul> <li><a href="#">Home</a></li> <li>About Us <ul> <li><a href="#">History</a></li> <li><a href="#">Our Vision</a></li> <li><a href="#">The Team</a> <ul> <li><a href="#">Brigita</a></li> <li><a href="#">John</a></li> <li><a href="#">Michael</a></li> <li><a href="#">Peter</a></li> <li><a href="#">Sarah</a></li> </ul> </li> <li><a href="#">Clients</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Press</a></li> <li><a href="#">FAQs</a></li> </ul> </li> <li>Services <ul> <li><a href="#">Product Development</a></li> <li><a href="#">Delivery</a></li> <li><a href="#">Shop Online</a></li> <li><a href="#">Support</a></li> <li><a href="#">Training & Consulting</a></li> </ul> </li> <li>Products <ul> <li><a href="#">New</a> <ul> <li><a href="#">Corporate Use</a></li> <li><a href="#">Private Use</a></li> </ul> </li> <li><a href="#">Used</a> <ul> <li><a href="#">Corporate Use</a></li> <li><a href="#">Private Use</a></li> </ul> </li> <li><a href="#">Featured</a></li> <li><a href="#">Top Rated</a></li> <li><a href="#">Prices</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">Enquiry Form</a></li> <li><a href="#">Map & Driving Directions</a></li> <li><a href="#">Your Feedback</a></li> </ul> </li> </ul> </div>

The next step is to include the required javascript files and CSS styles. We will use the ‘Summer’ visual style, so we need to include the jqx.summer.css file after jqx.base.css.

Now, let’s render the Menu using this script:

$("#jqxMenu").jqxMenu({ width: '600', height: '30px', theme: 'summer' });

Here is how the Menu looks after rendering.

#menu #jquery #javascript #menu plugin #jqxmenu #jqwidgets

jQuery Slider is coming in the next release

jQuery Slider

It is about time to give you an update on what is planned for the next release. With our new jQWidgets release, we will introduce a brand new jQuery Slider widget which we named jqxSlider. jqxSlider represents a flexible jQuery Slider that lets the user select from a range of values by moving a thumb along a track. The widget is completely customizable in terms of appearance and offers numerous configuration options like mouse wheel and keyboard support, smooth or step-based slider and support for range sliders. In range slider mode, you will be able to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.