Skip to main content

ES6 101 - Map

ES6 101 - Map
ES6 Map is the topic of today’s post which also is the 11th in the ES6 101 Series. Map is going to be fairly easy, so before jumping into it, if you want to look at other features we have covered so far, here is a quick list for your reference.Fat Arrow FunctionsLexical Declarations - LetLexical Declarations - ConstSpread OPeratorTemplate LiteralRest OperatorDefault parametersDestructuringFor…ofSetNow let’s see what Map has to offer. As opposed to Set (which by the way, I highly recommend reading), Map saves values as key-value pair. Let’s see for ourselves how this works!Example of ES6 Mapvar dummyMap = newMap(); dummyMap.set("1"); // Method is set as against add in ES6 Setconsole.log(dummyMap); // [["1",null]] dummyMap.set("1", "one"); console.log(dummyMap); // [["1","one"]] dummyMap.set("2", "two").set("3","three"); console.log(dummyMap); // [["1","one&…

Jquery Mobile Form - Select Menus Part I

    Today we will take a look at the select boxes styling and usage using Jquery Mobile. Select menus has a little more explanation and examples than other controls and so I am dividing the select menus tutorial into 2 parts. In the first part, we will take a look at the basics of the Jquery Mobile select menus and in the second part we will take a look at the more complex examples involving the select menus.

    The Jquery Mobile select menu is based on the native HTML select element, which is styled and modified to suite the Jquery Mobile framework's style. By default, the framework leverages the native OS options menu to use with the custom select button. When the button is clicked, the native OS menu will open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value. The framework also offers the possibility of having custom (non-native) select menus; which we will discuss in part 2 of this tutorial. Refer to the screenshots below to understand how the native select menus work.

The Native menu - Android 4.1.1/ HTC One X


The Native menu - iPhone 4S/ iOS 6.1.3


    The select boxes can be used singularly or in a vertical group or can be even grouped horizontally. These select boxes can be used along with data-mini="true" too, which renders the select boxes in a smaller size. We will take a look at all this in the example that follows.


    The first implementation of the select box in the above code is the regular, simple select box. The framework styles this select element as per the Jquery Mobile framework styles displaying a button with custom down arrow and using the native OS menu. The second implementation is exactly similar to the first one with the only difference of data-mini="true" attribute. Addition of this data attribute to the select element renders a smaller select box..

    In the next implementation we have the label and the select box aligned side-by-side. To achieve this, we need to wrap the select element with in a div with data-role="fieldcontain". Adding this data attribute to the div tells the framework to align the label and the select box side-by-side.

    In the fourth implementation we have the regular select element with the optgroup used for the options. Including options within the optgroup element, groups these options visually under a single optgroup label. However, the support for this feature in mobile selects is a bit spotty, but is improving by the day.

    Multiple select boxes can be grouped together like checkboxes or radio buttons to achieve visual grouping of the select elements. The select boxes can be grouped vertically as well as horizontally. To achieve this the select elements need to be wrapped within a fieldset element with data-role="controlgroup". Doing this would group the select boxes vertically (which is the default grouping technique). To group the select boxes horizontally as seen in the last implementation, you need to add another data attribute data-type="horizontal" to the fieldset element.

    For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label. To hide labels in a way that leaves them visible to assistive technologies. — for example, when letting an element's placeholder attribute serve as a label — apply the helper class ui-hidden-accessible to the label itself. While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.

    Hope this post has cleared out your basics of the Jquery Mobile select menus. In part 2 of this tutorial, we will take a look at the advanced select menu options where we can override the default menu behavior and create differently styled select menus. Stay tuned for the advanced topics on select menus in the next post and you can also look at the complete list of Jquery mobile listview and form elements examples. Fun is on it's way!

Recommended for You

Diwali Wishes

Happy Diwali 2017
We are already on the brink of the new year and the festival of lights is already here!May this festival of lights, bring joy, peace and prosperity to you and your loved ones! Wishing you a very happy Diwali and a prosperous new year!For your holiday family portraits and baby shoots I would recommend a really talented and professional photographer in the SF Bay Area. Her portfolio would speak for itself!Happy holidays and have a safe Diwali!

ES6 101 - Spread operator

ES6 101 - Spread Operator
Welcome to the fourth post in the ES6 101 series and the topic of discussion today is the Spread operator or the dot dot dot operator.... It is not very common to call it the “dot dot dot” operator, but I just kind of like the ring to it! Also when you say “dot dot dot” it actually helps me visualize unpacking multiple gifts from a gift box. Wondering why I am taking about gifts and gift boxes and “dot dot dot”. Well, the spread operator... is actually more like unwrapping gifts from a gift box. The spread syntax allows an iterable such as an array expression to be expanded in-place. Let’s actually dive into some examples straight away. It is much more simpler that way!Examples of the ES6 Spread Operator ...Example #1Problem statement: Let’s write a function to display the sum of 3 numbers passed to it in an array.

We would have done this as follows in the old ES5 way. 😏var arr = [1,2,3]; functionsum(a,b,c) { var output = a + b + c; consol…

ES6 101 - Destructuring

ES6 101 - Destructuring ES6 Destructuring assignments is the topic of this post and we will take a look at what destructuring means and we will look at multiole examples to understand the concept. As the name suggests, using the destructuring syntax, we would be breaking down values in an array or properties in an object into seperate variables.Arrays and objects allow you create, on-the-fly various packages of data.let a = [1,2,3]; ES6 destructuring uses similar syntax, however the LHS will now be a variable that would hold the package that you need to create. Sounds complex? πŸ˜“ Not really, just move ahead to the example that follows and you should get the hang of it.let a = [1,2,3]; let [x,y] = a; // We are now assigning array 'a' to a new arrayconsole.log(x); // 1console.log(y); // 2let [m,n,o] = a; console.log(m); // 1console.log(n); // 2console.log(o); // 3This helps us clearly see what destructuring does for an array! It basically unpacks the values in the array a…

ES6 101 - For..of

ES6 101 - For..of This is the 9th post in the ES6 series and we have looked at a whole bunch of some amazing and highly productive ES6 features that you can start using right away! Here is a comprehensive list of all the features that we have covered so far. 😍Fat Arrow FunctionsLexical Declarations - LetLexical Declarations - ConstSpread OPeratorTemplate LiteralRest OperatorDefault parametersDestructuringNow let’s look at what for..if has to offer us. Essentially, for..of does exactly the opposite of what for..in does. Let’s see what the difference is.// Using for..inlet someVar = [1,2,3,4,5] for(let item in someVar) { console.log(item); // The index values would be consoled. } When you execute the above code snippet, you will observe that, you get all the index values 0 1 2 3 4 of the array in the console. If you had to get access to the values at these indexes in the array, you would have to add the following to the above snippet in the for..in loop.console.log(`${it…

ES6 101 - Set

ES6 101 - Set
This is going to be the 10th post in the ES6 101 series and the topic for today is Set. Set object is a collection of values and is iterable. One cool thing about the values in set is that these are unique. This means that a set can have a value only once. Moreover you can think of a set as an actualy set in Mathematics. We will see a few samples to understand this concept of set.Examples of ES6 SetCreating a new set and adding values to it.Let’s create a new set and add some values to it and then discuss it further.let dummySet = newSet(); // That's it! A new set object is created dummySet.add(1); console.log(dummySet); // [1] dummySet.add(1); console.log(dummySet); // [1] and not [1,1]. This is because, values in a set are unique. dummySet.add(2).add(3).add(4); console.log(dummySet); // [1,2,3,4] dummySet.add('The UnderTaker').add('John Cena'); console.log(dummySet); // [1,2,3,4,'The UnderTaker…