3

これはおそらく本当にばかげているように聞こえますが、jquery の丸い角 ( http://www.methvin.com/jquery/jq-corner-demo.html ) を実装する方法がわかりません。私のjavascript-fuは完全に失敗しており、自分のページで動作させることができないようです. それらを表示するために使用する HTML と JavaScript の簡単な例を誰か教えてもらえますか? 私のばかげたことをお詫びします。

4

3 に答える 3

10

  1. このことは、Safari と Google Chrome では機能しません。

  2. ページにjquery.jsを含める必要があります。別の終了タグを付けることを忘れないでください。

    <script type="text/javascript" src="jquery.js"></script>

  3. jQuery Corner Plugin JavaScript ファイル ( jquery.corner.js ) もページに含める必要があります。

    <script type="text/javascript" src="jquery.corner.js"></script>

  4. ページのどこかに、必要<div>なコーナーが必要です。

    <div id="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>

  5. ページ内の別の場所 (できれば div 自体の前ではない) で、次の JavaScript コマンドを発行します。これにより、ページが読み込まれ、操作の準備が整ったときに内部関数が実行されます。

    <script type="text/javascript">$(function() { $('#divToHaveCorners').corner(); } );</script>

  6. あなたは終わった！そうでない場合は、お知らせください。

于 2008-11-06T21:50:08.953 に答える
1

Methvinhttp://www.methvin.com/jquery/jq-corner-demo.htmlによる jquery コーナーは問題なく動作していますが、...もっと美しい代替手段があります。

http://blue-anvil.com/jquerycurvycorners/test.html

そのライブラリを使用して、丸みを帯びた画像を作成することもできます。

そして、非常に重要なこと: - 2008 年 7 月 18 日 - IE6、7、safari、およびその他すべての最新ブラウザで動作するようになりました。センタリングのバグを修正。

jQuery Curvy Corners 2.0.2 Beta 3 を以下からダウンロードしてください。

http://code.google.com/p/jquerycurvycorners/downloads/list

また、最初に jquery コア lib をロードする必要があるため、HEAD の例は次のようになります。

<head>
<script src="http://path.to.your.downloaded.jquery.library/jquery-1.2.6.min.js" type="text/javascript"></script> 
<script src="http://path.to.your.downloaded.jquery.library/jquery.curvycorners.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){

$('.myClassName').corner({
     tl: { radius: 6 },
     tr: { radius: 6 },
     bl: { radius: 6 },
     br: { radius: 6 }
});

}
</script>
</head>

ここで、tl、tr、bl、br は左上隅、右上隅などです...

次に、あなたのBODYエリア：

と ？

以上です ：）

画像へのリンク:

http://img44.imageshack.us/img44/3638/corners.jpg

...そしてコードを使用する準備ができました:

<html>
    <head>
    <script src="http://blue-anvil.com/jquerycurvycorners/jquery-1.2.6.min.js" type="text/javascript"></script> 
    <script src="http://blue-anvil.com/jquerycurvycorners/jquery.curvycorners.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){

    $('.myClassName').corner({
         tl: { radius: 12 },
         tr: { radius: 12 },
         bl: { radius: 12 },
         br: { radius: 12 }
    });

    });
    </script>
 <style>
 .myClassName
 {
 width:320px;
 height:64px;
 background-color:red;
 text-align:center;
 margin:auto;
 margin-top:30px;
 }
 </style>
</head>

<body>

<div class="myClassName">content</div>

</body>

</html>

コピーして貼り付けて楽しんでください:)

于 2009-11-05T23:28:05.887 に答える
0

1) jquery がロードされていることを確認します 2) コーナー ライブラリがロードされていることを確認します 3) 準備完了のコールバックで、セレクターを使用して、影響を与えたい div を取得し、コーナー メソッドを呼び出します

$(document).ready(function() {
 $("#idofdiv").corners();
});
于 2008-11-06T21:49:30.127 に答える