JavaScript + Ajax 実践サンプル集 - Datepicker Save Selected Theme To Cookie (カレンダーのテーマをクッキーに保存)

Datepicker Save Selected Theme To Cookie (カレンダーのテーマをクッキーに保存)

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

このサンプルは、ダイナミックに変更したスタイルシートをクッキーに保存して保持します。次回、サイトを再訪問したときに以前保存したスタイルシートを復元します。スタイルシートを選択したら別ページに移動してから戻ってきて再度表示してみてください。

datepicker()を表示したら、readCookie()を呼び出してスタイルシートのテーマを取得します。そして、switchStylesstyle()を呼び出してスタイルシートを切り替えます。

$(function() {

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

  $('input:radio').click(function() {
    var theme = $(this).val();
    switchStylestyle(theme);
    return;  // return false;
  });

  var theme = readCookie('style');
  if (theme) {
    switchStylestyle(theme);
    $('input:radio').each(function() {
      this.checked = false;
      if ($(this).val() == theme) {
        this.checked = true;
      }
    });
  }

});

<!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 Cookie</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" />
 
<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/switchstyle.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {

//eraseCookie('style');

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

$('input:radio').click(function() {
      var theme = $(this).val();
      switchStylestyle(theme);
      return;  // return 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>

外部スクリプトHEAD部BODY部

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

            
function switchStylestyle(styleName) {
  $('link[rel*=style][title]').each(function() {
    this.disabled = true;
    if ($(this).attr('title') == styleName) {
      this.disabled = false;
    }
  });
  createCookie('style', styleName, 365);
}

function createCookie(name, value, days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
  }
  else var expires = "";
  document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name, "", -1);
}

ボックス内のコードを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>
<script src="jQuery/UI/switchstyle.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 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Datepicker Save Selected Theme To Cookie (カレンダーのテーマをクッキーに保存)

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

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Datepicker Save Selected Theme To Cookie (カレンダーのテーマをクッキーに保存)

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5