diff options
| author | Florian Dold <florian.dold@gmail.com> | 2016-10-10 03:47:49 +0200 |
|---|---|---|
| committer | Florian Dold <florian.dold@gmail.com> | 2016-10-10 03:47:49 +0200 |
| commit | d5194154335d6cb30edca9b648083069faf9778c (patch) | |
| tree | bcbefa300067dfd79fc5c770862005129406024d /jquery-uri-plugin.html | |
| download | wallet-core-d5194154335d6cb30edca9b648083069faf9778c.tar.xz | |
Squashed 'thirdparty/URI.js/' content from commit b77c167
git-subtree-dir: thirdparty/URI.js
git-subtree-split: b77c167bc201575956ad409333ff032e504b8044
Diffstat (limited to 'jquery-uri-plugin.html')
| -rw-r--r-- | jquery-uri-plugin.html | 203 |
1 files changed, 203 insertions, 0 deletions
diff --git a/jquery-uri-plugin.html b/jquery-uri-plugin.html new file mode 100644 index 000000000..f7d9bac6d --- /dev/null +++ b/jquery-uri-plugin.html @@ -0,0 +1,203 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>URI.js - jQuery URI Plugin</title> + <meta name="description" content="URI.js is a Javascript library for working with URLs." /> + + <script src="jquery-1.9.1.min.js" type="text/javascript"></script> + <script src="prettify/prettify.js" type="text/javascript"></script> + <script src="screen.js" type="text/javascript"></script> + <link href="screen.css" rel="stylesheet" type="text/css" /> + <link href="prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" /> + <script src="src/URI.min.js" type="text/javascript"></script> + <script src="src/jquery.URI.js" type="text/javascript"></script> + <script type="text/javascript"> + + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-8922143-3']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + + </script> +</head> +<body> + <a id="github-forkme" href="https://github.com/medialize/URI.js"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a> + + <div id="container"> + <h1><a href="https://github.com/medialize/URI.js">URI.js</a></h1> + + <ul class="menu"> + <li><a href="/URI.js/">Intro</a></li> + <li><a href="about-uris.html">Understanding URIs</a></li> + <li><a href="docs.html">API-Documentation</a></li> + <li class="active"><a href="jquery-uri-plugin.html">jQuery Plugin</a></li> + <li><a href="uri-template.html">URI Template</a></li> + <li><a href="build.html">Build</a></li> + <li><a href="http://rodneyrehm.de/en/">Author</a></li> + </ul> + + <h2>URI.js jQuery Plugin</h2> + <p>As of version 1.6.0 URI.js offers a simple jQuery integration. For the plugin to work, you need to regularly load <code>URI.js</code>, as well as <code>jquery.URI.js</code>.</p> + <p>URI.js does not depend on jQuery unless you want to use the URI.js jQuery Plugin</p> + + <h2>Accessing the URI Instance</h2> + <pre class="prettyprint lang-js"> +var $a = $('<a href="http://google.com/hello.html">Demo</a>'); +var uri = $a.uri(); + +// URI instance and DOMElement are always in sync +uri.domain() == 'google.com'; +uri.domain('example.org'); +$a.attr('href') == 'http://example.org/hello.html'; + +// access to <strong>href</strong>, <strong>src</strong> and <strong>action</strong> +// transparently update the URI instance +$a.attr('href', '/other.file'); +uri.href() == '/other.file'; + +// $.fn.uri() passes values to DOM and URI +$a.uri('/hello/world.html'); +$a.attr('href') == '/hello/world.html'; +uri.href() == '/hello/world.html';</pre> + + <h2>Accessing URI components</h2> + <pre class="prettyprint lang-js">var $a = $('<a href="http://www.google.com/hello.html">Demo</a>'); + +// read +$a.attr('uri:domain') == 'google.com'; + +// write +$a.attr('uri:domain', 'example.org'); +$a.attr('href') == 'http://www.example.org/hello.html';</pre> + + <p>All URI-component accessors (except <a href="docs.html#accessors-segment">segment</a>) can be used: + <a href="docs.html#accessors-origin">origin</a>, + <a href="docs.html#accessors-authority">authority</a>, + <a href="docs.html#accessors-directory">directory</a>, + <a href="docs.html#accessors-domain">domain</a>, + <a href="docs.html#accessors-filename">filename</a>, + <a href="docs.html#accessors-hash">fragment</a>, + <a href="docs.html#accessors-hash">hash</a>, + <a href="docs.html#accessors-host">host</a>, + <a href="docs.html#accessors-hostname">hostname</a>, + <a href="docs.html#accessors-href">href</a>, + <a href="docs.html#accessors-password">password</a>, + <a href="docs.html#accessors-path">path</a>, + <a href="docs.html#accessors-pathname">pathname</a>, + <a href="docs.html#accessors-port">port</a>, + <a href="docs.html#accessors-protocol">protocol</a>, + <a href="docs.html#accessors-search">query</a>, + <a href="docs.html#accessors-protocol">scheme</a>, + <a href="docs.html#accessors-resource">resource</a>, + <a href="docs.html#accessors-search">search</a>, + <a href="docs.html#accessors-subdomain">subdomain</a>, + <a href="docs.html#accessors-suffix">suffix</a>, + <a href="docs.html#accessors-tld">tld</a>, + <a href="docs.html#accessors-username">username</a>. + </p> + + <h2>Selectors</h2> + <p>You may find yourself wanting to select all links to a certain file-type or a specific domain. <code>:uri()</code> is a pseudo-class filter that will help you with that:</p> + <pre class="prettyprint lang-html"> +<div class="first"> + <a href="/my.pdf?with=query">PDF</a> + <a href="http://google.com/">Google1</a> +</div> +<div class="second"> + <a href="http://www.google.com/">Google2</a> + <a href="https://github.com/some/directory/help.html">Github</a> +</div> +</pre> + <pre class="prettyprint lang-js">// finding links to a given file-type +$('a:uri(suffix = pdf)'); +// -> finds PDF + +// selecting links to a directory (or child thereof) +$('a:uri(directory *= /directory/)'); +// -> finds Github + +// selecting links to google.com +$('a:uri(domain = google.com)'); +// -> finds Google1, Google2 + +// selecting all relative links +$('a:uri(is: relative)'); +// -> finds PDF + +// selecting links regardless of their representation +$('a:uri(equals: http://github.com/some/other/../directory/help.html)'); +// -> finds Github + +// finding elements containing a link to github +$('div').has('a:uri(domain = github)') +// -> finds div.second + +// testing if the protocol matches +$('a').eq(1).is(':uri(protocol = http)'); +// -> is true + +// event delegation +$(document).on('click', 'a:uri(scheme=javscript)', function(e) { + if (!confirm("do you really want to execute this script?\n\n" + this.href)) { + e.preventDefault(); + e.stopImmediatePropagation(); + } +});</pre> + + <h3>The :uri() pseudo selector</h3> + <p><code>:uri()</code> accepts the following three argument patterns:</p> + + <ul> + <li><code>:uri(<em>accessor</em> operator <strong>string</strong>)</code> to compare a single URI-component</li> + <li><code>:uri(is: <strong>string</strong>)</code> to compare against <a href="docs.html#is">.is()</a></li> + <li><code>:uri(equals: <strong>string</strong>)</code> to compare URLs using <a href="docs.html#equals">.equals()</a></li> + </ul> + + <p>Note: It is a good idea to prepend the element(s) you're looking for. <code>a:uri(is: relative)</code> is much faster than <code>:uri(is: relative)</code>.</p> + <p>Note: <code>")"</code> may not be used in your comparison-<code>string</code>, as jQuery (Sizzle, actually) can't handle that properly.</p> + + <h3>Comparison Accessors</h3> + <p>All URI-component accessors (except <a href="docs.html#accessors-segment">segment</a>) can be used: + <a href="docs.html#accessors-authority">authority</a>, + <a href="docs.html#accessors-directory">directory</a>, + <a href="docs.html#accessors-domain">domain</a>, + <a href="docs.html#accessors-filename">filename</a>, + <a href="docs.html#accessors-hash">fragment</a>, + <a href="docs.html#accessors-hash">hash</a>, + <a href="docs.html#accessors-host">host</a>, + <a href="docs.html#accessors-hostname">hostname</a>, + <a href="docs.html#accessors-href">href</a>, + <a href="docs.html#accessors-password">password</a>, + <a href="docs.html#accessors-path">path</a>, + <a href="docs.html#accessors-pathname">pathname</a>, + <a href="docs.html#accessors-port">port</a>, + <a href="docs.html#accessors-protocol">protocol</a>, + <a href="docs.html#accessors-search">query</a>, + <a href="docs.html#accessors-protocol">scheme</a>, + <a href="docs.html#accessors-resource">resource</a>, + <a href="docs.html#accessors-search">search</a>, + <a href="docs.html#accessors-subdomain">subdomain</a>, + <a href="docs.html#accessors-suffix">suffix</a>, + <a href="docs.html#accessors-tld">tld</a>, + <a href="docs.html#accessors-username">username</a>. + </p> + + <h3>Comparison Operators</h3> + <p>Comparison operators are derived from CSS attribute match operators:</p> + <dl> + <dt>=</dt><dd>Exact match of <code>accessor</code> and <code>string</code></dd> + <dt>^=</dt><dd><code>accessor</code> begins with <code>string</code> (case-insensitive)</dd> + <dt>$=</dt><dd><code>accessor</code> ends with <code>string</code> (case-insensitive)</dd> + <dt>*=</dt><dd><code>accessor</code> contains <code>string</code> (case-insensitive)</dd> + </dl> + + </div> +</body> +</html>
\ No newline at end of file |