Charts are a great visual aid when presenting data. You can’t build a professional admin panel without them. They are also tricky to set up. However, there is a new library that makes things easier – xCharts. Today, we are going to use it along with the daterange picker for Twitter Bootstrap, to build a pretty, AJAX-powered chart for your web application that fetches data from a MySQL table.
Best jQuery Bootstrap Plugins & Tutorials with Demo
Image Picker : jQuery plugin User Friendly Select Element
Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.
Features:
- Works great on both single and multiple select elements.
- Falls back nicely for clients without JavaScript enabled.
- Integrates nicely with Twitter’s Bootstrap markup.
Fuel UX : Clean and lightweight UI controls
Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests.
Bootstrap enhance with CSS3 animation
This script customize the animate.css and bootstrap.js, add CSS3 transition support with the Twitter Bootstrap, include the modal, popover and tab. You can enable this by change a little pice of your exist code.
Features:
- CSS3 transition support.
- Minimal change of the code, works fine with the exsit code.
- FAQ and source code are included in the package, free update in the future.
Twitter Bootstrap Multi-Color Progress Bar – a jQuery Plugin
Multi-Color progressbar component for Twitter Bootstrap creates a progressbar which consists out of three colors or zones.
- Green (bar-success)
- Orange (bar-warning)
- Red (bar-danger)
The progressbar consists out of three zones: safe, warning and danger. The safe zone is displayed in green, the warning zone in orange and red is used for the danger zone.
Dropbox File Uploader With Twitter Bootstrap
A few weeks ago, Dropbox introduced a neat new feature – the Dropbox Chooser. By embedding it into your website, you give users a button with which they can attach files from their online storage.
Today we are going to use this feature to create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result. Additionally, we will make use of Twitter Bootstrap to show dialog windows, and PHP on the backend for the actual photo cropping.
X-editable : Create editable elements with jQuery & Bootstrap
This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. It’s new life of bootstrap-editable plugin that was strongly refactored and improved.
Features:
- popup and inline modes
- supported inputs:
- text
- textarea
- select
- date
- dateui
- checklist
- client-side and server-side validation
- customizible container placement
- toggle by click or manually
- keyboard support (escape/enter/tab)
- works in IE7+ and all modern browsers
- unit tested
jQuery Date Range picker for Twitter Bootstrap
This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates. It was created for the reporting UI at Improvely.
If invoked with no options, it will present two calendars to choose a start and end date from. Optionally, you can provide a list of date ranges the user can select from instead of choosing dates from the calendars. If attached to a text input, the selected dates will be inserted into the text box. Otherwise, you can provide a custom callback function to receive the selection.The date range picker relies on jQuery, Datejs for parsing strings into dates and defining custom ranges, and the Twitter Bootstrap CSS.
