@dvhb/themes
Version:
Opensource dvhb themes
23 lines • 7.42 kB
HTML
<html><head><title></title><link href="main.css" rel="stylesheet"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/atom-one-dark.min.css"/></head><body><div class="b-intro b-content textLg" style="background-image: url('img/bg_intro_phoneHiglight.jpg');"><a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a><div class="section"><h1>jQuery Phone Hightlight</h1><p>Query plugin which helps you replace text phone numbers with <nobr class="textGreen"><a href="tel:..."> </nobr>tag.<br/><br/>It may be useful if you want to add user friendly markup on mobile devices, but want to keep text phone numbers in desktop version.<br/><br/>This plugin don't have library for detecting mobiles devices as a hard dependency. You are free to use your favorite one. <br/>For example <a href="#">mobile-detect.js</a></p></div></div><div class="b-content textLg"><div class="section"><h2>Demo</h2><p class="form-item">Check out demo (open from mobile device or use emulation).</p><div class="row"><div class="col-sm-6"><div class="form-item"><div class="btn btn_block">Download</div></div></div><div class="col-sm-6"><div class="form-item"><div class="btn btn_block">Source on GitHub</div></div></div></div></div></div><div class="b-usage b-content"><div class="section"><h2 class="form-item">Basic usage</h2><div class="b-usage__text">At first, add <span class="textBlue">jquery.phone-highlight.js</span> into your <span class="textPurple"><head></span>.<br/><br/>Then, put following into in you <span class="textBlue">main.js</span>:</div><div class="form-item"><pre><code class="javascript">$('p.containing-phones').phoneHighlight();</code>
</pre></div><div class="b-usage__text">Or with <span class="textBlue">mobile-detect.js</span></div><div class="form-item"><pre><code class="javascript">var md = new MobileDetect(window.navigator.userAgent);
if (md.mobile()) {
$('.phones').phoneHighlight();
}</code>
</pre></div><div class="b-usage__text">Plugin will replace text phones with <span class="textPurple"><a></span> tag.</div><div class="form-item"><pre><code class="html">Lorem ipsum dolor <a href="tel:+73812786644" class="phone">+7 (3812) 78-66-44</a></code>
</pre></div><div class="b-usage__text">NOTE! Do not execute plugin on whole body or other huge/interactive parts of the page! It may break other scripts or cause perfomance issues.</div></div></div><div class="b-demo b-content"><div class="section"><h2>Configuring</h2><p class="textLg">Plugin have 3 options which can be passed into its call:</p><div class="form-item"><pre><code class="javascript">$('.phone').phoneHighlight({
countrycode: '+7',
citycode: '3812',
minLenWithoutCodes: 7
});</code></pre></div><br/><h2>How it works</h2><div class="textLg">It tooks text content of marked nodes and removes all symbols excepting digits and leading plus sign.<br/><br/>Then plugin checks format of obtained result. There are 2 possible cases:<ol><li>Current result already starts with plus sign or its length is greater than <span class="textPurple">minLenWithoutCodes</span> option value. In this case <span class="textPurple">countrycode</span> and <span class="textPurple">citycode</span> won't be added to phone.</li><li>Otherwise phone will be concatinated with <span class="textPurple">countrycode</span> and <span class="textPurple">citycode</span> Note, that default values of <span class="textPurple">countrycode</span> and <span class="textPurple">citycode</span> options is empty strings.</li></ol>You can also override global code options by setting appropriate <span class="textPurple">data</span> attributes:</div><div class="form-item"><pre><code class="html"><span class="phone" data-countrycode="+1" data-citycode="123">999-44-22</span></code></pre></div><br/><h2>Running tests</h2><p class="textLg">At firts, you have to install dependencies by running <span class="textGreen">npm install</span> and <span class="textGreen">bower install</span>. Now execute <span class="textGreen">npm run test</span> command.</p><h2>Change log</h2><div class="form-group form-group_marginSm"><div class="textLg">Version 41.2</div><p class="textGrey">Released 28 November, 2016</p><div class="list"><div class="list__item">Removes the align dialog asking if you want to align layers precisely</div><div class="list__item">When aligning, the bottom-most layer is no longer treated as the key object</div><div class="list__item">Fixes a bug where copying and pasting Symbols with a nested override to a new document would not copy over the nested Symbols</div></div><div class="textLg">Version 41.1</div><p class="textGrey">Released 12 November, 2016</p><div class="list"><div class="list__item">Fixes a bug where using complex documents could cras the map</div></div><div class="textLg">Version 41</div><p class="textGrey">Released 02 November, 2016</p><div class="list"><div class="list__item">If a Page has a grid set, but contains Artboards, we will no longer render the grid for the Page to avoid confusion</div><div class="list__item">Resetting Symbol instances to their original size is now also enabled for multiple selection</div><div class="list__item">Hidden layers are no longer taken into account when using the Center Canvas option in the View menu</div><div class="list__item">Adds a new “Paste with Style” menu item for when you want to paste Rich Text into Sketch</div><div class="list__item">Improves the accuracy of boolean operations</div><div class="list__item">Improves shapes converted to outlines by removing overlapping paths and superfluous points</div><div class="list__item">The alignment actions in the menu, inspector and contextual menu are now consistently labelled</div><div class="list__item">Improves boolean operations by removing obsolete points</div><div class="list__item">Symbol Masters can now be converted back to regular Artboards by using the Detach menu item</div><div class="list__item">The align buttons in the Inspector now show their correct image when aligning vector points in the shape editor</div></div></div><h2>License</h2><div class="textLg"><a href="#">MIT License</a> © <a href="#">dvhb</a></div></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/atom-one-dark.min.css"/><script>hljs.initHighlightingOnLoad();</script><script src="vendor.js"></script><script src="main.js"></script><script>(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'XXX', 'auto');
ga('send', 'pageview');</script></body></html>