Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.11.2010, 02:53
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

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

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



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

Последний раз редактировалось dr.5y51em, 25.11.2010 в 02:57. Причина: Уменьшил изображение :)
Ответить с цитированием
  #2 (permalink)  
Старый 25.11.2010, 03:52
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

Вот, попробовал расположить элементы, всё конечно хорошо, кроме одного, НО! При просмотре последнего третьего блока, вылазит край второго
Ах да, потом нужно будет убить горизонтальную полосу прокрутики...
<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 25.11.2010, 08:13
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

Сделал, кому интересно, можете посмотреть. Украшать по вкусу

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 25.11.2010, 10:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,076

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>
Ответить с цитированием
  #5 (permalink)  
Старый 25.11.2010, 15:50
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

Ой паисба больше... Я пока учусь постиг только азы jQuery, по этому большое человеческое спасибо.

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск