May 11, 2008 at 19:51jQuery for continuing (with plugins)
jQuery is a library recently talked about by almost every web developer , layout designer and designer. Written with CSS in mind, it simplifies access to one or more DOM elements. If you still use prototype, then you can use compatibility mode (though it's not a fact that plugins will work for you). Access is standard thanks to the $ or jQuery function. An element can be added ( .addClass ) or subtracted ( .removeClass ) CSS class. If it is an input element, then writing and reading occurs in the attributes of the element ( .attr ). Internal elements can be specified as via ( .html ).
In addition to minimalism, acceleration, and CSS selectors, the library differs little in functionality from prototype, mootools. It does not extend native JS objects, as protype does and exists in its variable space, therefore, it does not conflict with other libraries.
Suppose you want to make a massive deletion from the list (like 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 the question arises of notifying users about a successful addition, error or just information. Three CSS classes can be used for this, while the elements can be hidden after some time. To do this, use a construct that starts immediately after creating the DOM tree (and not the entire document).
Despite the excellent libraries, I am 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 educational program. You can make objects in Javascript - it’s very convenient to initialize, but they are unique and you can’t use them as an array: Classes in javascript are initialized as ordinary functions inside which the this keyword is used.
Extensions ( plugins ) are mostly written by regular developers. As a more functional experience with the interface, jQuery UI is created as an analogue of scriptaculous for prototype, which includes draggable and sortable elements and widgets for the interface - accordion, tabs, sliders, etc. Below I give my list of useful plugins + I advise you to pay attention to the presentation about development, taking into account the disabled javascript.
With the jQuery JavaScript unobtrusive
→ Original
In addition to minimalism, acceleration, and CSS selectors, the library differs little in functionality from prototype, mootools. It does not extend native JS objects, as protype does and exists in its variable space, therefore, it does not conflict with other libraries.
Examples
Suppose you want to make a massive deletion from the list (like 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 the question arises of notifying users about a successful addition, error or just information. Three CSS classes can be used for this, while the elements can be hidden after some time. To do this, use a construct 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 am 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 educational program. You can make objects in Javascript - it’s very convenient to initialize, but they are unique and you can’t use them as an array: Classes in javascript are initialized as ordinary functions inside which the this keyword is used.
var CommentControl={ // объект читающий все комментарии
strURL:'/comments/read/', //обычный параметр
Init:function(){ //декларация функции
}}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
Extensions ( plugins ) are mostly written by regular developers. As a more functional experience with the interface, jQuery UI is created as an analogue of scriptaculous for prototype, which includes draggable and sortable elements and widgets for the interface - accordion, tabs, sliders, etc. Below I give my list of useful plugins + I advise you to pay attention to the presentation about development, taking into account the disabled javascript.
Images
- ThickBox - gallery, analog of lightbox
- FancyBox is also a gallery, I like it less
- Galleria - gallery
- Multimedia portfolio - a horizontal slider with video, pictures and sound
- imgAreaSelect - selection of the area for cutting
- Animated block of images, suitable for portfolio and panoramas
- Lightbox with smoother animation than prototype + curtain as expected.
Tables
- Flexigrid - table data
- InGrid is an ajax table, but not in json, but in open html. However compact and without hacks.
Forms
- DamnSmallRTE - Small WYSIWYG
- NiceForms - frames input elements with div elements with rounded corners, stylizes radio and checkboxes. I really prefer a more independent version of nice forms .
- FaceBook like - auto tips
- JQuery select - converts all select elements to UL, which can be more flexibly styled
- MaskedInput - input form filling mask
- Uploading files with creating iframe elements (I remind you that in XHTML) they are not valid
- Manipulation of checkbox ami and radio with transformation into iphone-style
- jGrow - size of textarea depending on the size of the text
- jWYSIWYG - the simplest editor
- ajaxForm - upgrad forms for using 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)
With the jQuery JavaScript unobtrusive
→ Original