如果我提出基本问题,请原谅我。我是javascript的新手..
我正在尝试创建一个对话框,动态创建一个复选框列表以显示在此对话框中,每个用户请求显示一个复选框。 如果复选框的数量从定义的宽度增加,则对话框应该有一个滚动条以滚动。 我能够创建对话框(虽然不是一个非常优雅的解决方案),但有一个问题......
如果我尝试按住滚动条并移动它,则Windows资源管理器9中出现的对话框有一个不移动的滚动条。在Firefox上工作得很好..
感谢任何帮助..
代码:
function filterLocationDisplay()
{
destroyElement(FILTER_TABLE_ID);
var clientPrefs = [
{"MSISDN":"0", "display":true},
{"MSISDN":"1", "display":false},
{"MSISDN":"2", "display":true},
{"MSISDN":"3", "display":false},
{"MSISDN":"4", "display":true},
{"MSISDN":"5", "display":false},
{"MSISDN":"6", "display":true},
{"MSISDN":"7", "display":false},
{"MSISDN":"8", "display":false},
{"MSISDN":"9", "display":false},
{"MSISDN":"10", "display":true},
{"MSISDN":"20", "display":false},
{"MSISDN":"30", "display":false},
{"MSISDN":"40", "display":false},
{"MSISDN":"50", "display":true},
{"MSISDN":"60", "display":false},
{"MSISDN":"70", "display":true},
{"MSISDN":"000", "display":true},
{"MSISDN":"100", "display":false},
{"MSISDN":"200", "display":true},
{"MSISDN":"300", "display":false},
{"MSISDN":"400", "display":true},
{"MSISDN":"500", "display":false},
{"MSISDN":"600", "display":true},
{"MSISDN":"700", "display":false},
{"MSISDN":"800", "display":false},
{"MSISDN":"900", "display":false},
{"MSISDN":"1000", "display":true},
{"MSISDN":"2000", "display":false},
{"MSISDN":"3000", "display":false},
{"MSISDN":"4000", "display":false},
{"MSISDN":"5000", "display":true},
{"MSISDN":"6000", "display":false},
{"MSISDN":"7000", "display":true},
{"MSISDN":"8000", "display":false}
];
var cbFilterDivRef;
var cbDialogRef;
if(undefined == dojo.byId("filterDivID") || null == dojo.byId("filterDivID"))
{
var filterDivSubmitButton = new dijit.form.Button(
{
type:"submit",
label:"Submit",
name:"filterPrefsSubmitButton",
id:"filterPrefsSubmitButtonId",
dojoType: "dijit.form.Button",
onClick:function () { onFilterSubmit("submit");
}});
var filterDivSelectAllButtonRef = new dijit.form.Button(
{
type:"button",
label:"Select all",
name:"filterPrefsSelectAllButton",
id:"filterPrefsSelectAllButtonId",
dojoType: "dijit.form.Button",
onClick:function () { onFilterSubmit("all");
}});
var filterDivSelectNoneButtonRef = new dijit.form.Button(
{
type:"button",
label:"Unselect all",
name:"filterPrefsSelectNoneButton",
id:"filterPrefsSelectNoneButtonId",
dojoType: "dijit.form.Button",
onClick:function () { onFilterSubmit("none");
}});
cbFilterDivRef = dojo.create("div",
{
id: "filterDivID" ,
style: {"overflow": "scroll",
"overflow": "scroll",
"width": "350px",
"height": "400px"},
}, dojo.byId("hiddenDiv"), "first");
filterDivSelectAllButtonRef.placeAt(cbFilterDivRef, "last");
filterDivSelectNoneButtonRef.placeAt(cbFilterDivRef, "last");
filterDivSubmitButton.placeAt(cbFilterDivRef, "last");
}
else {
cbFilterDivRef = dojo.byId("filterDivID");
}
if(undefined == dojo.byId("FilterDlgID") || null == dojo.byId("FilterDlgID"))
{
cbDialogRef = new dijit.Dialog({
title: "Please select the assets to be displayed",
id:"FilterDlgID",
style:{"border": "3px groove", "overflow": "none"},
content:cbFilterDivRef,
autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog
refocus: !dojo.isIE
});
}
else {
cbDialogRef = dijit.byId("FilterDlgID");
}
var filterTable = dojo.create("table",
{
id:FILTER_TABLE_ID,
name:FILTER_TABLE_ID,
style:{"position":"relative"}
},
cbFilterDivRef, "first");
for (var msisdnNo = 0; msisdnNo < clientPrefs.length ; ++msisdnNo)
{
var row = filterTable.insertRow(filterTable.rows.length);// create a table to contain the checkbox
// and Asset ID.
var assetId = clientPrefs[msisdnNo].MSISDN;
var checkBoxCell = row.insertCell(0); checkBoxCell.setAttribute("id", assetId+".cell");
var assetIdCell = row.insertCell(1); assetIdCell.innerHTML = assetId;
var checkBox = dijit.byId(assetId+ID_CB_SUFFIX) ;
//destroy the checkBox widget .. if its created..
if (null != checkBox || undefined != checkBox )
{
checkBox.destroy();
}
checkBox = new dijit.form.CheckBox({
id: assetId+ID_CB_SUFFIX,
name: assetId,
value: "true"
});
checkBox.setChecked(clientPrefs[msisdnNo].display);
checkBox.placeAt(assetId+".cell", "first");
}
cbDialogRef.show();
}
/**
*
*/
function onFilterSubmit(option)
{
var filterTable = dojo.byId(FILTER_TABLE_ID); //document.getElementById(FILTER_TABLE_ID);
if(null == filterTable || undefined == filterTable)
{
return false;
}
// get the list of checkboxes xhc
var checkBoxesList = null;
if("submit" != option) {
checkBoxesList = dojo.query('input[type="checkbox"]', FILTER_TABLE_ID);
}
else {
checkBoxesList = dojo.query('input:checked', FILTER_TABLE_ID);
}
alert(checkBoxesList.length);
var returnObject = new Array();
var assetCount = 0;
for(var assetCount =0 ; assetCount < checkBoxesList.length; assetCount++)
{
var assetDisplayPrefCb = dijit.getEnclosingWidget(checkBoxesList[assetCount]);
var assetId = assetDisplayPrefCb.get("name");
switch (option) {
case "all":
{
assetDisplayPrefCb.setChecked(true);
break;
}
case "none":
{
assetDisplayPrefCb.setChecked(false);
break;
}
case "submit":
default:
{
returnObject[assetCount] = new Object();
returnObject[assetCount].assetId = assetId;
returnObject[assetCount].display = assetDisplayPrefCb.getValue("checked");//checked;
}
}
}
alert("returnObject.length == " + returnObject.length);
return returnObject;
}// onSubmit(option)
答案 0 :(得分:0)
我在这个代码片段中发现了一些语法错误(参见注释)。我不是说它会解决滚动问题,但它们应该被修复了......
cbFilterDivRef = dojo.create("div",{
id: "filterDivID",
style: {"overflow": "scroll",
"overflow": "scroll", //remove duplicate
"width": "350px",
"height": "400px"
}, //remove comma after bracket
},
dojo.byId("hiddenDiv"), "first");