JavaScript + Ajax 実践サンプル集 - Datepicker Rounded Corners (カレンダーを角丸にする)

Datepicker Rounded Corners (カレンダーを角丸にする)

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのDatepickerプラグインの角を丸くします。Webページの[Change to rounded corners]ボタンをクリックするとカレンダーの４角を丸くします。角丸にするには、DD_roundies.addRule()メソッドを使用しています。

このサンプルを編集して試してみる

カレンダーを角丸にするには、「$.uicornerfix('6px');」を実行します。引数には角の半径をピクセルの単位で指定します。

$(function() {
  $('#datepicker').datepicker({ inline: true });
  $('#btnChange').click(function() {
    $.uicornerfix('6px');
    return false;
  });	     
});

<!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>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>jQuery Plugin UI Widgets - Datepicker</title>
  <link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />
  <style type="text/css">		  
	  body{ font: 62.5% Verdana, sans-serif; }	
  </style>  
  <script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
  <script src="jQuery/UI/jquery.ui.all.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.datepicker-ja.js" type="text/javascript"></script>
  <script src="jQuery/UI/DD_roundies.uicornerfix.js" type="text/javascript"></script>
	<script type="text/javascript">
	  $(function() {
	    $('#datepicker').datepicker({ inline: true });
	    $('#btnChange').click(function() {
	      $.uicornerfix('6px');
	      return false;
	    });	     
	  });
	</script>

</head>
<body>

<div">    	
    <button id="btnChange" type="button">Change to rounded corners</button>
    <br /><br />    			
  　<div id="datepicker"></div>		
  </div>

</body>
</html>

外部スクリプトCSS部HEAD部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
//extended DD_roundies to add rules to UI corner classes
$.uicornerfix = function(r){
	DD_roundies.addRule('.ui-corner-all', r);
	DD_roundies.addRule('.ui-corner-top', r+' '+r+' 0 0');
	DD_roundies.addRule('.ui-corner-bottom', '0 0 '+r+' '+r);
	DD_roundies.addRule('.ui-corner-right', '0 '+r+' '+r+' 0');
	DD_roundies.addRule('.ui-corner-left', r+' 0 0 '+r);
	DD_roundies.addRule('.ui-corner-tl', r+' 0 0 0');
	DD_roundies.addRule('.ui-corner-tr', '0 '+r+' 0 0');
	DD_roundies.addRule('.ui-corner-br', '0 0 '+r+' 0');
	DD_roundies.addRule('.ui-corner-bl', '0 0 0 '+r);
};

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
ui.all.css
@import "ui.core.css";
@import "ui.themeUIdarkness.css";
@import "ui.allplugins.css";

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />
<style type="text/css">		  
  body{ font: 62.5% Verdana, sans-serif; }	
</style>  
<script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
<script src="jQuery/UI/jquery.ui.all.js" type="text/javascript"></script>
<script src="jQuery/UI/ui.datepicker-ja.js" type="text/javascript"></script>
<script src="jQuery/UI/DD_roundies.uicornerfix.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $('#datepicker').datepicker({ inline: true });
  $('#btnChange').click(function() {
    $.uicornerfix('6px');
    return false;
  });	     
});
</script>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

Datepicker Rounded Corners (カレンダーを角丸にする)

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

Datepicker Rounded Corners (カレンダーを角丸にする)

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!