Office365 (Sharepoint online) 内でjqueryを使用する。(Sharepoint Designer)

Office365 (Sharepoint online) 内でjqueryを使用する。(Sharepoint Designer) モーダルダイアログのサンプルです。

Sharepoint Designer(シェアポイントデザイナー)で新規作成 test.aspx を作成します。以下のプログラムのように修正します。

Jqueryは以下からダウンロードしてSharepoint Designer でUploadしてください。

http://jquery.com/ http://jqueryui.com/

プログラム(IE9でうごきません。後で調べます。) default.aspx にIEのWindowsの作成JavaScriptを追加する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Jaquey</title>
</head>

<body>

    <link href="/XXXXX/jquery/css/ui-lightness/jquery-ui-1.9.1.custom.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/XXXXX/jquery/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/XXXXX/jquery/js/jquery-ui-1.9.1.custom.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dialog-modal").dialog({
                modal: true,
                autoOpen: false,
                buttons: {
                    Ok: function () {
                        $(this).dialog("close");
                    }
                }
            });
            $("#show-dialog").click(function () {
                $("#dialog-modal").dialog("open");
            });

        });
    </script>
    <div id="dialog-modal" title="Modal Dialog">
        <p>jquery modal dialog sample</p>
    </div>
    <input type="button" id="show-dialog" value="Display Dialog">

</body>

</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です