選択したインデックスの変更時にページ上の他のコンテンツを駆動する必要があるため、更新パネル内にドロップダウン リストがあります。
ただし、モバイルのルック アンド フィールを適用しようとしています。最初は JQuery Mobile を試しましたが、セッション情報の処理方法が原因で、ページの ajax を無効にする必要があり、その結果、サイトが非常に遅くなりました。
それ以来、私が見つけたいくつかのJavaScriptを適用しようとしました。これにより、ドロップダウンの不透明度が0になり、その上にスパンが配置され、テキストと背景画像が表示されます。画像はカスタムルックドロップダウンのように見えます. これを行うためにページ上のすべての選択タグを取得し、テキストを現在選択されているオプション タグに設定します。これは、ドロップダウン リストであっても、html にとっては、いくつかのオプションを使用した選択にすぎないためです。
私の問題は、選択したインデックスが変更されたときの部分的なポストバックで、JavaScript が対象のドロップダウンから削除されることです。部分的なポストバック時に JavaScript を再適用できる方法を見つけようとしています。
私は、C#コードビハインドを使用してasp.netでコーディングしています。私はjqueryを使用していません。できれば使用したくありません。純粋なjavascriptを使用したいだけです。
私がjquery mobileを試したとき、同じ問題があり、コードビハインドのページロードでこれが修正されました:
ScriptManager.RegisterStartupScript(Page, GetType(), "temp", "<script type='text/javascript'>$('select').trigger('create');</script>", false);
それ以来、同じ場所でこれを試しました：
ScriptManager.RegisterClientScriptInclude(this, GetType(), "specialCombo", ResolveUrl("~") + "Js/test.js");
また、これはマスターページの先頭にあります：
<script type="text/javascript">
//On Page Load
window.onload = function () {
require("~/Js/test.js");
};
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
require("~/Js/test.js");
}
});
};
function require(url) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
head.appendChild(script);
}
</script>
また、Sys が定義されていないというエラーが発生したため、booking.aspx コードにあるスクリプト マネージャーの下に配置しました。これらのどちらも機能しませんでした。
以下は、HTML スニペット、使用している JS ファイル、および挿入された JS に適用された css です。
どんな助けでもいただければ幸いです
HTML
頭の中はこれ
<script language="javascript" src="Js/test.js"></script>
するとこれが体内で
<asp:UpdatePanel ID="f_NightsUpdatePanel" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="f_Nights" runat="server" CssClass="inputComboHomePage" AutoPostBack="True" OnSelectedIndexChanged="f_Nights_SelectedIndexChanged">
<asp:ListItem Text="1" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
<asp:ListItem Text="3" Value="3"></asp:ListItem>
<asp:ListItem Text="4" Value="4"></asp:ListItem>
<asp:ListItem Text="5" Value="5"></asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
JAVASCRIPT – JS/test.js
var selectWidth = "190";
document.write('<style type="text/css">select.inputComboHomePage { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
init: function () {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
inputs = document.getElementsByTagName("select");
for (a = 0; a < inputs.length; a++) {
if (inputs[a].className == "inputComboHomePage") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for (b = 0; b < option.length; b++) {
if (option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "inputComboHomePage2";
if (inputs[a].name == "ctl00$Main$f_RoomGroup1" || inputs[a].name == "ctl00$Main$f_BoardType1") {
span[a].style.color = 'gray';
}
span[a].id = "inputComboHomePage2" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
if (!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
}
}
document.onmouseup = Custom.clear;
},
choose: function () {
option = this.getElementsByTagName("option");
for (d = 0; d < option.length; d++) {
if (option[d].selected == true) {
document.getElementById("inputComboHomePage2" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
if (this.name == "ctl00$Main$f_Nights") {
__doPostBack('__Page', 'MyCustomArgument');
}
}
}
window.onload = Custom.init;
最後に手動のポストバックがあり、ページを強制的にポストバックさせ、関連するコントロールだけで selectedindexchanged イベントを発生させます
CSS
.inputComboHomePage2
{
position: absolute;
width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(Images/select.png) no-repeat;
overflow: hidden;
}