Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jQuery - превращаем интерфейс, в нечто похожее на Google Android на HTC Hero (https://javascript.ru/forum/jquery/13304-jquery-prevrashhaem-interfejjs-v-nechto-pokhozhee-na-google-android-na-htc-hero.html)

dr.5y51em 25.11.2010 02:53
jQuery - превращаем интерфейс, в нечто похожее на Google Android на HTC Hero
 
Доброго времени суток. Дизайнер и аккаунт менеджер, расписали заказчику эффектную реализацию просмотра страниц сайта. Подход действительно интересный, но как реализовать пока, что не пойму. Необходимо сделать, нечто на подобии нескольких рабочих столов (кто пользовался linux, тот поймёт). Нечто подобное реализовано, на коммуникаторе HTC Hero с ОС Google Android, кто не понял о чём я, может посмотреть видео.

Сейчас попробую нарисовать схему, того, как это должно выглядеть на сайте.



Смысл такой, каждый экран, это DIV 1, DIV 2, DIV 3 (width:960px). Размещённые в блоке DIV 4. Жёлтая область, это область которую видит пользователь. Так вот, при нажатии, мне нужно смещать блоки, в право или лево, на такое расстояние, что бы соседний блок не "выглядывал" из-за карая экрана, ну и желательно перемещение сделать плавным. Вот как то так, поделитесь хотя бы идеями пожалуйста. :help:

dr.5y51em 25.11.2010 03:52
Вот, попробовал расположить элементы, всё конечно хорошо, кроме одного, НО! При просмотре последнего третьего блока, вылазит край второго :(
Ах да, потом нужно будет убить горизонтальную полосу прокрутики... :-E 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
<!--


$(document).ready(function(){

	$('#bg').css('width', ($(window).width() - $('div._div').width())*6+'px');
	$('div._div').css('margin-left', ($(window).width() - $('div._div').width())/2 + 'px');
});


-->
</script>
<style type="text/css">
._div {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	font-weight: bold;
	background-color: #999;
	border: 1px solid #000;
	width: 960px;
	display:inline-block;
	min-height:700px;
}
#bg {
	background-color: #00F;
	border: 1px solid #000;
	min-height:768px;
}
</style>
</head>

<body>
    <div id="bg">
        <div class="_div" id="div1">div 1</div>
        <div class="_div" id="div2">div 2</div>
        <div class="_div" id="div3">div 3</div>
    </div>
</body>
</html>

dr.5y51em 25.11.2010 08:13
Сделал, кому интересно, можете посмотреть. Украшать по вкусу :)

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
<!--
$(document).ready(function(){
	//$('div._div').css('width', '960px');
	$('#bg').css('width', $(window).width()*3+10+'px');
	$('#screen').css('width', $(window).width()+'px');
	$('#div1').css('margin-left', ($(window).width() - $('div._div').width())/2+'px');
	$('#div2').css('margin-left', ($(window).width() - $('div._div').width()) + 'px');
	$('#div3').css('margin-left', ($(window).width() - $('div._div').width()) + 'px');
});
function goleft1()
{
	$("#bg").animate({ 
    marginLeft: '-'+$(window).width()-6+'px'
  }, 1500 );
};
function goleft2()
{
	$("#bg").animate({ 
    marginLeft: '-'+$(window).width()-$(window).width()-12+'px'
  }, 1500 );
};
function gorigth1()
{
	$("#bg").animate({ 
    marginLeft: '0px'
  }, 1500 );
};
function gorigth2()
{
	$("#bg").animate({ 
    marginLeft: '-'+$(window).width()-6+'px'
  }, 1500 );
};
-->
</script>
<style type="text/css">
html body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	clip: rect(0px,auto,auto,0px);	
}
._div {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	font-weight: bold;
	background-color: #999;
	border: 1px solid #000;
	width: 960px;
	display:inline-block;
	min-height:700px;
	position: relative;
}
#bg {
	background-color: #00F;
	border: 1px solid #000;
	min-height:768px;
	z-index:1;
}
#screen {
	position: fixed;
	min-width: 768px;
	z-index:2;
}
</style>
</head>

<body>
<div id="screen">
    <div id="bg">
        <div class="_div" id="div1">div 1 <a href="#" onclick="goleft1();">Туды =&gt;</a></div>
        <div class="_div" id="div2"><a href="#" onclick="gorigth1();">&lt;= Сюды</a> div 2 <a href="#" onclick="goleft2();">Туды =&gt;</a></div>
        <div class="_div" id="div3"><a href="#" onclick="gorigth2();">&lt;= Сюды</a> div 3</div>
    </div>
</div>
</body>
</html>

рони 25.11.2010 10:37
dr.5y51em,
тоже самое с интуитивной тудемой сюдемой ))) и для любого количества блоков
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
}

#bg {
    background: #00FF00;
    position: absolute;
    overflow: hidden;
    }
#show{
    position: absolute;
    overflow: hidden;
    background: #FFFF00;
    overflow: hidden;
    }
._div{
    border: 4px solid #000;
    background: blue;
    color: white;
    text-align: center;
    width: 700px;
    height: 700px;
    float: left;
    }
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var b = 4;//величина бордюра ._div
    $('#bg').css({'width': $(window).width(),'height':$(window).height()});
    $('#show').css('width', $('#bg').width()*$('div._div').length);
    $('._div').css({'margin-left':($('#bg').width() - $('div._div').width())/2-b*2,
    'margin-right':($('#bg').width() - $('div._div').width())/2  } );
    $('._div').css('height', $(window).height()-b*2);
    function go(n){
      $('#show').animate({"left":n+"="+$('#bg').width()},1000);
    }
    $('._div').not(":first,:last").click( function(event){
    if(event.pageX>$(window).width()/2){go("-")}
    else {go("+")};});
    $('._div:first').click(function(){go("-")});
    $('._div:last').click( function(){go("+")});
});
</script>
</head>
<body>
<div id="bg">
     <div id="show">
    <div class="_div" id="div1">div 1</div>
    <div class="_div" id="div2">div 2</div>
    <div class="_div" id="div3">div 3</div>
    <div class="_div" id="div4">div 4</div>
    <div class="_div" id="div5">div 5</div>
    <div class="_div" id="div6">div 6</div>
    </div>
</div>
</body>
</html>

dr.5y51em 25.11.2010 15:50
Ой паисба больше... Я пока учусь постиг только азы jQuery, по этому большое человеческое спасибо.

попробую сделать плагин =)


Часовой пояс GMT +3, время: 14:40.