JavaScript + Ajax 実践サンプル集 (1127本以上) ◇編集して実行可能◇
jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...
ホーム
jQuery
jQuery プラグイン
jQuery UI
人気順
カテゴリ
キーワード
クール
新着
ツリー
jQuery PDF
ホット
サイト情報
サイトマップ
★ 新着サンプルトップ50のRSSを購読する
◆ DHTMLサンプル(基礎)のRSSを購読する
◆ DHTMLサンプル(応用)のRSSを購読する
◆ AJAXサンプルのRSSを購読する
◆ その他サンプルのRSSを購読する
◆ BOM(Browser Object Model)のRSSを購読する
◆ DOM(Document Object Model)のRSSを購読する
ボックスの角をカスタマイズする
説明
補足説明
コード
分割コード
関連書籍
コメント投稿
このサンプルは、jQueryのcorner()プラグインを利用してボックスの角をカスタマイズします。ボックス内に記述されているJavaScriptのコードを実行するとそのボックスが表示されます。
このサンプルを編集して試してみる
←サンプルが背後に隠れて見えないときは左をクリック ！
$('#roundbox').corner(); <div id="roundbox"> <h1>Round</h1> </div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery - corner plugin </title> <link href="jQuery/corner/jq.css" rel="stylesheet" type="text/css" /> <link href="jQuery/corner/main.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/corner/jquery.corner.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('p').wrap("<code></code>"); $('div.demo').each(function() { var t = $('p', this).text(); eval(t); }); }); </script> </head> <body> <div id="main"> <div class="section"> <h1>Available Patterns</h1> <h2>The default pattern is <code>round</code></h2> </div> <div class="demo"> <h1>Round</h1> <p>$(this).corner();</p> </div> <div class="demo"> <h1>Bevel</h1> <p>$(this).corner("bevel");</p> </div> <div class="demo"> <h1>Notch</h1> <p>$(this).corner("notch");</p> </div> <div class="demo"> <h1>Bite</h1> <p>$(this).corner("bite");</p> </div> <div class="demo"> <h1>Cool</h1> <p>$(this).corner("cool");</p> </div> <div class="demo"> <h1>Sharp</h1> <p>$(this).corner("sharp");</p> </div> <div class="demo"> <h1>Slide</h1> <p>$(this).corner("slide");</p> </div> <div class="demo"> <h1>Jut</h1> <p>$(this).corner("jut");</p> </div> <div class="demo"> <h1>Curl</h1> <p>$(this).corner("curl");</p> </div> <div class="demo"> <h1>Tear</h1> <p>$(this).corner("tear");</p> </div> <div class="demo"> <h1>Fray</h1> <p>$(this).corner("fray");</p> </div> <div class="demo"> <h1>Wicked</h1> <p>$(this).corner("wicked");</p> </div> <div class="demo"> <h1>Sculpt</h1> <p>$(this).corner("sculpt");</p> </div> <div class="demo"> <h1>Long</h1> <p>$(this).corner("long");</p> </div> <div class="demo"> <h1>Dog Ear</h1> <p>$(this).corner("dog");</p> </div> <div class="demo"> <h1>Dog2</h1> <p>$(this).corner("dog2");</p> </div> <div class="demo"> <h1>Dog3</h1> <p>$(this).corner("dog3");</p> </div> <div class="section"> <h1>Choose Your Corner</h1> <h2>Use <code>top, bottom, tl, tr, bl, br</code> to identify which corner to style</h2> </div> <div class="demo"> <h1>Top Bevel</h1> <p>$(this).corner("bevel top");</p> </div> <div class="demo"> <h1>Top-Left Bite</h1> <p>$(this).corner("bite tl");</p> </div> <div class="demo"> <h1>Round Bottom</h1> <p>$(this).corner("bottom");</p> </div> <div class="demo"> <h1>Bottom-Left Notch</h1> <p>$(this).corner("notch bl");</p> </div> <div class="demo"> <h1>Top-Right Dog Ear</h1> <p>$(this).corner("dog tr");</p> </div> <div class="demo"> <h1>Top-Left, Bottom-Right Cool</h1> <p>$(this).corner("cool tl br");</p> </div> <div class="section"> <h1>Specify Size</h1> <h2>Include a px value to specify the corner size</h2> </div> <div class="demo"> <h1>Round 30px</h1> <p>$(this).corner("30px");</p> </div> <div class="demo"> <h1>Round 5px</h1> <p>$(this).corner("5px");</p> </div> <div class="demo"> <h1>Cool 20px</h1> <p>$(this).corner("cool 20px");</p> </div> <div class="demo"> <h1>Sharp 20px</h1> <p>$(this).corner("sharp 20px");</p> </div> <div class="demo"> <h1>Bite 30px</h1> <p>$(this).corner("bite 30px");</p> </div> <div class="demo"> <h1>Wicked 20px</h1> <p>$(this).corner("wicked 20px");</p> </div> <div class="demo"> <h1>Dog 20px</h1> <p>$(this).corner("dog 20px");</p> </div> <div class="demo"> <h1>Dog2 30px</h1> <p>$(this).corner("dog2 30px");</p> </div> <div class="demo"> <h1>Dog3 30px</h1> <p>$(this).corner("dog3 30px");</p> </div> <div class="section"> <h1>Mix and Match</h1> <h2>Chain corner calls to achieve combined effects</h2> </div> <div class="demo"> <h1>Round and Bevel</h1> <p>$(this).corner( "bottom").corner("top bevel");</p> </div> <div class="demo"> <h1>Round and Notch</h1> <p>$(this).corner( "br top").corner("notch bl 20px");</p> </div> <div class="demo"> <h1>Crazy</h1> <p>$(this).corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notchbr");</p> </div> </div> </body> </html>
CSS部
HEAD部
BODY部
ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。
body, div, h1 { font-family: 'trebuchet ms' , verdana, arial; margin: 0; padding: 0; } body { margin: 0; padding: 0; font-size: small; } h1 { padding: 10px; margin: 0; font-size: large; } h2 { padding: 10px; background-color: #ddd; color: black; margin: 0; font-size: small; font-weight: normal; } #main { /*background: #eee;*/ padding: 10px; } pre { border: none; } div.section { clear: left; xposition: relative; } div.section h1 { padding: 20px 20px 0 20px; } div.section h2 { background: #eee; padding: 1px 20px; } div.demo, div.inner { color: #000; text-align: center; font: verdana, arial, sans-serif; } div.demo { float: left; width: 18em; padding: 20px; margin: 1em; background: #6af; } div.inner { margin: 0; background: #ffc; padding: 10px; border: 0; zoom: 1; } div.outer { float: left; margin: 15px; background: #c82; padding: 8px; width: 22em; } div.fun { margin: 2px; } #abs { position: absolute; width: 200px; background: #ffa; padding: 5px; margin: 8px; top: 0; right: 0; text-align: center; } /* fixed height/width testing */ .box { background-color: #6af; padding: 15px; text-align: center; margin: 25px; } #box1 { zoom: 1; } /* fluid (zoom for layout) */ #box2 { height: 150px; } /* fixed height */ #box3 { width: 300px; margin: auto; } /* fixed width */ #box4 { height: 150px; width: 300px; margin: auto; } /* fixed height and width */ div.plain { background-color: #6af; text-align: center; }
ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。
<link href="jQuery/corner/jq.css" rel="stylesheet" type="text/css" /> <link href="jQuery/corner/main.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/corner/jquery.corner.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('p').wrap("<code></code>"); $('div.demo').each(function() { var t = $('p', this).text(); eval(t); }); }); </script>
ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。
<div id="main"> <div class="section"> <h1>Available Patterns</h1> <h2>The default pattern is <code>round</code></h2> </div> <div class="demo"> <h1>Round</h1> <p>$(this).corner();</p> </div> <div class="demo"> <h1>Bevel</h1> <p>$(this).corner("bevel");</p> </div> <div class="demo"> <h1>Notch</h1> <p>$(this).corner("notch");</p> </div> <div class="demo"> <h1>Bite</h1> <p>$(this).corner("bite");</p> </div> <div class="demo"> <h1>Cool</h1> <p>$(this).corner("cool");</p> </div> <div class="demo"> <h1>Sharp</h1> <p>$(this).corner("sharp");</p> </div> <div class="demo"> <h1>Slide</h1> <p>$(this).corner("slide");</p> </div> <div class="demo"> <h1>Jut</h1> <p>$(this).corner("jut");</p> </div> <div class="demo"> <h1>Curl</h1> <p>$(this).corner("curl");</p> </div> <div class="demo"> <h1>Tear</h1> <p>$(this).corner("tear");</p> </div> <div class="demo"> <h1>Fray</h1> <p>$(this).corner("fray");</p> </div> <div class="demo"> <h1>Wicked</h1> <p>$(this).corner("wicked");</p> </div> <div class="demo"> <h1>Sculpt</h1> <p>$(this).corner("sculpt");</p> </div> <div class="demo"> <h1>Long</h1> <p>$(this).corner("long");</p> </div> <div class="demo"> <h1>Dog Ear</h1> <p>$(this).corner("dog");</p> </div> <div class="demo"> <h1>Dog2</h1> <p>$(this).corner("dog2");</p> </div> <div class="demo"> <h1>Dog3</h1> <p>$(this).corner("dog3");</p> </div> <div class="section"> <h1>Choose Your Corner</h1> <h2>Use <code>top, bottom, tl, tr, bl, br</code> to identify which corner to style</h2> </div> <div class="demo"> <h1>Top Bevel</h1> <p>$(this).corner("bevel top");</p> </div> <div class="demo"> <h1>Top-Left Bite</h1> <p>$(this).corner("bite tl");</p> </div> <div class="demo"> <h1>Round Bottom</h1> <p>$(this).corner("bottom");</p> </div> <div class="demo"> <h1>Bottom-Left Notch</h1> <p>$(this).corner("notch bl");</p> </div> <div class="demo"> <h1>Top-Right Dog Ear</h1> <p>$(this).corner("dog tr");</p> </div> <div class="demo"> <h1>Top-Left, Bottom-Right Cool</h1> <p>$(this).corner("cool tl br");</p> </div> <div class="section"> <h1>Specify Size</h1> <h2>Include a px value to specify the corner size</h2> </div> <div class="demo"> <h1>Round 30px</h1> <p>$(this).corner("30px");</p> </div> <div class="demo"> <h1>Round 5px</h1> <p>$(this).corner("5px");</p> </div> <div class="demo"> <h1>Cool 20px</h1> <p>$(this).corner("cool 20px");</p> </div> <div class="demo"> <h1>Sharp 20px</h1> <p>$(this).corner("sharp 20px");</p> </div> <div class="demo"> <h1>Bite 30px</h1> <p>$(this).corner("bite 30px");</p> </div> <div class="demo"> <h1>Wicked 20px</h1> <p>$(this).corner("wicked 20px");</p> </div> <div class="demo"> <h1>Dog 20px</h1> <p>$(this).corner("dog 20px");</p> </div> <div class="demo"> <h1>Dog2 30px</h1> <p>$(this).corner("dog2 30px");</p> </div> <div class="demo"> <h1>Dog3 30px</h1> <p>$(this).corner("dog3 30px");</p> </div> <div class="section"> <h1>Mix and Match</h1> <h2>Chain corner calls to achieve combined effects</h2> </div> <div class="demo"> <h1>Round and Bevel</h1> <p>$(this).corner( "bottom").corner("top bevel");</p> </div> <div class="demo"> <h1>Round and Notch</h1> <p>$(this).corner( "br top").corner("notch bl 20px");</p> </div> <div class="demo"> <h1>Crazy</h1> <p>$(this).corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notchbr");</p> </div> </div>
コメント・提案の投稿！
名前
メール
件名
本文
送信中です...
このサンプルは、jQueryのcorner()プラグインを利用してボックスの角をカスタマイズします。ボックス内に記述されているJavaScriptのコードを実行するとそのボックスが表示されます。
このサンプルを編集して試してみる!
$('#roundbox').corner(); <div id="roundbox"> <h1>Round</h1> </div>
Access
|
ASP.NET + Ajax
|
ASP.NET 3.5 + Ajax
|
JavaScript + jQuery