jQueryプラグインjCorner.jsを使って、端が折り曲がった付箋紙風表示

端が折り曲がった付箋紙風表示ですが、この表現はCSSだけでも実現できます。しかし、色違いや形状を変化させたものなどを同時に複数表示させるとなると、かなり記述が複雑になります。jQueryプラグインjCorner.jsを使うと、ごく簡単な記述で同じ表現を実装できます。

サンプル（１）は、折り返したところの背景部分の色を#bbb、サイズを28、外部リンクを追加しています。折り返し付近がリンクのポインターになります。

サンプル（２）は、（１）とほぼ同じですが、折り返したところの背景色をbodyの背景色と同じにしているので、その部分が欠けて見えます。また、サイズは23、リンク先は内部になっています。

サンプル（３）は、リンクをテキスト部分にaタグで指定しています。背景部分の色を#999、サイズを20にしてあります。

いずれも付箋紙部分の背景色は別途cssで指定しています。また、scriptのデフォルトでリンク表示が「target=_blank」になっていたものを「_top」に変更しています。

0万石在庫照会システム

$('.paper1').jCorner({
	background: '#bbb',
	size: 28,
	link: 'http://stock.web-order.jp/'
  });

百万石WEB受注システム

$('.paper2').jCorner({
	background: '#eee',
 	size: 23,
	link: '../../p001/001.html'
  });

$('.paper3').jCorner({
	background: '#999',
	size: 20,
  });