Web components are still at the edge of technology - only the advanced browser to support the technology - the development and change of the Web component is very rapid. This practice reference books to help you understand the emerging standards of W3C, the church you how to build reusable, custom Web HTML5 components.
In the understanding of core concepts (such as document flow, positioning, Z-index and so on), as well as the realization of positioning, drag, move size
In the exploration of the concept of UI, Dojo, jQuery, UI, Kendo, UI and some other libraries in the abstract model
In depth understanding of W3C standard, its control is transformed into a full-featured Web component
- learn how to use Polymer framework, Google package, package deploy your Web components
Strimpel Jason,Is a software engineer with more than 15 years experience. At present, he worked in WalmartLabs, the main job is to write software to support the development of UI applications. Jason is also active in the open source community, he maintains a framework such as LazoJS.
The first chapter is an overview
What is Web component
Why use Web components
UI I core concept
Second chapter basic knowledge
Importance of DOM abstraction layer
Control API and life cycle
Voltron control class
Dialog CSS and HTML
Third chapter document flow and location
The location of computational elements
Relative to windows
Positioning dialog control
The fourth chapter is to understand and operate Z-index
What exactly is Z-index?
Rendering layer, stacking sequence and Z-index
Default stacking sequence
Override default stacking sequence
How is the stack context created?
Things are getting more and more complicated.
Create object management Z-index
Add Z-index management functions to dialog controls
II construction UI
The fifth chapter: clone node
Using cloneNode method
Dialog box control
The sixth chapter is to create a floating layer
Detect the width of the scroll bar
Consider the scroll bar when calculating the container width
Get element size and coordinates
Monitor size change events and events
Relative window or relative to another element
Relative to another element to locate elements
Add floating layer function to the dialog control
Seventh chapter drag elements
Best practice for mouse events
1 $.mousemove events in the $.mousedown event
2 release $.mousemove binding in $.mouseup event
3 the $.mouseup event response function is bound to the "body".
4 named all events
Create drag and drop
Drag it up
$.mousedown response function
$.mousemove response function
$.mouseup event response function
Destruction can drag and drop examples
Enable dialog controls to drag and drop
The eighth chapter adjusts the element size
Mouse events and best practices
Adjust element size
Write adjust the size of the API
Drag and drop
Bound mouse event
$.mousedown event response function
$.mousemove event response function
$.mouseup event response function
Complete adjustment dimension function
Enable dialog controls to resize
The ninth chapter completes the dialog box control
HTML5 build Web III components
Tenth chapter template
Understanding the importance of the template
Delayed load resource
Delay rendering content
Hidden content from DOM
Create and use templates
Test browser support
Put the template in the tag.
Insert template content into DOM
Use templates to write dialog components
Create and pack dialog template API
Abstract dialog template packaging
The eleventh chapter is DOM Shadow.
What is DOM Shadow?
DOM Shadow basic concepts
Shadow root element
Use templates in DOM Shadow
DOM Shadow style
Add style to the host element
Set shadow Zi Shugen node style in the document
Content tag mapping
Through the selector map content
Node distribution and access points
Shadow access point
Events and DOM Shadow
Use DOM Shadow update dialog template
Dialog box label
Dialog box API
Update dialog show method
Initialization dialog instance
The twelfth chapter is a custom element.
Introduction to custom elements
Registered custom element
Extended custom element
Extended from native elements
Defining attributes and methods
Parsing custom elements
Participate in the life cycle of custom elements
Add style for custom elements
Use templates and DOM Shadow in custom elements
The dialog component is implemented as a custom element
Create dialog custom elements
Achieve dialog box to customize the callback function
Achieve dialog box API
Display dialog box
The thirteenth chapter introduces the document.
Get the introduction of content
Get a document
Understanding the relationship between the introduction and the main document
Two level introduction
Load custom element
Introduce dialog box
IV uses the Polymer test to build, deploy Web components
The fourteenth chapter is Polymer.
Composite template instruction
Features (attribute) and attributes (peoperty): elements of the API
Life cycle method
In the fifteenth chapter, the dialog box is migrated to Polymer.
Why did you want to migrate to Polymer
Use Bower to install dependency
Let's get started.
It's too easy.
JQuery world Polymer
Conclusions about jQuery
The sixteenth chapter tests the Web component.
The seventeenth chapter is packaged and released.
Use Bower publishing components
The eighteenth chapter is the conclusion.
Where to go
Good luck to you