過去数日から、Firefox と Chrome ではすべてが完璧なのに、IE9 では Jqwidgets の見栄えがよくない理由を突き止めるために、私は髪を引っ張っています。
Firefox (バージョン-34.0.1) の場合
Chrome の場合 (バージョン 40.0.2214.115)
IE の場合 (バージョン 9.0.8112)
ツールバーは特にひどいように見えますが、
$("#jqxToolBar").jqxToolBar({
tools: 'custom | dropdownlist | custom | dropdownlist | custom | button | button | custom',
initTools: function (type, index, tool, menuToolIninitialization) {
switch (index) {
case 0:
tool.append("<div style='font-weight: bold;padding: 3px;'>Select Level :</div>");
break;
case 1:
var levelsource = <Computed Value>;
tool.jqxDropDownList({ width: 200, source: levelsource, placeHolder: "Select..."});
if (menuToolIninitialization === false) {
dropdownlist1 = tool;
} else {
dropdownlist1Min = tool;
}
break;
case 2:
tool.append("<div style='font-weight: bold;padding: 3px;'>Select :</div>");
break;
tool.append("<div style='padding: 3px;'></div>");
// tool.append("<div style='font-weight: bold;'>Select</div>");
// dropdownlist1.add(dropdownlist1Min).on('select', function (event) {
// tool.append("<div style='font-weight: bold;'>Select "+event.args.item.label+"</div>");
// });
break;
case 3:
var resultsource = <Computed Value>;
tool.jqxDropDownList({ width: 200, source: [], placeHolder: "Select..."});
if (menuToolIninitialization === false) {
dropdownlist2 = tool;
} else {
dropdownlist2Min = tool;
}
break;
case 4:
tool.append("<div style='padding: 10px;'></div>");
break;
case 5:
tool.jqxButton({ width: '80px',template: "success"});
tool.text("Apply filter");
tool.click(function() {
if(dropdownlist1.jqxDropDownList('getSelectedItem')!=null )
{
if(dropdownlist2.jqxDropDownList('getSelectedItem')!=null )
{
var datafield= dropdownlist1.jqxDropDownList('getSelectedItem').value;
switch (datafield)
{
case "Vessel":
applyFilter("opcenter");
break;
case "Project":
applyFilter("project_name");
break;
case "Region":
applyFilter("region");
break;
case "Client":
applyFilter("client");
break;
case "Maritime Manager":
applyFilter("maritimemanager");
break;
case "Global":
$("#jqxgrid").jqxGrid('clearfilters');
// $("#jqxgrid").jqxGrid({ source: getAdapter() });
break;
}
}
}
return false;
});
break;
case 6:
tool.jqxButton({ width: '80px',template: "info"});
tool.text("Clear filter");
tool.click(function() {
$("#jqxgrid").jqxGrid('clearfilters');
//dropdownlist1.jqxDropDownList({ selectedIndex: -1 });
//dropdownlist2.jqxDropDownList({ selectedIndex: -1 });
return false;
});
break;
case 7:
tool.jqxListBox({source: listSource, width: '100%', height: 300, checkboxes: true });
if (menuToolIninitialization === false) {
listbox= tool;
} else {
listboxMin= tool;
}
break;
}
}
});
私のhtml、
<body class="default">
<table id='jqxWidget' border="0">
<tr>
<td>
<div id="jqxToolBar">
</div>
</td>
</tr>
<tr>
<td>
<div id='jqxExpander'>
<div>Date filter</div>
<div>
<table border="0" >
<tr>
<td><b>Start date : </b></td>
<td id="jqxStDtWidget"></td>
<td><b>End date :</b></td>
<td id="jqxEnDtWidget"></td>
<td> </td>
<td id="jqxDateFilterWidget"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input type="button" id='jqxApplyFilterButton' value="Apply filter" /></td>
<td><input type="button" id='jqxClearFilterButton' value="Clear filter" /></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="float: left;" id="jqxgrid"></div>
</td>
</tr>
IE9 でこのような奇妙な動作に遭遇した人はいますか?
編集: 日付ピッカーのサイズが Firefox と Chrome で異なる理由を調べるために私がテストしたもう 1 つのことと、調査したところ、異なるブラウザーの同じピッカーに異なる css が適用されていることがわかりました。なぜ何か考えはありますか？
