The second part of the ultra-fully practical JavaScript class library and jquery plug-in is text processing, table and list processing, and practical Javascript development tools.

ArticleDirectory

• Last two good things

If you need to solve some technical problems encountered during development, you may find some related JavaScript class libraries or jquery plug-ins for implementation. This practical class library or jquery plug-in is often collected and saved by you, especially if you do not want to handle compatibility issues with different browsers on your own, using existing JavaScript class libraries or jquery plug-ins can often help you improve development efficiency.

Using the Javascript class library may not be the best choice. In many cases, you may find that the class library is not loaded correctly or has performance problems, for example, using the JS class library on mobile devices. In many cases, the use of class libraries similar to jquery may be a bit cool, but some ultra-lightweight class libraries may be more practical. Here we will also introduce some.

In this article, we will introduce some useful JavaScript and jquery class libraries to help you solve your frequently encountered problems. You may know something, but you certainly won't know it. I hope this article will help you find some practical class libraries that you can apply to your project.

Here we continue to use the ultra-all-super practical JavaScript class library and jquery plug-in Daquan series. This is the second part, including the following:

Text processing:

Syntax highlighter-Uri. js-jquery URL parser-cutting paragraphs-text truncation-toc generator-FAQ generator-sorting text by relevancy.

Table and list processing:

Table styling-searchable/sortable lists-visual search-nested sortable lists-large data sets-CSV to table conversion (or csonv. JS)-Excel-like tables-advanced tables

Practical Javascript development tools:

Yeoman-command line for js-image placeholder-percentage loader-URL parser-Uri normalization-touch events-multi-touch gestures-markdown embedding-embedded enhancement-templating engine-filepicker-extensible RegEx -client-side caching

Text processing prism

A lightweight and scalable syntax highlighting class library. You do not need to specify a class or tag. You can use a standard tag. Prism supports Web workers. All styles are generated by CSS. Sensitive class names include. Comment,. String,. property, and so on. KB compressed version

TOC jquery Plugin: Generate tables of contents

This class library helps you generate a content table for the page. It supports customization and the current content can be highlighted. It is lightweight and can be used multiple times on a page, including a smooth page content scrolling function. Similar plug-ins include: tocify jquery plugin

Magicnav: generates links for the FAQ

If you want to create a quick FAQ navigation, you can use this jquery plug-in to dynamically generate a navigation link for the content.

Cutter. js

This class library solves the content pruning problem. You may have content length restrictions and do not want to modify tags. It helps you simply crop the content to the desired length and allows you to view the complete content.

Trunk8

This is a jquery class library for text cropping. It helps you crop appropriate texts to adapt to the page content. Unlike traditional cropping, the text length is automatically tailored to fit the given space instead of specifying the text length.

Relevancy. js

This class library allows you to sort items based on the relevance of array items. This script tries to match based on some content. Of course, this method is not very successful yet. It requires you to provide a string to sort Matching content.

Table and List Processing Handsontables: Excel-like tables for the Web

This superb jquery class library helps you automatically add row and column content with auto scaling. It also contains legends, scrolling, context menus, conditional formatting, and other features. You can set monitoring table changes. All data can be copied to excel, Google spreadsheet, and libreoffice.

List. js

A cross-browser local JS class library converts the HTML list into flexible editable content. Yes. Your list is easier to search and sort. A template-driven concept makes it easier for you to edit and add content.

Create nested sortable lists with jquery

This plug-in helps you create a sortedlist. You can drag and drop projects in the list to any selected configuration. You can set various attributes, such as the maximum number of sets and custom methods (including layers, arrays, and serialization ). Similar plug-ins include HTML5 sortable, a similar function implemented by HTML5

Callback. js

With volume, you can easily process large volumes of data. This class library helps you create custom table views. The results (such as sorting, calculation, total, and average) of the sort table tool can be from input data (JSON or CSV) and displayed as HTML tables.

Crossfilter

A js Class Library supports querying a large number of multi-variable datasets in a browser.

Jquery CSV to table

This class library reads data from the CSV file or tab-separated file TSV and generates an HTML table

Csonv. js

A small class library is used to obtain CSV data. In use, each file represents an object, and the class library can be embedded with data sets, just like using SQL join in a database.

Datatables jquery plug-in

This class library can display data from different sources, such as Dom, arrays, or server-side JSON files. Provides the paging, filtering, and multi-column sorting functions. Many free functions are implemented through plug-ins, such as row grouping, column filtering, and column size change. The minimum size of this class library is 68kb, And the size after Gzip is 20kb. Open source and based on GPL and BSD.

Practical Javascript development tools Yeoman

A set of class libraries and tools help you deal with new projects, automatically compile coffeescript and compass, and run your scripts based on jshint to test the correct language coverage and optimize your images. It effectively utilizes nodejs, compass, phantomjs and Other plug-ins and requires the installation of node 0.8.x.

Grunt. JS: Task-Based command line tool

Grunt is a task-based JavaScript command line compilation tool. Has a large number of predefined tasks: File Association, project management, jshint syntax verification, uglifyjs compression, qunit unit testing, server startup, run unit testing, etc.

Holder. js

A client image placeholder class library helps you process the placeholder content in the browser. Supports online and offline, and provides a chain of APIs. You can use different themes in different regions. Because it uses your settings to extend the default settings, you only need to include the configurations you need to modify.

Pxloader

A JavaScript class library helps you easily download images, audio files, or other files before performing certain operations. This script allows you to set a preloader for an HTML5 game or website. You can monitor the download status or even set the priority.

Percentage Loader

This awesome progress bar is introduced in percentageloader, A jquery progress bar plug-in developed by apsaradb for HTML5. This class library allows you to generate beautiful progress bar styles.

Resumable. js

This class library is designed to handle HTTP upload error tolerance mechanisms for large files. Provides multiple HTML file APIs that can be resumed at the same time, which means that a complete re-upload is not required after the connection is lost.
. You can manage the upload without worrying about the loss. Of course, the browser must support the HTML5 file API, which can only be used by firefox4 + and chrome11 +.

History. js

This class library elegantly supports HTML5 history/state in the browser
API (pushstate, replacestate, onpopstate ). Data, title, and replacestate are supported. Supported
Jquery, mootools, and prototype. You can modify the URL without using hashes.

Jurlp

A jquery URL plug-in is used to parse, process, filter and monitor the href and SRC attributes in the URL. You can also create an anchor element from the URL.

Uri. js

You can use this class library to process URLs. Provides APIs for jquery styles. It provides a simple and powerful way to process query strings. It has many URI-related functional methods that can be converted into relative and absolute paths.

Touchy. js

A class library for processing touch events does not have any class library dependencies. It helps you easily handle touch events. Similar Class Library: Hammer. js

Gridster. js

This cool class library was introduced in the jquery plug-in: the cool multi-column grid drag-and-drop plug-in gridster. js article. Another very nice drag-and-drop jquery plug-in.

Freetile

Freetile is also a cool plug-in that helps you generate responsive dynamic la S.

Strapdown. js

This tool helps you embed an editor into your page. No server support is required. Cross-browser and GitHub-style syntax highlighting.

Accessifyhtml5.js

A polyfill of HTML5. Many modern browsers support new HTML elements. However, the access attribute of ARIA is not available. This script helps you add these attributes to your website.

Jquery ++

A jquery extension class library adds many events and features. Reference: jquery's practical features extension class library: jquery ++

Hogan. js

Twitter's template engine allows you to pre-compile your template for vanilla JavaScript. This engine is developed using the mustache test suite.

Zepto. js

Awesome lightweight JavaScript class library with jquery-like syntax. For more information, see zepto. JS, a lightweight JavaScript class library for mobile development.

Cssrefresh

A tool that automatically refreshes CSS files. For details, refer to: share two tools to help you automatically refresh CSS files.

Has. js

Help you find the reference library and its associated JavaScript class libraries, pure JavaScript implementation

Filepicker. Io

An advanced File Upload solution that can be integrated with Facebook and Dropbox

Xregexp

An open-source mit license JS class library. Provides extensible regular expressions. Provides multiple New syntaxes, tags, and methods. Similar Class Library: matches. js

Framewarp

This class library helps you use CSS transition effects to display pages. You have an auxiliary method to compare the URL in IFRAME with the URL in the address bar. If yes, access the DOM in IFRAME and add the APU method. One is hidden, and the other sends messages to the parent window.

Filer. js

HTML 5-based file system API conversion class library. Using Unix-like commands, HTML5 is easier to use. You may also be interested in another class library downloadbuilder. js. Provides local file merging and user session storage to cache jsonp/ajax requests.

Client Side caching for Javascript

The server cache is very helpful for response speed. However, you may want to perform caching on the client. This class library uses HTML5 local storage to cache content. Has APIs similar to memcache. Does not rely on other class libraries. If the browser does not support local storage, this class library can automatically adapt. IE6/7 users will not encounter any JS errors.

Last two good things review. js

We have introduced review. JS, a great JavaScript responsive view (viewport) tool library to help you better control and manage responsive views.

A hotline for all your JavaScript Problems

Websites that help you deal with JavaScript problems online, of course, in English!

Via smashingmagazine

Source: Ultra-complete and ultra-practical JavaScript class libraries and jquery plug-ins book 2: Text Processing, table and list processing, and practical Javascript development tools

Date: 2012-10-8 Source: gbin1.com

If you need to solve some technical problems encountered during development, you may find some related JavaScript class libraries or jquery plug-ins for implementation. This practical class library or jquery plug-in is often collected and saved by you, especially if you do not want to handle compatibility issues with different browsers on your own, using existing JavaScript class libraries or jquery plug-ins can often help you improve development efficiency.

Using the Javascript class library may not be the best choice. In many cases, you may find that the class library is not loaded correctly or has performance problems, for example, using the JS class library on mobile devices. In many cases, the use of class libraries similar to jquery may be a bit cool, but some ultra-lightweight class libraries may be more practical. Here we will also introduce some.

In this article, we will introduce some useful JavaScript and jquery class libraries to help you solve your frequently encountered problems. You may know something, but you certainly won't know it. I hope this article will help you find some practical class libraries that you can apply to your project.

Due to the length of the article, there are several parts:

• Web Forms
• Web Printing and Layout
• Practical Class Library
• Maps and Images

Quick introduction:

Next, you will see a simple class library list introduction. Each class library connects to the corresponding website, which can help you quickly find the desired class library tool.

Web form:

Forms framework-Auto-saving drafts-File Upload(AndResuming large downloads)-<SELECT> boxes-Modal boxes-Form accordion-Dynamic labels-Drop-down with images-ToolTips-Extended Input-Form validation-Credit card validation(Alternative)-Email check-Password Complexity

Web Print layout:

Repairing vertical baseline-align text to a grid-responsive measure-fixing widows-fluid line height-scalable headlines (or smart headlines)-lettering. js-kerning. js

Practical Class Library:

Exchange rates and currency-date/time formatting-relative timestamps-number and currency formatting-cookies. JS-zip. JS-extra string methods-countdown. JS-sticky content-Google Maps-interactive maps-progress bar-favicon notifications (or notificon)

Images, maps, and graphics:

World maps-subway map-Google Maps-open source maps-SVG fallback-gauges-graphs-timeline-retina display-magnifying glass-Interactive graphs-plots-Time Visualization

Web form and input verification select2 jquery plugin

A jquery plug-in used to replace and enhance <SELECT>. This plugin supports searching and unlimited scrolling of remote data sets. Users can search for the information they need
Content. Non-Matching content will be removed. You can click and press enter to select the option. This plug-in supports standard selectbox and multiple selectbox and
Optgroup. It also supports selected, disabled, and default text (placeholder attribute of HTML5 ). This plug-in is based on chosen. Another class library solution that supports jquery, mootools, prototype, and Drupal 7 modules is provided.

Jquerycoreuiselect

Another class library that uses jquery and CSS to enhance the <SELECT> element across browsers. Jquery1.6 + is required. Provides complete customization, supports optiongroup, automatic computation, keyboard support, and callback compatible with mobile devices.

Sisyphus. js

This class library has been described in detail in articles before gbin1. A class library Gmail automatically saves the script. Save the form data to HTML5 for local storage, and restore the content after page reloading. After the user submits the content, the local storage content is cleared.

Jquery credit card validator

This class library listens to input events (using the keyup event as fallback). Each time a value is input, the verification method is called. When a credit card can be identified, the type is automatically highlighted. If you believe
If the card number is correct, a correct green mark is displayed. Support for US Express, Diners Club, and discover
Card, JCB, laser, MasterCard, visa and VISA Electron. You can also consider credit cards JavaScript validator and smart validate credit card validation plugin.

Textext

This class library has also been introduced in the gbin1 article. It allows you to convert HTML text into input fields, which can help you generate tags and support Ajax and focus.

Avgrund: better modal boxes

A jquery plug-in helps you display pages and pop-up content boxes. The earliest script was developed by Hakim El hattab. With CSS changes and transitions, the plug-in can be compatible with older browsers. MIT licensed.

Visualsearch. js

This plugin helps you improve your search experience and provides the auto-completion function. You can specify the completion length and its complete value. The search query you get is a structured object, so you do not need to parse it yourself.

Ideal forms framework

A very useful jquery plug-in for creating and verifying responsive HTML5 forms. Provides keyboard support and custom input types. Verification, localization, and HTML5 placeholder. Supports IE8 +, chrome, FF, opera, ios5 +, and android4.0 +.

Mailcheck

If a javascript spelling verification error occurs, other domain names are prompted. This helps you effectively reduce input errors. You can customize the desired domain name.

Validate. js

A lightweight JavaScript verification class library. You can use a set of rules or custom information to verify the form information. The entire class library does not have any dependencies. You can define your own callback method. Supports all mainstream browsers (supports IE6)

Jquery File Upload

Supports multi-file selection, drag and drop, progress bar, and image preview. Supports cross-origin, multipart, and resumable upload, and the size of the client image. Support all server platforms (PHP, Python, Ruby, Java, node. JS, etc)

Grumble. js

This jquery plug-in provides multi-direction toolbar prompts. You can use CSS to rotate an angle or 360 degrees for a specified element. Supports IE6 + and modern browsers.

At the same time, you can look at tipped. Another larger tool prompt class library has a scalable API

Dialogs for Twitter Bootstrap

A very small JavaScript class library allows you to use Twitter's Bootstrap to create a dialog box without worrying about creating, managing, and deleting DOM elements and JS event processing.

Or you can see that date range picket for bootstrap also has a class library in development: HTML snippets for Twitter Bootstrap.

Ddslick

A free lightweight jquery plug-in helps you create a custom drop-down menu that can contain common text, images, and descriptions. The selected callback method is supported. You can also use css3 drop-downs

Noty

This jquery plugin helps you easily create alert, success, error, warning, information, and confirmation prompts.

You can quickly customize text, animation, speed, and buttons at any location on the page.

Jquery. complexify. js

This plug-in is described in detail in the previous article "complexify", a great jquery password Strength Test plug-in. It helps you generate a password with strong verification.

Numberfy

Using this class library, you can integrate local row numbers to support your textarea. When you press any button in the text box, the current value will be split. This plug-in does not support ie because of the textwrap bug.

Formaccordion

Jquery plug-in helps you hide and restrict form fields with simple conditions

Jquery. superlabels

You can use this class library to generate a sliding fade-out label. This implementation helps you slide the display when the focus is changed and fade out when you input the content. In addition, a fallback method is provided.

Cryptico

A JavaScript system encrypted with RSA and AES

Via smashingmagazine

Turn: one of the most practical JavaScript class libraries and jquery plug-ins: Web form and input verification