Salve sto utilizzando da poco jquery e infatti alcune cose non mi sono chiare.
Ho scaricato tutto il framework di jquery e sto provando i messaggi.
Ho implementato l'esempio per il dialog in una pagina asp normalissima e funziona alla perfezione:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Pagina senza titolo</title>
<link type="text/css" href="js/jquery/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="js/jquery/ui/ui.dialog.js"></script>
<script type="text/javascript" src="js/jquery/external/bgiframe/jquery.bgiframe.js"></script>
<link type="text/css" href="css/jquery/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<div id="dialog" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a target="_blank" href="http://example.com" rel="nofollow">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->
</form>
</body>
</html>
Poi siccome che prevedo di utilizzare delle master page all'interno dei miei progetti ho inserito i link nella master page:
<link type="text/css" href="../js/jquery/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../js/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="../js/jquery/ui/ui.dialog.js"></script>
<script type="text/javascript" src="../js/jquery/external/bgiframe/jquery.bgiframe.js"></script>
<link type="text/css" href="../css/jquery/demos.css" rel="stylesheet" />
e nella pagina che richiama la master page ho inserito lo stesso identico div della pagina senza master page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login"
MasterPageFile="Master/MasterPageSorpassoWeb.master" %>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ContentPlaceHolderMain">
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
});
</script>
<table id="MyCorpo" width="100%" cellpadding="0" cellspacing="0" style="padding-top: 30px" class="tdSfondoLogin">
<tr>
<td >
<asp:Panel ID="panelLogin" runat="server">
<table cellpadding="0" cellspacing="0" width="100%">
<tr class="trRowTitoloFunzione">
<td class="tdRowTitoloFunzione">
Accesso utente
</td>
</tr>
<tr >
<td class="BoxDati">
<table width="100%" cellpadding="3" cellspacing="3">
<tr>
<td width="100">
<asp:Label ID="lbl_codice_cliente" Text="Codice cliente" Width="100" CssClass="label"
runat="server"></asp:Label>
</td>
<td>
<asp:TextBox ID="txt_codice_cliente" CssClass="textboxTxt" Width="200" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbl_login" Text="Nome utente" Width="100" CssClass="label"
runat="server"></asp:Label>
</td>
<td>
<asp:TextBox ID="txt_login" CssClass="textboxTxt" Width="200" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbl_password" Text="Password" Width="100" CssClass="label"
runat="server"></asp:Label>
</td>
<td>
<asp:TextBox ID="txt_password" CssClass="textboxTxt" Width="200" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td align="right" width="200">
<asp:Button ID="btn_Entra" CssClass="bottone" runat="server" Text="Entra"
onclick="btn_Entra_Click" />
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr class="trRowSeparatorePagina">
<td class="tdRowTitoloFunzione">
<asp:LinkButton ID="lnk_DimenticatoPassword" runat="server">>>Hai dimenticato la password?</asp:LinkButton>
</td>
</tr>
</table>
</asp:Panel>
<div id="Div1" title="Basic dialog" >
</div>
</td>
</tr>
<tr><td height="280">
</td></tr>
</table>
<div class="demo">
<div id="dialog" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a target="_blank" href="http://example.com" rel="nofollow">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->
</asp:Content>
al load della pagina mi da errore nella funzione dialog dicendo previsto oggetto.
Perchè dove sbaglio?
Sviluppare applicazioni web mobile con HTML5 e jQuery mobile