jQuery to continue (with plugins)
jQuery is a library about which practically every web developer , layout designer and designer recently speaks. Written with CSS, it simplifies access to one or more DOM elements. If you still use prototype, then you can use the compatibility mode (though not the fact that you will have plug-ins working). Access is standardized via the $ or JQuery function. An element can add ( .addClass ) or subtract ( .removeClass ) CSS class. If this is an input element, then writing and reading occurs in the element attributes ( .attr ). Internal elements can be specified as via ( .html ).
In addition to minimalism, acceleration and CSS selectors, the library is not much different in functionality from prototype, mootools. It does not extend native JS objects, as a protype does and exists in its variable space, therefore it does not conflict with other libraries.
Suppose you need to make a mass removal from the list (as in the mail), for this a huge list of checkboxes is generated, and to massively select them all, you can create a global checkbox
Often there is a question of notifying users about a successful addition, error, or just information. To do this, you can use three CSS-class, while the elements can be hidden after some time. To do this, use the construction that starts immediately after creating the DOM tree (and not the entire document).
Despite the excellent libraries, I’m in no hurry to drop prototype.js and switch to jQuery, because bad code can be written in any language and with any library. Therefore, a little literacy. You can make objects in Javascript - it is very convenient to initialize, but they are unique and cannot be used as an array:
Classes in javascript are initialized as normal functions within which the this keyword is used.
The plugins extensions are mostly written by ordinary developers. JQuery UI is also being created as a more functional experience with the interface, as an analogue of scriptaculous for prototype, which includes drag and drop elements and widgets for the interface - accordion, tabs, sliders, and so on. Below is a list of useful plugins + I advise you to pay attention to the presentation of the development, taking into account the disabled javascript.
Unobtrusive JavaScript with jQuery
')
→ Original
In addition to minimalism, acceleration and CSS selectors, the library is not much different in functionality from prototype, mootools. It does not extend native JS objects, as a protype does and exists in its variable space, therefore it does not conflict with other libraries.
Examples
Suppose you need to make a mass removal from the list (as in the mail), for this a huge list of checkboxes is generated, and to massively select them all, you can create a global checkbox
Often there is a question of notifying users about a successful addition, error, or just information. To do this, you can use three CSS-class, while the elements can be hidden after some time. To do this, use the construction that starts immediately after creating the DOM tree (and not the entire document).
$(document).ready(function() { setTimeout(function() {$('.error').fadeOut('slow');}, 20000);});Classes in javascript
Despite the excellent libraries, I’m in no hurry to drop prototype.js and switch to jQuery, because bad code can be written in any language and with any library. Therefore, a little literacy. You can make objects in Javascript - it is very convenient to initialize, but they are unique and cannot be used as an array:
var CommentControl={ //
strURL:'/comments/read/', //
Init:function(){ //
}}Classes in javascript are initialized as normal functions within which the this keyword is used.
function CommentBox(ID){
this.strURL='/comments/reply/'+ID; //
this.ID=ID;
this.reply=function(){
alert("AJAX request goes here");
}
this.update=CommentControl.Read(ID); //
}
Extensions and Libraries
The plugins extensions are mostly written by ordinary developers. JQuery UI is also being created as a more functional experience with the interface, as an analogue of scriptaculous for prototype, which includes drag and drop elements and widgets for the interface - accordion, tabs, sliders, and so on. Below is a list of useful plugins + I advise you to pay attention to the presentation of the development, taking into account the disabled javascript.
Images
- ThickBox - gallery, analog lightbox
- FancyBox is also a gallery, I like it less
- Galleria - gallery
- Multimedia portfolio - horizontal slider with video, pictures and sound
- imgAreaSelect - selection of the area to cut
- Animated image block , suitable for portfolio and panoramas.
- Lightbox with smoother animation than prototype + curtain as expected.
Tables
- Flexigrid - tabular data
- InGrid is an ajax table, not on json, but on open html. But compact and without hacks.
Forms
- DamnSmallRTE - Small WYSIWYG
- NiceForms - frames input divs with rounded corners, styling radio and checkboxes. I really prefer the more independent version of nice forms .
- FaceBook like - auto-help
- JQuery select - converts all select elements to UL that can be styled more flexibly
- MaskedInput - input form filling mask
- Uploading files with the creation of iframe-elements (I remind you that in XHTML) they are not valid
- Manipulation of checkbox and radio with turning into iphone-style
- jGrow - size textarea depending on the size of the text
- jWYSIWYG - the simplest editor
- ajaxForm - upgradit forms to use ajax forwarding
- DatePicker - shows generates a calendar under the specified fields
Layout
- RoundedCorners - rounded corners using canvas element generation
- CodaSlider - slides in addition to bookmarks (tabs)
Unobtrusive JavaScript with jQuery
')
→ Original
Source: https://habr.com/ru/post/25195/
All Articles