投稿の前に、私がまったく新しい jQuery ユーザーであるという警告を付けておきます。私は経験豊富なプログラマーです。1985 年に IBM System/34 でプログラミングを始めました。Web 開発を行ったのは過去 5 年間だけで、IBM System i を http サーバーとして使用しています。K-12 学校の願書作成 (出席、採点など)。
私は jQuery に恋をしました。これは、プログラミングの世界で出会った詩に最も近いものです。しかし、私はまだそれについて学ぶことがたくさんあります。
とにかく...私の問題に。（ところで：私はStackOverflowサイトとこのサイトの両方で広範囲に検索しましたが、私が抱えている問題への参照を見つけることができません。）
まず第一に、現時点では説明しませんが、私が書いているアプリケーションは Internet Explorer (および IE のみ) で実行する必要があります。
4 つのチェック ボックスを含むフォームで jQuery UI モーダル ダイアログを実装しました。ダイアログは IE10 (および Chrome) で問題なく動作します。ただし、IE10 互換表示または IE9 では、ダイアログのタイトル バーとダイアログの配置が正しく機能しません。何が起こっているかのスクリーンショットを次に示します。
http://i278.photobucket.com/albums/kk110/schryver1960/IE9-jquery-problem.jpg
ご覧のとおり、ダイアログのタイトルがダイアログの「タイトル バー」内に正しく表示されておらず、タイトル バーの「X」も表示されていません。また、ダイアログはウィンドウの中央に配置する必要がありますが、代わりに「左」、「上」に配置されているように見えます。position プロパティを定義しようとしましたが、ダイアログの配置に違いはありません。常にウィンドウの左上隅に配置されます。
画像に表示されているのは次のとおりです。「上部」ウィンドウは、メニュー バー (ホーム、メニュー、アクティブなど) までの「ヘッダー」部分です。一番上のウィンドウは iframe を定義し、その中にアプリケーション ウィンドウがあります。アプリケーション ウィンドウは、「ヘッダー」(列見出しまでのすべて) と「フッター」(「最初からやり直す」ボタンと「変更を送信」ボタンのあるバー) で構成されます。「サブファイル」の行と列は、アプリケーション ウィンドウ内で定義された iframe 内にあります。そのため、確認するには: iframe を使用したトップ ウィンドウ。独自の iframe を持つ、その iframe 内のアプリケーション ウィンドウ。学生コースは、その iframe 内の行を要求します。（それが理にかなっていることを願っています。）
ダイアログの div は、次のように、アプリケーション ウィンドウ (「Maintain Student Course Requests」というタイトル) を出力するページにコーディングされています。
<div id="schOptions" class="ui-widget">
<table width="270" border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td height="22" width="10"> </td>
<td width="220" class="stdLabel"</td>
<td width="20" align="center"><input name="PFILL" type="checkbox" id="PFILL" value="Y"></td>
<td width="10"> </td>
</tr>
<tr valign="middle">
<td height="22"> </td>
<td class="stdLabel">Use Alternate Match Groups?</td>
<td align="center"><input type="checkbox" name="PMGN" id="PMGN" value="Y"></td>
<td> </td>
</tr>
<tr valign="middle">
<td height="22"> </td>
<td class="stdLabel">Schedule Study Hall?</td>
<td align="center"><input type="checkbox" name="PSTUDY" id="PSTUDY" value="Y"></td>
<td> </td>
</tr>
<tr valign="middle">
<td height="22"> </td>
<td class="stdLabel">Reset Previous Requests?</td>
<td align="center"><input type="checkbox" name="PRESET" id="PRESET" value="Y"></td>
<td> </td>
</tr>
</table>
ダイアログを初期化するコードは次のとおりです。
<script type="text/javascript" language="javascript">
/*====================
* jQuery Ready Shell
*====================*/
$(document).ready(function() {
/*=====================================
* Initialize Scheduler Options Dialog
*=====================================*/
$('#schOptions').dialog({
autoOpen: false,
title: "Scheduler Options",
modal: true,
buttons: [{
text: "Cancel",
click: function() {
// Close dialog
$(this).dialog("close");
} // End "click" event function
}, // End "Cancel" button definition
{
text: "Process",
click: function() {
// Process scheduler
processScheduler();
// Close dialog
$(this).dialog("close");
} // End "click" event function
}] // End "Process" button definition
}); // End #schOptions dialog definition
}); // End Ready Shell
</script>
かなり単純明快なように思えます。そして、すでに述べたように、Chrome と IE10 ではすべて正常に動作しますが、IE10 互換ビューでも IE9 でも動作しません。残念ながら、ユーザーに IE10 にアップデートするように言うことはできません。実際、IE10 がアプリケーションにもたらす他の問題のため、現時点では IE10 を使用することさえできません。したがって、ほとんどのユーザー (1 日の特定の瞬間に数千人いる) は、実際には互換表示で IE10 を使用しています。
何か案は？
ありがとう。
編集して追加:
これは重要かもしれませんが、上記で言及するのを怠りました。Google CDN 経由で .css および .js ライブラリを取得しています。当分の間、「滑らかさ」テーマを使用します (ただし、近いうちにカスタム テーマに移行することは間違いありません)。そのコードは次のとおりです。
<!-- jQuery Style Sheet (Theme: Smoothness) -->
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<!-- jQuery and jQuery-ui -->
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
ちなみに、ダイアログは、ウィンドウの左上隅に表示されるボタンによって開かれます。
関連するコードは次のとおりです。
<a name="RunScheduler" href="javascript: promptScheduler();"
class="buttonLink">Run Scheduler</a>
/*=================================================
* promptScheduler -- Prompt for Scheduler Options
*=================================================*/
function promptScheduler() {
$("#schOptions").dialog("open");
}
また、ウィンドウの背景領域に対するモーダル ダイアログの「シェーディング」効果や、ダイアログ ウィンドウのその他のスタイル プロパティが機能しません。ダイアログ ウィンドウの配置プロパティを含め、スタイル クラスのセット全体が正しく適用されていないように見えます。問題はなぜですか？一部の .css プロパティが有効になっているようです 。