Embed Size (px)
Citation preview
Web Interface Essentialsby Marc Grabanski
When building web interfaces, we have to make decisions on what to use, when.
When building web interfaces, we have to make decisions on what to use, when.
•When do I use jQuery?
•When do I use CSS Only?
•When do I use a plugin?
•How do I choose a plugin?
Does this menu use jQuery?
Actually, it is pure CSS.
Actually, it is pure CSS.
li:hover ul { display: block; }ul ul { display: none; }
Not everything needs jQuery.
Think of CSS, first.
In fact, think of HTML first.
How do you build this?
Start with the HTML markup.
HTML markup
HTML markup
<ul> list of rental properties<table> of data<ul> list of images<div>s of content
Many of the difficult problems I face in user interface development are CSS related.
Many of the difficult problems I face in user interface development are CSS related.
Learn CSS as well as you can.
Places to Use CSS
Title and address needs to expand.
Places to Use CSS
Title and address needs to expand.
Places to Use CSS
Title and address needs to expand.
Opacity indicates selected.
Places to Use CSS
Title and address needs to expand.
Overlay with Shadow.
Opacity indicates selected.
Places to Use CSS
CSS repeating background
#mid-title { background:url(...) repeat-y; }
.opacity-75 {opacity:0.75; -moz-opacity:0.75; filter:alpha(opacity=75);
}
Pure CSS Opacity
CSS repeating background
#mid-title { background:url(...) repeat-y; }
.opacity-75 {opacity:0.75; -moz-opacity:0.75; filter:alpha(opacity=75);
}
Pure CSS Opacity
Shadows, 24 bit pngs, ddpngfix for IE6
CSS repeating background
http://www.dillerdesign.com/experiment/DD_belatedPNG/
#mid-title { background:url(...) repeat-y; }
Does this user interface need jQuery plugins?
Does this user interface need jQuery plugins?
No.
Does this user interface need jQuery plugins?
No.
Everything we need here is built into jQuery Core, except for Google Maps.
JavaScript Pattern
1) Get content via Ajax.
JavaScript Pattern
1) Get content via Ajax.
2) Insert into div
JavaScript Pattern
1) Get content via Ajax.
2) Insert into div
3) Attach gallerytabs and map.
JavaScript Pattern
Getting content via Ajax.
$.get(url, function(response){
Getting content via Ajax.
$.get(url, function(response){ $("#property-view").replaceWith(response);
Getting content via Ajax.
$.get(url, function(response){ $("#property-view").replaceWith(response); $("#overlay").fadeIn();
Getting content via Ajax.
$.get(url, function(response){ $("#property-view").replaceWith(response); $("#overlay").fadeIn();});
jQuery live() method attaches events that to a selector even after the document is modified.
Switching images.
$(".thumbs li").live("click",function(){
Switching images.
$(".thumbs li").live("click",function(){var gallery = $(this).parents("div.gallery");
Switching images.
$(".thumbs li").live("click",function(){var gallery = $(this).parents("div.gallery");var currentImg = gallery.find(".main-image img");
Switching images.
$(".thumbs li").live("click",function(){var gallery = $(this).parents("div.gallery");var currentImg = gallery.find(".main-image img");$("<img />").attr('src', ...).hide()
Switching images.
$(".thumbs li").live("click",function(){var gallery = $(this).parents("div.gallery");var currentImg = gallery.find(".main-image img");$("<img />").attr('src', ...).hide()
.appendTo(imageHolder).fadeIn();
Switching images.
$(".thumbs li").live("click",function(){var gallery = $(this).parents("div.gallery");var currentImg = gallery.find(".main-image img");$("<img />").attr('src', ...).hide()
.appendTo(imageHolder).fadeIn();currentImage.fadeOut(function(){
Switching images.
$(".thumbs li").live("click",function(){var gallery = $(this).parents("div.gallery");var currentImg = gallery.find(".main-image img");$("<img />").attr('src', ...).hide()
.appendTo(imageHolder).fadeIn();currentImage.fadeOut(function(){ $(this).remove();});
});
Interactive map function renderMap(el, lat, lng) { if (GBrowserIsCompatible()) {
var map = new GMap2(el); map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(lat, lng), 13); var point = new GLatLng(lat, lng);
var baseIcon = new GIcon(); baseIcon.image = base+"/img/icons/map-pin.png"; baseIcon.shadow = base+"/img/icons/map-pin-shadow.png"; baseIcon.iconSize = new GSize(41, 34); baseIcon.shadowSize = new GSize(41, 34); baseIcon.iconAnchor = new GPoint(15, 32); baseIcon.infoWindowAnchor = new GPoint(9, 2); map.addOverlay(new GMarker(point, baseIcon)); }}
Interactive map function renderMap(el, lat, lng) { if (GBrowserIsCompatible()) {
var map = new GMap2(el); map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(lat, lng), 13); var point = new GLatLng(lat, lng);
var baseIcon = new GIcon(); baseIcon.image = base+"/img/icons/map-pin.png"; baseIcon.shadow = base+"/img/icons/map-pin-shadow.png"; baseIcon.iconSize = new GSize(41, 34); baseIcon.shadowSize = new GSize(41, 34); baseIcon.iconAnchor = new GPoint(15, 32); baseIcon.infoWindowAnchor = new GPoint(9, 2); map.addOverlay(new GMarker(point, baseIcon)); }}
$("#unit-types").live('click', function(){$(this).addClass('active');$("#map-description").removeClass('active')
.next().hide();$(this).next().fadeIn();
});
and tabs.
jQuery core and CSS are great for adding spices to websites, but what about more complex administration panels?
jQuery UI woo!!
jQuery UI woo!!
ANDjQuery UI CSS framework
What you see here was done with jQuery UI’s CSS Framework.
Create Your Theme with ThemeRoller
Choose your UI components and download.
jQuery UI Classes
.ui-state-active
jQuery UI Classes
.ui-state-active
.ui-state-default
jQuery UI Classes
.ui-widget-header
.ui-state-active
.ui-state-default
jQuery UI Classes
.ui-widget-content
.ui-widget-header
.ui-state-active
.ui-state-default
jQuery UI Classes
jQuery UI Class Quick Tip
Add hover by grabing buttons with .ui-state-default and attach hover class.
.ui-state-default
jQuery UI Class Quick Tip
Add hover by grabing buttons with .ui-state-default and attach hover class.
.ui-state-hover
.ui-state-default
jQuery UI Class Quick Tip
Add hover by grabing buttons with .ui-state-default and attach hover class.
.ui-state-hover
.ui-state-default
jQuery UI Class Quick Tip
Add hover by grabing buttons with .ui-state-default and attach hover class.
.ui-state-hover
$(“.ui-state-default”).hover(function(){ $(this).addClass(“ui-state-hover”); }),function(){ $(this).removeClass(“ui-state-hover”); })
);
.ui-state-default
jQuery UI Class Quick Tip
Add hover by grabing buttons with .ui-state-default and attach hover class.
http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
More info:
.ui-state-hover
$(“.ui-state-default”).hover(function(){ $(this).addClass(“ui-state-hover”); }),function(){ $(this).removeClass(“ui-state-hover”); })
);
Simple add rounded corners.
.ui-corner-all
Simple add rounded corners.
jQuery UI in Practice
UI Datepicker
UI Datepicker
UI Sortable
UI Tabs
UI Datepicker
UI Sortable
UI Tabs
UI Dialog
UI Datepicker
UI Sortable
What about Plugins?
JS Treehttp://www.jstree.com/
WYM Editorhttp://www.wymeditor.org/
Other useful plugins..
jQGridDemo: http://trirand.com/jqgrid/jqgrid.htmlDownload: http://www.trirand.com/blog/?page_id=6
Works with ThemeRoller too!
jGrowl (popup notifications)http://stanlemon.net/projects/jgrowl.html
Flot (charts)http://people.iola.dk/olau/flot/examples/graph-types.html
Input Maskshttp://digitalbush.com/projects/masked-input-plugin/
Auto Completehttp://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
jQuery Tooltiphttp://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
Plugin Checklist
Plugin Checklist
•API is like jQuery core
Plugin Checklist
•API is like jQuery core•Buzz / mentions in blogs
Plugin Checklist
•API is like jQuery core•Buzz / mentions in blogs•Documentation
Plugin Checklist
•API is like jQuery core•Buzz / mentions in blogs•Documentation•CSS makes sense to you
Plugin Checklist
•API is like jQuery core•Buzz / mentions in blogs•Documentation•CSS makes sense to you•Author is committed to support
Plugin Checklist
•API is like jQuery core•Buzz / mentions in blogs•Documentation•CSS makes sense to you•Author is committed to support•or.. Jörn made it http://bassistance.de/
Identify Good Plugin API Design
Identify Good Plugin API Design
Properties (options)$(...).plugin({ option1: value, option2: value });
Identify Good Plugin API Design
Properties (options)
Callbacks (events)
$(...).plugin({ option1: value, option2: value });
$(...).plugin({ onSomeAction: function(){
// callback action})
});
Identify Good Plugin API Design
Properties (options)
Callbacks (events)
Methods
$(...).plugin({ option1: value, option2: value });
$(...).plugin({ onSomeAction: function(){
// callback action})
});
$(...).plugin(“destroy”);
Identifying Good Plugin Support
Identifying Good Plugin Support
•Google Groups, mailing lists
Identifying Good Plugin Support
•Google Groups, mailing lists
•Comments are ok when plugin is new
Identifying Good Plugin Support
•Google Groups, mailing lists
•Comments are ok when plugin is new
•Does author modify plugin based on feedback?
Identifying Good Plugin Support
•Google Groups, mailing lists
•Comments are ok when plugin is new
•Does author modify plugin based on feedback?
•Code repository, when was last commit?
Identifying Good Plugin Community
Identifying Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc
Identifying Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc
•Does the author make update announcements?
Identifying Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc
•Does the author make update announcements?
•Depreciated features well-documented.
Identifying Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc
•Does the author make update announcements?
•Depreciated features well-documented.
Identify that the author is communicating.
Questions?
Marc Grabanski: http://marcgrabanski.com
Twitter: http://twitter.com/1MarcEmail: [email protected]
User interface and web application development. Examples: http://mjgin.com/work.html
![AngularJS Essentials - accorsi.netaccorsi.net/docs/AngularJS Essentials (Bravas[Packt]).pdf · AngularJS Essentials Design and construct reusable, maintainable, and modular web applications](https://img.pdfslide.net/doc/110x75/5e030726d9e2ea2f20416bcc/angularjs-essentials-essentials-bravaspacktpdf-angularjs-essentials-design.jpg)
