Datatable row recorders feature is used in tables using it’s add-on plugin named (dataTables.rowReorder.js). Using this addon we can drag and drop rows in any order we want in the table. This works only if the table is having some unique serial number or ID. Let’s work on the implementation of datatable with row reorder feature.
See Demo Here
Small and easily customizable percentage progress bar can be help full in some cases when you want to show quick inline graphs or data notations. If the requirement is simple, we can’t proffer heavy libraries. For the same reason, I have written a small jQuery function to draw an animated progress bar. I have added some custom option which user can easily change in HTML attribute it self.
We can change Height, Width, Background or Bar color, Speed of animation. You can suggest me if other features can be added.
You can always find jQuery plugins or libraries for any type of requirement. But if we try to add plugins for every specific requirement, then we end up with a bunch heavy loaded library set which can take much time to load and can badly affect page efficiency. So I personally prefer to always try to code some specific function or method which can easily do the stuff without causing any hassle to page load time and including big sized libraries which always and have not required features which we will never need in future.
Here we will talk about very simple but very important function which can make longer texts look more concise and user-friendly. When we have a web page with longer texts in every section, it becomes very difficult for users to scroll those lengthy documents either they are on desktops or mobile devices. So “Read More” functionality comes to the rescue. This feature adds a read more link after longer texts trimming to 2-3 lines. So if a user wants to read the whole text, they can simply click on “Read More” and see the whole text.
Graphical representation of data leaves a long lasting picture with better understanding. Sometimes we may need to use graphs and charts to better implement data in web applications.
During my research for some project, I came across with such beautiful chart plugins. Here are some top chart libraries.
Nowadays most of the mobile app developers moving towards hybrid apps which can be deployed on any platform without knowing any advanced languages. The best framework used to build hybrid apps is Ionic, which is gaining a lot of attention these days.
But if we compare a native and a hybrid, if may give you some performance lags as hybrid apps use web views. In latest OS systems like android, we can increase performance to a new level so that there will be nearly no difference in Hybrid apps.
Like native Android apps, we sometimes need a view, where list items can be loaded after user reached the bottom of all loaded list items. This behavior is recommended if we have a long list to load and we don’t want the user to tap next every time to view next set of list items.
When using the Ionic framework, we always have the option to show alerts or other confirm dialogues. But sometimes there are requirements to show messages to a user which involves no user interaction. Like we see in a native android app there is a Toast message which informs a user about a message then simply goes aways after some time .
In PhoneGap or Cordova, we have one plugin which will do the same thing for us in a Hybrid environment as well. Here we will use Toast-PhoneGap-Plugin use integrate native like Toast or Info messages in our app.
Ionic Framework using AngularJS 1 is having some different type of input field styles like:
1) Placeholder Labels
2) Inline Labels
3) Stacked Labels
4) Floating Labels
5) Inset Forms
6) Input Icons
Documentation for these can be found here http://ionicframework.com/docs/components/#forms
But the style which I was looking for was a merge of both Floating labels plus Input Icons. There was not a way to use a blend of these anywhere. But after some CSS tweaking, I managed to achieve the piece I was looking for
Making in-page elements or containers give more flexibility to the user so that he can move or drag stuff as per requirement.
In jQuery UI we are pretty much aware of a Draggable function which makes thing a lot easier. jQuery is still loved due to its plug play and enjoyable way of work. Today is the era of AngularJS, now nobody talks about jQuery they simply jump in MV* frameworks and only AngularJS comes to the rescue.
There are a number of tools which can easily create PDF files from JSON or raw data provided. But in some situations, we have rich UI elements like images and data representation in graphs, so in that case, we may require PDF as it is.
jsPDF and html2canvas are really powerful tools which can help you to convert the whole HTML page into a multi-page PDF document, which you can show in iFrame or user can even download it.
The dropdown select box can have single and multiple selections. The muli selection is enabled by adding multiple attribute property.
To set the value of the select box in the jQuery use val() method. To set a single value in dropdown pass value as string in val() method and an array of values in case of multi-selection
To get an array of selected checkboxes values we need to use jQuery each() method and :checked selector on a group of checkboxes.
The each() method will loop over the checkboxes group in which we can filter out selected checkboxes using <strong>:checked</strong> selector.
In general application with tabular data, may have selected using a checkbox on each row. In that case, there should be a master checkbox to check/uncheck all table rows.
Here we will discuss an example table that will have a master checkbox on the header and each table row with its own checkbox.
A user can check/uncheck all rows using a single master checkbox on the header.
. If we need to create an app that is having a login page to into pages, then sidemenu is not required anymore.