SQLの窓 イラストAC フリー素材

2012年03月06日

Windows8 Metro(JS) で jQuery の datepicker を動作確認しました

以下のコードをテストしました

jQuery UI の datepicker の基本オプション

以下のようなメッセージが出るので、jQuery のコードを一部変更する必要
があるので、ソースでダウンロードして組み込んでいます

JavaScript runtime error: Unable to add dynamic content.
A script attempted to inject dynamic content, or elements 
previously modified dynamically, that might be unsafe. 
For example, using the innerHTML property or the document.write 
method to add a script element will generate this exception. 
If the content is safe and from a trusted source, use a 
method to explicitly manipulate elements and attributes, 
such as createElement, or use msWWA.execUnsafeLocalFunction.
この対処は具体的には以下のようにしていますが、どういう条件で発生する かがまだ不明ではあります。
	append: function() {
		return this.domManip(arguments, true, function( elem ) {
			if (this.nodeType === 1) {
			    // this.appendChild(elem);
			    var param = this;
			    msWWA.execUnsafeLocalFunction(function () { param.appendChild(elem); });
			}
		});
	},

Metro での実行画面







Metro の HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery : datepicker</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <!-- WinWebApp2 references -->
    <link rel="stylesheet" href="/css/default.css" />
    <!-- jQuery references -->
    <link href="css/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/jquery.ui.datepicker.js" type="text/javascript"></script>
    <!-- Start -->
    <script src="/js/default.js"></script>
</head>
<body style="padding: 100px 0 0 100px;">
<div id="title">ダイアログで決定するとここにセットします</div>
<style>
.ui-datepicker {
	width: 250px;
	z-index:1000!important;
}
.ui-datepicker-header {
	padding: 0!important;
}
</style>
Date: <input type="text" id="datepicker" />
<br />
<input
	type="button"
	value="dialog"
	onclick='$( "#datepicker" ).datepicker("dialog","2012/12/31",function(sdate){document.getElementById("title").innerHTML=sdate},datepicker_option);'
/>
<pre>



</pre>

</body>
</html>

Metro の default.js
(function () {
    'use strict';

    WinJS.Application.onmainwindowactivated = function (e) {

        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            $(function () { Debug.writeln("jQuery Start"); });
            window.datepicker_option = {
                dateFormat: 'yy/mm/dd',
                dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
                monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                showMonthAfterYear: true,
                yearSuffix: '年',
                changeYear: true,
                showAnim: 'fadeIn'
            }
            $(function () { $("#datepicker").datepicker(datepicker_option); });

        }
    }

    WinJS.Application.start();
})();


posted by at 2012-03-06 16:49 | Comment(0) | Windows8 Metro style | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX