JavaScript + Ajax 実践サンプル集 - Datepicker Change Calendar Theme (カレンダーのテーマを変える)

Datepicker Change Calendar Theme (カレンダーのテーマを変える)

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

このサンプルは、代替スタイルシートを宣言して実行時にスタイルシートをダイナミックに切り替えます。サンプルが表示されたらテーマのラジオボタンをクリックしてください。てカレンダーのスタイルが変わります。

link要素を有効/無効にするには、disabledプロパティにtrue/falseを設定します。

$('input:radio').click(function() {
    var theme = $(this).val();
    $('link').each(function() {
      this.disabled = true;
      if ($(this).attr('title') == theme) {
        this.disabled = 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>
<title>jQuery Plugin UI Widgets - Datepicker Themes</title>
<link href="jQuery/UI/theme-ui-darkness/ui.all.css" rel="stylesheet" title="theme1" type="text/css" />
<link href="jQuery/UI/theme-ui-lightness/ui.all.css" rel="alternate stylesheet" title="theme2" type="text/css" />
<link href="jQuery/UI/theme-ui-smoothness/ui.all.css" rel="alternate stylesheet" title="theme3" type="text/css" />

$('input:radio').click(function() {
    var theme = $(this).val();
    $('link').each(function() {
      this.disabled = true;
      if ($(this).attr('title') == theme) {
        this.disabled = false;
      }
    });
  });
  
});
</script>

</head>
<body>

<div>
  <input type="radio" name="theme" value="theme1" checked="checked" />theme1
  <input type="radio" name="theme" value="theme2" />theme2
  <input type="radio" name="theme" value="theme3" />theme3  
  <br /><br />  	  			
  <div id="datepicker"></div>		
</div>

</body>
</html>

外部スクリプトCSS部HEAD部BODY部

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

            
$(function() {   
  
  $('#datepicker').datepicker({ inline: true });

  $('input:radio').click(function() {
    var theme = $(this).val();
    $('link').each(function() {
      this.disabled = true;
      if ($(this).attr('title') == theme) {
        this.disabled = false;
      }
    });
  });
  
});

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

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

theme2.css
@import "ui.core.css";
@import "ui.themeSmoothness.css";
@import "ui.allplugins.css";

theme3.css
@import "ui.core.css";
@import "ui.themeStart.css";
@import "ui.allplugins.css";

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

            
<link href="jQuery/UI/theme-ui-darkness/ui.all.css" rel="stylesheet" title="theme1" type="text/css" />
<link href="jQuery/UI/theme-ui-lightness/ui.all.css" rel="alternate stylesheet" title="theme2" type="text/css" />
<link href="jQuery/UI/theme-ui-smoothness/ui.all.css" rel="alternate stylesheet" title="theme3" 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>

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

            
<div">
  <input type="radio" name="theme" value="theme1" checked="checked" />theme1
  <input type="radio" name="theme" value="theme2" />theme2
  <input type="radio" name="theme" value="theme3" />theme3  
  <br /><br />  	  			
  <div id="datepicker"></div>		
</div>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

Datepicker Change Calendar Theme (カレンダーのテーマを変える)

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

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

Datepicker Change Calendar Theme (カレンダーのテーマを変える)

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

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