study/uTools-Manuals
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-Manuals.git synced 2025-06-08 15:04:05 +08:00
Code Issues Packages Projects Releases Wiki Activity
uTools-Manuals/docs/jQuery/jQuery.cssHooks.html
fofolee 38dcd51d8a v0.0.2
2019-04-21 11:50:48 +08:00

276 lines
25 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.cssHooks</h1>
<div class="entry-meta">
所属分类：<span class="category"><a href="/category/css/">CSS</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.cssHooks/" target="_blank">jQuery.cssHooks</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry property" id="jQuery-cssHooks1"><h2 class="section-title">
<span>jQuery.cssHooks</span><span class="returns">返回: <a href="/Types/#Object">Object</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性。
</p>
<ul class="signatures"><li class="signature"><h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4.3/">1.4.3</a></span>jQuery.cssHooks</h4></li></ul>
<div class="longdesc" id="entry-longdesc">
<p><code>$.cssHooks</code> 对象提供了一种方法通过定义函数来获取和设置特定的CSS值的方法。
 它也可以被用来创建新的cssHooks以标准化CSS3功能，如框阴影和渐变。</p>
<p>例如，某些版本基于Webkit的浏览器需要<code>-webkit-border-radius</code>属性来设置元素的<code>border-radius</code>，而早期的Firefox版本使用<code>-moz-border-radius</code>属性。一个CSS hook 可以标准化这些供应商前缀的属性，让<code>.css()</code> 接受一个单一的，标准的属性的名称（<code>border-radius</code>，或用DOM属性的语法，<code>borderRadius</code>）。</p>
<p>除了提供了对特定样式的处理可以采用更加细致的控制外，
 <code>$.cssHooks</code>也扩展了<code>.animate()</code> 方法上可用的属性。</p>
<p>定义一个新的css hook十分简单。下面的模板可以方便您创建自己的 cssHook：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>(<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// first, check to see if cssHooks are supported</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( !$.cssHooks ) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// if not, output an error message</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">throw</span>(<span class="string">"jQuery 1.4.3 or above is required for this plugin to work"</span>);</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span>;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Wrap in a document ready call, because jQuery writes</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// cssHooks at this time and will blow away your functions</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// if they exist.</span></code></div></div><div class="container"><div class="line"><code> $(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> $.cssHooks[<span class="string">"someCSSProp"</span>] = {</code></div></div><div class="container"><div class="line"><code> get: <span class="keyword">function</span>( elem, computed, extra ) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// handle getting the CSS property</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> set: <span class="keyword">function</span>( elem, value ) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// handle setting the CSS value</span></code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> };</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code>})(jQuery);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="feature-testing">Feature Testing（功能测试）</h4>
<p>
在使供应商特定的CSS属性标准化前，首先要确定浏览器是否支持标准的属性 或 带浏览器供应商前缀的变种。例如，检查支持<code>border-radius</code> 属性，还要检查该属性的任何变种写法是否是临时元素的 <code>style</code> 对象中的成员。</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>(<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code> <span class="function"><span class="keyword">function</span> <span class="title">styleSupport</span><span class="params">( prop )</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> vendorProp, supportedProp,</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// capitalize first character of the prop to test vendor prefix</span></code></div></div><div class="container"><div class="line"><code> capProp = prop.charAt(<span class="number">0</span>).toUpperCase() + prop.slice(<span class="number">1</span>),</code></div></div><div class="container"><div class="line"><code> prefixes = [ <span class="string">"Moz"</span>, <span class="string">"Webkit"</span>, <span class="string">"O"</span>, <span class="string">"ms"</span> ],</code></div></div><div class="container"><div class="line"><code> div = document.createElement( <span class="string">"div"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( prop <span class="keyword">in</span> div.style ) {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// browser supports standard CSS property name</span></code></div></div><div class="container"><div class="line"><code> supportedProp = prop;</code></div></div><div class="container"><div class="line"><code> } <span class="keyword">else</span> {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// otherwise test support for vendor-prefixed property names</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">for</span> ( <span class="keyword">var</span> i = <span class="number">0</span>; i &lt; prefixes.length; i++ ) {</code></div></div><div class="container"><div class="line"><code> vendorProp = prefixes[i] + capProp;</code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( vendorProp <span class="keyword">in</span> div.style ) {</code></div></div><div class="container"><div class="line"><code> supportedProp = vendorProp;</code></div></div><div class="container"><div class="line"><code> <span class="keyword">break</span>;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// avoid memory leak in IE</span></code></div></div><div class="container"><div class="line"><code> div = <span class="literal">null</span>;</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// add property to $.support so it can be accessed elsewhere</span></code></div></div><div class="container"><div class="line"><code> $.support[ prop ] = supportedProp;</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> supportedProp;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// call the function, e.g. testing for "border-radius" support:</span></code></div></div><div class="container"><div class="line"><code> styleSupport( <span class="string">"borderRadius"</span> );</code></div></div><div class="container"><div class="line"><code>})(jQuery);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="defining-complete-csshook">Defining a complete css hook（定义一个完整的css hook）</h4>
<p>要定义一个完整的cssHook，首先我们需要测试您当前使用的 jQuery 版本是否支持 cssHooks 方法，此外，还要结合上面提到的例子：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
<div class="line n40">40</div>
<div class="line n41">41</div>
<div class="line n42">42</div>
<div class="line n43">43</div>
<div class="line n44">44</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>(<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( !$.cssHooks ) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">throw</span>(<span class="string">"jQuery 1.4.3+ is needed for this plugin to work"</span>);</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span>;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="function"><span class="keyword">function</span> <span class="title">styleSupport</span><span class="params">( prop )</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> vendorProp, supportedProp,</code></div></div><div class="container"><div class="line"><code> capProp = prop.charAt(<span class="number">0</span>).toUpperCase() + prop.slice(<span class="number">1</span>),</code></div></div><div class="container"><div class="line"><code> prefixes = [ <span class="string">"Moz"</span>, <span class="string">"Webkit"</span>, <span class="string">"O"</span>, <span class="string">"ms"</span> ],</code></div></div><div class="container"><div class="line"><code> div = document.createElement( <span class="string">"div"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( prop <span class="keyword">in</span> div.style ) {</code></div></div><div class="container"><div class="line"><code> supportedProp = prop;</code></div></div><div class="container"><div class="line"><code> } <span class="keyword">else</span> {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">for</span> ( <span class="keyword">var</span> i = <span class="number">0</span>; i &lt; prefixes.length; i++ ) {</code></div></div><div class="container"><div class="line"><code> vendorProp = prefixes[i] + capProp;</code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( vendorProp <span class="keyword">in</span> div.style ) {</code></div></div><div class="container"><div class="line"><code> supportedProp = vendorProp;</code></div></div><div class="container"><div class="line"><code> <span class="keyword">break</span>;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> div = <span class="literal">null</span>;</code></div></div><div class="container"><div class="line"><code> $.support[ prop ] = supportedProp</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> supportedProp;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> borderRadius = styleSupport( <span class="string">"borderRadius"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Set cssHooks only for browsers that</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// support a vendor-prefixed border radius</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( borderRadius &amp;&amp; borderRadius !== <span class="string">"borderRadius"</span> ) {</code></div></div><div class="container"><div class="line"><code> $.cssHooks.borderRadius = {</code></div></div><div class="container"><div class="line"><code> get: <span class="keyword">function</span>( elem, computed, extra ) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> $.css( elem, borderRadius );</code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> set: <span class="keyword">function</span>( elem, value) {</code></div></div><div class="container"><div class="line"><code> elem.style[ borderRadius ] = value;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> };</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>})(jQuery);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
然后，您可以在支持的浏览器中使用DOM（驼峰）样式或CSS（连字符号）的风格设置边框半径：
</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"#element"</span>).css(<span class="string">"borderRadius"</span>, <span class="string">"10px"</span>);</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#another"</span>).css(<span class="string">"border-radius"</span>, <span class="string">"20px"</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>如果浏览器不支持任何形式的CSS属性写法，并且也不支持任何前缀写法，那么该样式是不会应用到元素上的。但是，如果浏览器支持某种特殊的写法，那么可以在 cssHooks 中添加对该特殊用法的支持。
</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code> (<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// feature test for support of a CSS property</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// and a proprietary alternative</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// ...</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( $.support.someCSSProp &amp;&amp; $.support.someCSSProp !== <span class="string">"someCSSProp"</span> ) {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Set cssHooks for browsers that</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// support only a vendor-prefixed someCSSProp</span></code></div></div><div class="container"><div class="line"><code> $.cssHooks.someCSSProp = {</code></div></div><div class="container"><div class="line"><code> get: <span class="keyword">function</span>( elem, computed, extra ) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> $.css( elem, $.support.someCSSProp );</code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> set: <span class="keyword">function</span>( elem, value) {</code></div></div><div class="container"><div class="line"><code> elem.style[ $.support.someCSSProp ] = value;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> };</code></div></div><div class="container"><div class="line"><code> } <span class="keyword">else</span> <span class="keyword">if</span> ( supportsProprietaryAlternative ) {</code></div></div><div class="container"><div class="line"><code> $.cssHooks.someCSSProp = {</code></div></div><div class="container"><div class="line"><code> get: <span class="keyword">function</span>( elem, computed, extra ) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Handle crazy conversion from the proprietary alternative</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> set: <span class="keyword">function</span>( elem, value ) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Handle crazy conversion to the proprietary alternative</span></code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>})(jQuery);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="special-units">Special units（特殊单位）</h4>
<p>
默认情况下，传递给<code>.css()</code> 方法的值，jQuery添加一个“px”单位。可以通过<code>jQuery.cssNumber</code>对象中添加属性的方法，来防止这种行为的发生</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.cssNumber[<span class="string">"someCSSProp"</span>] = <span class="literal">true</span>;</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="animating">Animating with cssHooks（cssHooks动画）</h4>
<p>通过向 <code>jQuery.fx.step</code> 对象中添加属性，cssHook 同样可以向 jQuery 的动画机制中添加钩子：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.fx.step[<span class="string">"someCSSProp"</span>] = <span class="keyword">function</span>(fx){</code></div></div><div class="container"><div class="line"><code> $.cssHooks[<span class="string">"someCSSProp"</span>].set( fx.elem, fx.now + fx.unit );</code></div></div><div class="container"><div class="line"><code>};</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>注意，上述这种用法应用于简单的数值属性的动画是最好的。根据不同的 CSS 属性，返回值的类型以及动画的复杂性，可能需要在 cssHooks 写更多的代码。</p>
</div>
</div></article> </div>
</article>
Reference in New Issue View Git Blame Copy Permalink