{"id":569,"date":"2013-03-28T10:51:52","date_gmt":"2013-03-28T02:51:52","guid":{"rendered":"http:\/\/1.34.111.163\/wordpress\/2013\/03\/28\/%e3%80%90%e6%95%99%e5%ad%b8%e3%80%91%e5%a5%97%e7%94%a8css%e6%a8%a3%e5%bc%8f%e5%be%8c%e7%9a%84input-button%e5%9c%a8ios%e4%b8%8a%e7%9a%84%e9%a1%af%e7%a4%ba%e5%95%8f%e9%a1%8ciphoneipadipod\/"},"modified":"2013-03-28T10:51:52","modified_gmt":"2013-03-28T02:51:52","slug":"%e3%80%90%e6%95%99%e5%ad%b8%e3%80%91%e5%a5%97%e7%94%a8css%e6%a8%a3%e5%bc%8f%e5%be%8c%e7%9a%84input-button%e5%9c%a8ios%e4%b8%8a%e7%9a%84%e9%a1%af%e7%a4%ba%e5%95%8f%e9%a1%8ciphoneipadipod","status":"publish","type":"post","link":"http:\/\/www.evachuang.com.tw\/wordpress\/?p=569","title":{"rendered":"\u3010\u6559\u5b78\u3011\u5957\u7528CSS\u6a23\u5f0f\u5f8c\u7684input button\u5728iOS\u4e0a\u7684\u986f\u793a\u554f\u984c(iPhone\/iPad\/iPod)"},"content":{"rendered":"

\u5728\u5beb\u9019\u7bc7\u4e4b\u524d\uff0c\u4e0d\u5f97\u4e0d\u62b1\u6028\u4e00\u4e0b….<\/p>\n

iOS\u771f\u7684\u5f88\u641e\u525b\u8036~~~\u771f\u7684\u662f\u6703\u8b93\u958b\u767c\u8005\u591a\u4e8b\u7684\u4e00\u7a2e\u4f5c\u696d\u7cfb\u7d71~~~ $\"\"$ <\/p>\n

\u56e0\u70ba\u9019\u500b\u554f\u984c\u662f\u6211\u81ea\u5df1\u9047\u4e0a\u7684…\u9019\u7bc7\u5c31\u7576\u4f5c\u7d66\u81ea\u5df1\u7684\u4e00\u500b\u96a8\u7b46\u8a18\u9304\u56c9~~<\/p>\n

\u6700\u8fd1\u525b\u597d\u6709\u4e00\u500bcase~\u662f\u505a\u4e00\u5bb6\u516c\u53f8\u7684\u7db2\u7ad9..<\/p>\n

\u7531\u65bc\u696d\u4e3b\u975e\u5e38care\u80fd\u4e0d\u80fd\u5728\u96fb\u8166\u3001\u5e73\u7248\u3001\u548c\u624b\u6a5f\u4e0a\u4e09\u65b9\u517c\u5bb9~<\/p>\n

\u4ed6\u662f\u6c92\u6709\u8981\u5206\u7db2\u9801\u7248\u548c\u884c\u52d5\u7248~~\u53cd\u6b63\u5c31\u662f\u4e00\u500b\u7db2\u7ad9\u8981\u641e\u5b9a\u4e00\u5207\uff01<\/p>\n

\u6240\u4ee5\u6211\u5728\u88fd\u4f5c\u6642\u5c31\u5fc5\u9808\u8981\u5728\u5404\u7a2e\u4e0d\u540c\u7684\u88dd\u7f6e\u4e0a\u770b\u6392\u7248\u6709\u6c92\u6709\u8dd1\u4f4d…..<\/p>\n

<\/p>\n

\u5148\u4f86\u6558\u8ff0\u6211\u7684\u554f\u984c\uff1a<\/p>\n

\u9019\u662f\u4e00\u500b\u7522\u54c1\u700f\u89bd\u7684\u9801\u9762\uff0c\u9019\u9801\u9762\u56e0\u70ba\u5f88\u9577\uff0c\u5fc5\u9808\u8981\u6709\u66f8\u7c64\u7684\u6309\u9215(button)<\/p>\n

\u67091\u30012\u30013\u30014\u30015\uff1b\u5047\u5982\u6211\u6309\u4e863\u7684\u6309\u9215\uff0c\u756b\u9762\u5c31\u6703\u6ed1\u52d5\u5230\u7b2c3\u500b\u5340\u584a(\u4ee5\u6b64\u985e\u63a8..)<\/p>\n

\u800c\u9019\u500b\u66f8\u7c64\uff0c\u6211\u662f\u7528\u4e86jQuery\u4f86\u5beb\u6ed1\u52d5\u8207\u8df3\u8f49~~<\/p>\n

$(‘#\u6309\u9215\u540d\u7a31’).click(function(){<\/span>
$(‘html,body’).animate({scrollTop:$(‘#div\u5340\u584aID\u540d\u7a31’).offset().top}, \u901f\u5ea6);<\/span>
});<\/span><\/p>\n

})<\/span>;<\/p>\n

↑\u9806\u4fbf\u5206\u4eab\u4e0b\u6211\u600e\u9ebc\u5beb\u7684\uff0c\u4e0d\u77e5\u9053\u6211\u5728\u5e79\u561b\u7684\u5c31\u7565\u904e\uff01\u56e0\u70ba\u4e0d\u662f\u6b64\u7bc7\u7684\u91cd\u9ede~~
(jquery.min.js\u9019\u6a94\u6848\u7db2\u8def\u4e0a\u6293\u5f97\u5230)<\/p>\n

<\/p>\n

\u7136\u5f8c\u6211\u7684\u66f8\u7c64button\u662f\u7528input button\u5957\u7528CSS\u7684\u6a23\u5f0f\u88fd\u4f5c~<\/p>\n

ex:<\/p>\n

\u653e\u5728<body><\/body>\u4e4b\u4e2d\u7684input button\u6a19\u7c64~<\/p>\n

<input name=\"btn\" type=button class=\"button\" id=\"btn\"><\/span><\/p>\n

<\/p>\n

\u56e0\u70ba\u4e8b\u5148\u65e9\u5df2\u8a2d\u8a08\u597d\u4e86\u6309\u9215\u5716\u6848\uff0c\u6240\u4ee5\u5fc5\u9808\u8981\u7528CSS\u66f4\u6539\u6309\u9215\u6a23\u5f0f\uff01<\/strong><\/p>\n

\u9084\u6709\uff0c\u5728\u9019\u88e1\u63d0\u9192\u4e00\u4e0b\uff0c\u5716\u7247\u662f\u53ef\u4ee5\u76f4\u63a5\u52a0\u9023\u7d50\uff0c\u4f46\u662f\u5716\u7247\u662f\u4e0d\u80fd\u7528\u4f86\u57f7\u884cJavaScript\u548c\u63d0\u4ea4\u8868\u55ae<\/strong>\uff01<\/span><\/p>\n

<\/p>\n

\u6240\u4ee5\uff0c\u6211\u53ea\u80fd\u5728CSS\u88e1\u8a2d\u6211\u6309\u9215\u7684\u6a23\u5f0f(\u4ee5\u4e0b\u65b9\u5f0f\u662f\u6309\u9215\u6703\u76f4\u63a5\u662f<\/strong>image.gif\u9019\u5f35\u5716\u7684\u6a23\u5b50<\/strong>)<\/span>\uff1a<\/p>\n

.button {<\/span><\/p>\n

font-size: 0;<\/span>
width: 20px;<\/span>
height: 20px;<\/span>
border: none;<\/span>
margin: 0;<\/span>
padding: 0;<\/span>
background: url(images\/image.gif) 0 0 no-repeat; <\/span><\/p>\n

}<\/span><\/p>\n

<\/p>\n

\u672c\u4f86\u4ee5\u70ba\u9019\u6a23\u8a2d\u61c9\u8a72\u5b8c\u7f8e\uff0c\u6c92\u5565\u554f\u984c\uff0c\u7136\u5f8c\u5c31\u958b\u59cb\u7528\u5404\u7a2e\u4e0d\u540c\u7684\u88dd\u7f6e\u548c\u700f\u89bd\u5668\u6e2c\u8a66\u770b\u770b\uff1a<\/p>\n

<\/p>\n

\u7528\u96fb\u8166\u7248\u7684Chrome\u700f\u89bd\u5668\u770b(\u66f8\u7c64\u6309\u9215\u6b63\u5e38) $\"\"$ \uff1a<\/p>\n

$\"INPUTBUTTON\"$ <\/p>\n

<\/p>\n

\u7528Android\u624b\u6a5f(HTC Desire HD)\u7684\u700f\u89bd\u5668\u770b(\u66f8\u7c64\u6309\u9215\u6b63\u5e38) $\"\"$ \uff1a<\/p>\n

$\"INPUTBUTTON$ <\/p>\n

<\/p>\n

\u4f46…..\u7576\u6211\u7528\u5230iPhone\u6642….\u602a\u7570\u7684\u4e8b\u60c5\u4f86\u4e86~~~<\/strong><\/p>\n

\u7528iPhone\/iPad Safari\u700f\u89bd\u5668\u770b(\u66f8\u7c64\u6309\u9215\u4e0d\u6b63\u5e38\uff0c\u51fa\u73fe\u5947\u602a\u7684\u767d\u908a…) $\"\"$ <\/p>\n

$\"INPUTBUTTON$ <\/p>\n

\u6a6b\u7684\u4e5f\u4e00\u6a23~~~~~\u5947\u602a\u7684\u767d\u908a\u554a~~<\/p>\n

$\"INPUTBUTTON$ <\/p>\n

<\/p>\n

\u4e0d\u4fe1\u90aa~~\u518d\u63db\u4e00\u53f0iOS\u6e2c\u8a66~~~\u501f\u8001\u5abd\u7684iPad~~<\/p>\n

\u9084\u662f\u4e00\u6a23…………….. $\"\"$ \u53ef\u60e1\u7684\u767d\u908a\u54ea\u4f86\u7684~~~~~~~~~~~~~~~~<\/p>\n

$\"INPUTBUTTON$ <\/p>\n

<\/p>\n

\u9019\u554f\u984c\u5927\u6982\u5361\u4e86\u6211\u5feb1\u5c0f\u6642~~~\u6574\u65741\u5c0f\u6642\u90fd\u5728\u8a66\u4e00\u6a23\u7684\u4e8b\u60c5~~~<\/p>\n

\u5f8c\u4f86\u4e0a\u7db2\u67e5\uff0c\u627e\u5230\u4e00\u4e9b\u570b\u5916\u7684\u7db2\u7ad9\u6709\u8b1b\u5230(\u4e2d\u6587\u7684\u627e\u4e0d\u5230\u76f8\u95dc\u6559\u5b78 $\"\"$ ~~~)<\/p>\n

<\/p>\n

\u56e0\u70ba\u6709\u4e9b\u700f\u89bd\u5668\u672c\u8eab\u6703\u6709\u4e00\u4e9b\u5167\u5efa\u7684Webkit\uff0c\u4e5f\u5c31\u662f\u700f\u89bd\u5668\u6703\u6709\u5167\u5efa\u6309\u9215\u7684\u6a23\u5f0f~~<\/p>\n

iOS\u548c\u706b\u72d0\u90fd\u662f\u5178\u578b\"\u88dd\u6703\"\u4f8b\u5b50\uff01\uff01\uff01\uff01\uff01\uff01<\/strong><\/p>\n

\u54c7\u54e9\u52d2\uff0c\u9023\u706b\u72d0\u90fd\u6703\u9019\u6a23~~\u771f\u662f\u62cd\u8b1d\u6211N\u5e74\u6c92\u7528\u706b\u72d0\u4e86……<\/p>\n

<\/p>\n

\u570b\u5916\u7db2\u7ad9\u90fd\u8aaa\u662f\u8981\u5728CSS\u90a3\u52a0\u4e00\u884c\uff1a<\/p>\n

-webkit-appearance: none;<\/span><\/strong><\/p>\n

\u53ef\u662f….\u6211\u52a0\u4e86\u8001\u534a\u5929~~~\u554f\u984c\u9084\u662f\u4e00\u6a23\u52d2\uff01\uff01 $\"\"$ <\/span><\/p>\n

<\/p>\n

\u5728\u7d42\u65bc\u60f3\u653e\u68c4\u7684\u6642\u523b~~<\/p>\n

\u6211\u628a\u90a3\u500b\u6309\u9215\u653e\u5927\u770b\uff0c\u767c\u73fe\u5b83\u4e0d\u662f\u767d\u908a\u800c\u662f\u8b8a\u6210\u5947\u602a\u7684\u5713\u89d2\u6b63\u65b9\u578b~~<\/p>\n

\u6240\u4ee5\u6211\u83ab\u540d\u5c31\u60f3\u8aaa\u4e7e\u8106\u5c31\u5728CSS\u4e0a\u628aborder\u7684\u5713\u89d2\u8a2d\u70ba0\uff1a<\/p>\n

border-radius: 0;<\/span><\/strong><\/p>\n

<\/p>\n

\u7136\u5f8c~~~\u666e\u5929\u540c\u6176\uff01\uff01\u7adf\u7136\u610f\u5916\u7684\u6210\u529f\u4e86\uff01\uff01\uff01 $\"\"$ <\/span><\/p>\n

<\/p>\n

\u6240\u4ee5CSS\u8b8a\u6210\u9019\u6a23\u5beb(\u4ee5\u4e0b\u70ba\u6b63\u78ba\u7248\u672c\uff0c\u7d05\u5b57\u70ba\u589e\u52a0\u7684\u90e8\u5206)\uff1a<\/span><\/strong><\/p>\n

<\/p>\n

.button {<\/span><\/strong><\/p>\n

font-size: 0;<\/span><\/strong>
width: 20px;<\/span><\/strong>
height: 20px;<\/span><\/strong>
border: none;<\/span><\/strong>
border-radius: 0;<\/span><\/strong>
margin: 0;<\/span><\/strong>
padding: 0;<\/span><\/strong>
background: url(images\/image.gif) 0 0 no-repeat; <\/span><\/strong>
-webkit-appearance: none;<\/span><\/strong><\/p>\n

}<\/span><\/strong><\/p>\n

<\/p>\n

\u73fe\u5728iPhone\/iPad\u4e0d\u7ba1\u5982\u4f55\u770b\uff0c\u5b83\u90fd\u6b63\u5e38\u4e86~~~~ $\"\"$ <\/p>\n

\u7136\u5f8c\u4e5f\u6c92\u5f71\u97ff\u5230\u539f\u672c\u5c31\u6b63\u5e38\u7684\u88dd\u7f6e\u548c\u700f\u89bd\u5668\u89c0\u770b\uff01\uff01\u7576\u7136\uff0c\u66f8\u7c64\u8a9e\u6cd5\u4e5f\u4e0d\u6703\u53d7\u5f71\u97ff~~~~<\/p>\n

$\"INPUTBUTTON$ <\/span><\/p>\n

<\/p>\n

$\"\"$ <\/span><\/p>\n

-Jouko 2013\/3\/28<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

\u5728\u5beb\u9019\u7bc7\u4e4b\u524d\uff0c\u4e0d\u5f97\u4e0d\u62b1\u6028\u4e00\u4e0b…. iOS\u771f\u7684\u5f88\u641e\u525b\u8036~~~\u771f\u7684\u662f\u6703\u8b93\u958b\u767c\u8005\u591a\u4e8b\u7684\u4e00\u7a2e\u4f5c\u696d\u7cfb\u7d71~~~ \u56e0\u70ba\u9019\u500b\u554f\u984c\u662f\u6211\u81ea\u5df1\u9047\u4e0a\u7684…\u9019\u7bc7\u5c31\u7576\u4f5c\u7d66\u81ea\u5df1\u7684\u4e00\u500b\u96a8\u7b46\u8a18\u9304\u56c9~~ \u6700\u8fd1\u525b\u597d\u6709\u4e00\u500bcase~\u662f\u505a\u4e00\u5bb6\u516c\u53f8\u7684\u7db2\u7ad9.. \u7531\u65bc\u696d\u4e3b\u975e\u5e38care\u80fd\u4e0d\u80fd\u5728\u96fb\u8166\u3001\u5e73\u7248\u3001\u548c\u624b\u6a5f\u4e0a\u4e09\u65b9\u517c\u5bb9~ \u4ed6\u662f\u6c92\u6709\u8981\u5206\u7db2\u9801\u7248\u548c\u884c\u52d5\u7248~~\u53cd\u6b63\u5c31\u662f\u4e00\u500b\u7db2\u7ad9\u8981\u641e\u5b9a\u4e00\u5207\uff01 \u6240\u4ee5\u6211\u5728\u88fd\u4f5c\u6642\u5c31\u5fc5\u9808\u8981\u5728\u5404\u7a2e\u4e0d\u540c\u7684\u88dd\u7f6e\u4e0a\u770b\u6392\u7248\u6709\u6c92\u6709\u8dd1\u4f4d….. \u5148\u4f86\u6558\u8ff0\u6211\u7684\u554f\u984c\uff1a \u9019\u662f\u4e00\u500b\u7522\u54c1\u700f\u89bd\u7684\u9801\u9762\uff0c\u9019\u9801\u9762\u56e0\u70ba\u5f88\u9577\uff0c\u5fc5\u9808\u8981\u6709\u66f8\u7c64\u7684\u6309\u9215(button) \u67091\u30012\u30013\u30014\u30015\uff1b\u5047\u5982\u6211\u6309\u4e863\u7684\u6309\u9215\uff0c\u756b\u9762\u5c31\u6703\u6ed1\u52d5\u5230\u7b2c3\u500b\u5340\u584a(\u4ee5\u6b64\u985e\u63a8..) \u800c\u9019\u500b\u66f8\u7c64\uff0c\u6211\u662f\u7528\u4e86jQuery\u4f86\u5beb\u6ed1\u52d5\u8207\u8df3\u8f49~~ <script src=\"jquery.min.js\" language=\"javascript\"><\/script> <script language=\"javascript\">$(function(){ $(‘#\u6309\u9215\u540d\u7a31’).click(function(){ $(‘html,body’).animate({scrollTop:$(‘#div\u5340\u584aID\u540d\u7a31’).offset().top}, \u901f\u5ea6); }); }); ↑\u9806\u4fbf\u5206\u4eab\u4e0b\u6211\u600e\u9ebc\u5beb\u7684\uff0c\u4e0d\u77e5\u9053\u6211\u5728\u5e79\u561b\u7684\u5c31\u7565\u904e\uff01\u56e0\u70ba\u4e0d\u662f\u6b64\u7bc7\u7684\u91cd\u9ede~~(jquery.min.js\u9019\u6a94\u6848\u7db2\u8def\u4e0a\u6293\u5f97\u5230) \u7136\u5f8c\u6211\u7684\u66f8\u7c64button\u662f\u7528input button\u5957\u7528CSS\u7684\u6a23\u5f0f\u88fd\u4f5c~ ex: \u653e\u5728<body><\/body>\u4e4b\u4e2d\u7684input button\u6a19\u7c64~ <input name=\"btn\" type=button class=\"button\" id=\"btn\"> \u56e0\u70ba\u4e8b\u5148\u65e9\u5df2\u8a2d\u8a08\u597d\u4e86\u6309\u9215\u5716\u6848\uff0c\u6240\u4ee5\u5fc5\u9808\u8981\u7528CSS\u66f4\u6539\u6309\u9215\u6a23\u5f0f\uff01 \u9084\u6709\uff0c\u5728\u9019\u88e1\u63d0\u9192\u4e00\u4e0b\uff0c\u5716\u7247\u662f\u53ef\u4ee5\u76f4\u63a5\u52a0\u9023\u7d50\uff0c\u4f46\u662f\u5716\u7247\u662f\u4e0d\u80fd\u7528\u4f86\u57f7\u884cJavaScript\u548c\u63d0\u4ea4\u8868\u55ae\uff01 \u6240\u4ee5\uff0c\u6211\u53ea\u80fd\u5728CSS\u88e1\u8a2d\u6211\u6309\u9215\u7684\u6a23\u5f0f(\u4ee5\u4e0b\u65b9\u5f0f\u662f\u6309\u9215\u6703\u76f4\u63a5\u662fimage.gif\u9019\u5f35\u5716\u7684\u6a23\u5b50)\uff1a .button { font-size: 0; width: 20px; height: 20px; border: none; margin: 0; padding: 0; background: url(images\/image.gif) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/www.evachuang.com.tw\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/569"}],"collection":[{"href":"http:\/\/www.evachuang.com.tw\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.evachuang.com.tw\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.evachuang.com.tw\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.evachuang.com.tw\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=569"}],"version-history":[{"count":0,"href":"http:\/\/www.evachuang.com.tw\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/569\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.evachuang.com.tw\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.evachuang.com.tw\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=569"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.evachuang.com.tw\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}