<p><code></p> <p><strong>一 导语</strong></p> <p>如果你只是把a元素用来页面跳转、单双击事件等简单页面交互行为,那么你就out了。事实上,借助于<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> A+插件,只需对a元素指定特定的样式类,即可实现打开模式窗口、显示通知面板、以动画方式实现页内跳转、打印页面等各种功能。</p> <p><strong>二 插件相关</strong></p> <p>1.Author: <a>Andrea Vallorani</a></p> <p>2.Source on GitHub: <a href="https://github.com/andreaval/jAplus" rel="nofollow noreferrer" target="_blank"></a><a href="https://github.com/andreaval/jAplus" rel="nofollow noreferrer" target="_blank">https://github.com/andreaval/...</a></p> <p>3.官网url:<a href="http://japlus.simplit.it/" rel="nofollow noreferrer" target="_blank"></a><a href="http://japlus.simplit.it/" rel="nofollow noreferrer" target="_blank">http://japlus.simplit.it/</a></p> <p><strong>三 使用方法</strong></p> <p>1.引用插件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;jquery.min.js&quot;></script><br /> <script src=&quot;jquery.Aplus.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jquery.Aplus.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>2.调用插件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;text/javascript&quot;> $(function(){ $('body').Aplus(); }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> $(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ $(<span class="hljs-string">'body'</span>).Aplus(); }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>3.部分<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>代码样例</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//在浏览器新标签或新窗口中打开链接页面 <a href=&quot;demo.html&quot; class=&quot;blank&quot;>Blank</a> </p> <p>//显示打印窗口<br /> <a href=&quot;#&quot; class=&quot;print&quot;>Print</a></p> <p>//显示通知面板<br /> <a href=&quot;demo.html&quot; class=&quot;notify&quot;>Basic</a></p> <p>//显示模式窗口<br /> <a href=&quot;demo.html&quot; class=&quot;dialog dialog-modal&quot; title=&quot;Modal dialog&quot;>Modal dialog</a></p> <p>//使用动画方式将页面滚动到指定锚点<br /> <a href=&quot;#index&quot; class=&quot;scroll&quot;>Scroll</a></p> <p>//设置页面滚动速度<br /> <a href=&quot;#index&quot; class=&quot;scroll scroll-speed-2000&quot;>Set speed</a></p> <p>//设置页面的目标滚动位置<br /> <a href=&quot;#index&quot; class=&quot;scroll scroll-offsetY-50&quot;>Set offset</a>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-comment">//在浏览器新标签或新窗口中打开链接页面</span> &lt;a href=<span class="hljs-string">"demo.html"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"blank"</span>&gt;<span class="hljs-type">Blank</span>&lt;/a&gt; <span class="hljs-comment">//显示打印窗口</span> &lt;a href=<span class="hljs-string">"#"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"print"</span>&gt;<span class="hljs-type">Print</span>&lt;/a&gt; <span class="hljs-comment">//显示通知面板</span> &lt;a href=<span class="hljs-string">"demo.html"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"notify"</span>&gt;<span class="hljs-type">Basic</span>&lt;/a&gt; <span class="hljs-comment">//显示模式窗口</span> &lt;a href=<span class="hljs-string">"demo.html"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"dialog dialog-modal"</span> title=<span class="hljs-string">"Modal dialog"</span>&gt;<span class="hljs-type">Modal</span> dialog&lt;/a&gt; <span class="hljs-comment">//使用动画方式将页面滚动到指定锚点</span> &lt;a href=<span class="hljs-string">"#index"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"scroll"</span>&gt;<span class="hljs-type">Scroll</span>&lt;/a&gt; <span class="hljs-comment">//设置页面滚动速度</span> &lt;a href=<span class="hljs-string">"#index"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"scroll scroll-speed-2000"</span>&gt;<span class="hljs-type">Set</span> speed&lt;/a&gt; <span class="hljs-comment">//设置页面的目标滚动位置</span> &lt;a href=<span class="hljs-string">"#index"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"scroll scroll-offsetY-50"</span>&gt;<span class="hljs-type">Set</span> offset&lt;/a&gt;</code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/jquery/jquery_40562.html