Update
This commit is contained in:
parent
dd23a03506
commit
f7c9650a56
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
title: jQuery mobile events
|
||||
category: JavaScript libraries
|
||||
---
|
||||
|
||||
### Mobile events
|
||||
|
||||
For support for `tap`, `swipe`, `swipeLeft`, et al, use
|
||||
[jquery.mobile.event.js][m]. Be sure to set `$.support.touch` first.
|
||||
|
||||
To get `$.support.touch` (and family), use this from
|
||||
[jquery.mobile.support.js][s]:
|
||||
|
||||
$.extend($.support, {
|
||||
orientation: "orientation" in window && "onorientationchange" in window,
|
||||
touch: "ontouchend" in document,
|
||||
cssTransitions: "WebKitTransitionEvent" in window,
|
||||
pushState: "pushState" in history && "replaceState" in history,
|
||||
mediaquery: $.mobile.media( "only all" ),
|
||||
cssPseudoElement: !!propExists( "content" ),
|
||||
touchOverflow: !!propExists( "overflowScrolling" ),
|
||||
boxShadow: !!propExists( "boxShadow" ) && !bb,
|
||||
scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini,
|
||||
dynamicBaseTag: baseTagTest()
|
||||
});
|
||||
|
||||
[m]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.event.js
|
||||
[s]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.support.js
|
|
@ -2,6 +2,7 @@
|
|||
| where: "category", include.page.category
|
||||
| where_exp: "page", "page.url != include.page.url"
|
||||
| where_exp: "page", "page.deprecated != true"
|
||||
| where_exp: "page", "page.redirect_to == null"
|
||||
| sort: "weight", "last"
|
||||
%}
|
||||
{% assign top_pages = site.pages
|
||||
|
|
82
jquery.md
82
jquery.md
|
@ -1,63 +1,55 @@
|
|||
---
|
||||
title: jQuery
|
||||
category: JavaScript libraries
|
||||
layout: 2017/sheet
|
||||
tags: [WIP]
|
||||
weight: -1
|
||||
---
|
||||
|
||||
### Traversing
|
||||
|
||||
.children()
|
||||
.closest('div')
|
||||
.filter(':selected')
|
||||
.find('div')
|
||||
.has('div')
|
||||
```js
|
||||
$('.box')
|
||||
.children()
|
||||
.closest('div')
|
||||
.filter(':selected')
|
||||
.find('div')
|
||||
.has('div')
|
||||
.first()
|
||||
.next('div')
|
||||
.nextUntil('div')
|
||||
```
|
||||
|
||||
.first()
|
||||
## Advanced features
|
||||
|
||||
### Extending selectors
|
||||
|
||||
// $(":inline")
|
||||
$.expr[':'].inline = function(a) {
|
||||
return $(a).css('display') === 'inline';
|
||||
};
|
||||
```js
|
||||
$.expr[':'].inline = function (el) {
|
||||
return $(el).css('display') === 'inline'
|
||||
}
|
||||
```
|
||||
|
||||
Enables `$(':inline')`
|
||||
|
||||
### Extend CSS properties
|
||||
|
||||
$.cssHooks.someCSSProp = {
|
||||
get: function(elem, computed, extra) {
|
||||
},
|
||||
set: function(elem, value) {
|
||||
}
|
||||
};
|
||||
```js
|
||||
$.cssHooks.someCSSProp = {
|
||||
get: function (elem, computed, extra) {
|
||||
},
|
||||
set: function (elem, value) {
|
||||
}
|
||||
}
|
||||
|
||||
// Disable "px"
|
||||
$.cssNumber["someCSSProp"] = true;
|
||||
// Disable "px"
|
||||
$.cssNumber["someCSSProp"] = true
|
||||
```
|
||||
|
||||
### fn.animate() hooks
|
||||
|
||||
$.fn.step.someWhatever = function(fx) {
|
||||
// ...
|
||||
}
|
||||
|
||||
### Mobile events
|
||||
|
||||
For support for `tap`, `swipe`, `swipeLeft`, et al, use
|
||||
[jquery.mobile.event.js][m]. Be sure to set `$.support.touch` first.
|
||||
|
||||
To get `$.support.touch` (and family), use this from
|
||||
[jquery.mobile.support.js][s]:
|
||||
|
||||
$.extend($.support, {
|
||||
orientation: "orientation" in window && "onorientationchange" in window,
|
||||
touch: "ontouchend" in document,
|
||||
cssTransitions: "WebKitTransitionEvent" in window,
|
||||
pushState: "pushState" in history && "replaceState" in history,
|
||||
mediaquery: $.mobile.media( "only all" ),
|
||||
cssPseudoElement: !!propExists( "content" ),
|
||||
touchOverflow: !!propExists( "overflowScrolling" ),
|
||||
boxShadow: !!propExists( "boxShadow" ) && !bb,
|
||||
scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini,
|
||||
dynamicBaseTag: baseTagTest()
|
||||
});
|
||||
|
||||
[m]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.event.js
|
||||
[s]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.support.js
|
||||
```js
|
||||
$.fn.step.someWhatever = function(fx) {
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
|
|
@ -1,27 +1,33 @@
|
|||
---
|
||||
title: applicationCache
|
||||
category: JavaScript
|
||||
layout: 2017/sheet
|
||||
---
|
||||
|
||||
## Reference
|
||||
{: .-one-column}
|
||||
|
||||
### applicationCache checking
|
||||
|
||||
if (window.applicationCache){
|
||||
// "Naturally" reload when an update is available
|
||||
var reload = false;
|
||||
window.applicationCache.addEventListener('updateready', function(){
|
||||
if (window.applicationCache.status == window.applicationCache.UPDATEREADY){
|
||||
window.applicationCache.swapCache();
|
||||
reload = true;
|
||||
}
|
||||
}, false);
|
||||
```js
|
||||
if (window.applicationCache) {
|
||||
// "Naturally" reload when an update is available
|
||||
var reload = false
|
||||
|
||||
setInterval(function(){
|
||||
try { // There's nothing to update for first-time load, browser freaks out :/
|
||||
window.applicationCache.update();
|
||||
} catch (e){}
|
||||
}, 1000*60*60); // Every hour
|
||||
window.applicationCache.addEventListener('updateready', () => {
|
||||
if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
|
||||
window.applicationCache.swapCache()
|
||||
reload = true
|
||||
}
|
||||
}, false)
|
||||
|
||||
### Reference
|
||||
setInterval(() => {
|
||||
try {
|
||||
// There's nothing to update for first-time load, browser freaks out :/
|
||||
window.applicationCache.update()
|
||||
} catch (e) { }
|
||||
}, 1000 * 60 * 60) // Every hour
|
||||
}
|
||||
```
|
||||
|
||||
* https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache
|
||||
This is a deprecated HTML feature. See: [Using the application cache](https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache) _(developer.mozilla.org)_
|
||||
|
|
24
js-fetch.md
24
js-fetch.md
|
@ -1,13 +1,22 @@
|
|||
---
|
||||
title: fetch()
|
||||
category: JavaScript
|
||||
layout: 2017/sheet
|
||||
weight: -3
|
||||
---
|
||||
|
||||
### Fetch
|
||||
{: .-prime}
|
||||
|
||||
```js
|
||||
fetch('/data.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
})
|
||||
.catch(err => ...)
|
||||
```
|
||||
{: data-line="4"}
|
||||
|
||||
### Response
|
||||
|
||||
|
@ -21,7 +30,9 @@ fetch('/data.json')
|
|||
res.redirected //=> false
|
||||
res.ok //=> true
|
||||
res.url //=> 'http://site.com/data.json'
|
||||
res.type //=> 'basic' ('cors' 'default' 'error' 'opaque' 'opaqueredirect')
|
||||
res.type //=> 'basic'
|
||||
// ('cors' 'default' 'error'
|
||||
// 'opaque' 'opaqueredirect')
|
||||
|
||||
res.headers.get('Content-Type')
|
||||
})
|
||||
|
@ -47,8 +58,6 @@ fetch('/data.json', {
|
|||
|
||||
### Catching errors
|
||||
|
||||
Non-2xx responses are still successful requests. Use another function to turn them to errors.
|
||||
|
||||
```js
|
||||
fetch('/data.json')
|
||||
.then(checkStatus)
|
||||
|
@ -66,13 +75,18 @@ function checkStatus (res) {
|
|||
}
|
||||
```
|
||||
|
||||
## Using with node.js
|
||||
Non-2xx responses are still successful requests. Use another function to turn them to errors.
|
||||
|
||||
### Using with node.js
|
||||
|
||||
```js
|
||||
var fetch = require('isomorphic-fetch')
|
||||
const fetch = require('isomorphic-fetch')
|
||||
```
|
||||
|
||||
See: [isomorphic-fetch](https://npmjs.com/package/isomorphic-fetch) _(npmjs.com)_
|
||||
|
||||
## References
|
||||
{: .-one-column}
|
||||
|
||||
- <https://fetch.spec.whatwg.org/>
|
||||
- <https://www.npmjs.com/package/whatwg-fetch>
|
||||
|
|
13
js-speech.md
13
js-speech.md
|
@ -1,8 +1,13 @@
|
|||
---
|
||||
title: JavaScript speech synthesis
|
||||
category: Ruby
|
||||
category: JavaScript
|
||||
layout: 2017/sheet
|
||||
weight: -1
|
||||
---
|
||||
|
||||
## SpeechSynthesisUtterance
|
||||
{: .-one-column}
|
||||
|
||||
```js
|
||||
function speak (message) {
|
||||
var msg = new SpeechSynthesisUtterance(message)
|
||||
|
@ -12,6 +17,8 @@ function speak (message) {
|
|||
}
|
||||
```
|
||||
|
||||
## Reference
|
||||
```js
|
||||
speak('Hello, world')
|
||||
```
|
||||
|
||||
* <https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance>
|
||||
See: [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) _(developer.mozilla.org)_
|
||||
|
|
Loading…
Reference in New Issue