Hola soy tite.
Mi problema es el siguiente:
Kiero desarrollar una webb app, con el framework de DAvid Kaneda y el iScroll de Mateo Spinelli.
El problema está exactamente en el toolbar xk kisiera k kede fijo y lo demas pueda scrolearse, pero no e podido, ayudenme xfa xk llevo semanas intentando y nada...
y ya me urge terminarlo.
Acá el codigo:
<html>
<head>
<meta charset="UTF-8" />
<title>iMPRO</title>
<!--Define normas de diseño especificos para el iphone(animaciones,orientacion,ect) -->
<style type="text/css" media="screen">@import "jqtouch/jqtouch.css";</style>
<!--Define el tema de iphone-->
<style type="text/css" media="screen">@import "themes/apple/theme.min.css";</style>
<!--JQuery-->
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<!--J}Touch-->
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<!--Inicializacion del objeto JQTouch-->
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch
({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages:
[
'themes/jqt/img/back_button.png',
'themes/jqt/img/back_button_clicked.png',
'themes/jqt/img/button_clicked.png',
'themes/jqt/img/grayButton.png',
'themes/jqt/img/whiteButton.png',
'themes/jqt/img/loading.gif'
]
});
// Some sample Javascript functions:
$(function()
{
// Show a swipe event on swipe test
$('#swipeme').swipe(function(evt, data) {
$(this).html('You swiped <strong>' + data.direction + '</strong>!');
});
$('a[target="_blank"]').click(function() {
if (confirm('This link opens in a new window.')) {
return true;
} else {
$(this).removeClass('active');
return false;
}
});
// Page animation callback events
$('#pageevents').
bind('pageAnimationStart', function(e, info){
$(this).find('.info').append('Started animating ' + info.direction + '… ');
}).
bind('pageAnimationEnd', function(e, info){
$(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
});
// Page animations end with AJAX callback event, example 1 (load remote HTML only first time)
$('#callback').bind('pageAnimationEnd', function(e, info){
if (!$(this).data('loaded')) { // Make sure the data hasn't already been loaded (we'll set 'loaded' to true a couple lines further down)
$(this).append($('<div>Loading</div>'). // Append a placeholder in case the remote HTML takes its sweet time making it back
load('ajax.html .info', function() { // Overwrite the "Loading" placeholder text with the remote HTML
$(this).parent().data('loaded', true); // Set the 'loaded' var to true so we know not to re-load the HTML next time the #callback div animation ends
}));
}
});
// Cambia la orientacion de la pagina
$('body').bind('turn', function(e, data){
$('#orient').html('Orientation: ' + data.orientation);
});
});
</script>
</head>
<body>
<div id="Reportes">
<div class="toolbar">
<h1>Reportes</h1>
<a onClick="document.location='/iphone/logout.asp';" class="back">Logout</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#Ventas">
<img src="images/productos.png" style="text-align:center;vertical-align:middle;margin:0 auto;margin-right: 25px;margin-left: 10px;" />Ventas</a>
</li>
<li class="arrow"><a href="#Inventarios">
<img src="images/contactos.png" style="text-align:center;vertical-align:middle;margin:0 auto;margin-right: 25px;margin-left: 10px;" />Inventarios</a>
</li>
<li class="arrow"><a href="#Servicios">
<img src="images/servicios.jpg" style="text-align:center;vertical-align:middle;margin:0 auto;margin-right: 25px;margin-left: 10px;" WIDTH="74" HEIGHT="74">Servicios</a>
</li>
<li class="arrow"><a href="#Finanzas">
<img src="images/finanzas.jpg" style="text-align:center;vertical-align:middle;margin:0 auto;margin-right: 25px;margin-left: 10px;" WIDTH="74" HEIGHT="74">Finanzas</a>
</li>
</ul>
</div>
<div id="Ventas">
<div class="toolbar">
<h1>Ventas</h1>
<a href="#Reportes" class="back">Atras</a>
<a class="button slideup" href="#Reportes">Home</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#Ventasmes">Ventas del mes</a></li>
</ul>
</div>
<div id="Finanzas">
<div class="toolbar">
<h1>Finanzas</h1>
<a href="#" class="back">Atras</a>
<a class="button slideup" id="infoButton" href="#Reportes">Home</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#ResultadoMes">Resultado del Mes</a></li>
<li class="arrow"><a href="#ResultadoAcumulado">Resultado Acumulado</a></li>
</ul>
</div>
<div id="Servicios">
<div class="toolbar">
<h1>Filtros</h1>
<a href="#" class="back">Atras</a>
<a class="button slideup" id="infoButton" href="#Reportes">Home</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#OrdenServicio">Ordenes de servicio</a></li>
<li class="arrow"><a href="#Tableros">Proyectos</a></li>
</ul>
</div>
<!--RESULTADO DEL MES--->
<%
server.execute "reportes/ResultadoMes.asp"
%>
<!--RESULTADO ACUMULADO--->
<%
server.execute "reportes/ResultadoAcumulado.asp"
%>
<!--REPORTE DE VENTAS--->
<%
server.execute "reportes/ventasmes.asp"
%>
<!--REPORTE DE SERVICIOS--->
<%
server.execute "reportes/OrdenServicio.asp"
%>
<%
server.execute "reportes/Tableros.asp"
%>
<%
server.execute "reportes/Restaurant.asp"
%>
</body>
</html>
nota:
lo estoy desarrollando en asp y no tengo agregado el js de iscroll xk no se como lo tengo que agregar, y el css que define los estilos de la apariencia nativa del iphone es theme.css. entiendo que para utilizar el iscroll se deben especificar algunas normas para el css, el problema es que este proyecto de david kaneda es un framework y es muy compleja su herencia en el css y casi no lo entiendo.
lo que necesito es que el div con la clase toolbar quede fijo utilizando el js iscroll.
Espero me puedan ayudar gracias.