var itemPerPage = 4,
pageAmount;
$(document).ready(function()
{
pageAmount = Math.round($('.name').length / itemPerPage);
for(counter = 0; counter < pageAmount; counter++)
{
$('.navBtnWrapper').append
(
$(
'<div class="navBtn" data-pageIndex="' + counter + '">' +
(counter + 1) +
'</div>'
)
);
}
$('.navBtn').bind('click', navBtnHandler);
showPageData(0);
});
function navBtnHandler(event)
{
showPageData(parseInt($(this).data('pageindex')));
}
function showPageData(pageIndex)
{
$('.name').css({'display': 'none'});
$('.name').slice
(
(pageIndex * itemPerPage),
(pageIndex * itemPerPage) + itemPerPage
).css({'display': 'block'});
}
<div class="navBtnWrapper col-md-12"></div>
$('#popUpMessage').removeClass('hiddenDiv');
setTimeout(5000, function(){$('#popUpMessage').addClass('hiddenDiv');})
var someObj = {a:1,b:2};
var xhr = new XMLHttpRequest();
xhr.open('POST', 'scratch.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param=' + JSON.stringify(someObj));
xhr.onreadystatechange = function()
{
if (this.readyState == 4)
{
if (this.status == 200)
{
console.log(xhr.responseText);
}
else
{
console.log('ajax error');
}
}
};
$param = json_decode($_REQUEST["param"]);
$result = "Результат: a = ".$param->a."; b = ".$param->b;
die($result);
У меня вот так сделано в background.js:
var rootItem, translateItem;
function createContextMenu()
{
....
rootItem = chrome.contextMenus.create
(
{
id: "utilsExtRootMenuItem",
title: "Утилиты",
contexts: ["all"]
},
function(){}
);
translateItem = chrome.contextMenus.create
(
{
id: "utilsExtTranslateMenuItem",
parentId: rootItem,
title: "Перевести...",
contexts: ["all"],
onclick: translateWithWordReference
},
function(){}
);
....
}
function translateWithWordReference()
{
....
}
createContextMenu();
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.divItem
{
width: 200px;
height: 50px;
text-align: center;
border: 1px solid darkgray;
border-radius: 5px;
cursor: pointer;
}
.active
{
background-color: green;
}
</style>
</head>
<body>
<div class="divItem" id="item1">Item1</div>
<div class="divItem" id="item2">Item2</div>
<div class="divItem" id="item3">Item3</div>
<div class="divItem" id="item4">Item4</div>
</body>
<script type="text/javascript" src ="http://localhost/Script/js/jQuery/jquery-1.11.2.min.js">
</script>
<script type="text/javascript">
var funcHandlers = {};
function intervalHandle(id)
{
delete funcHandlers[id];
$('.divItem').removeClass('active');
$('#' + id).addClass('active');
}
function mouseIn(event)
{
var funcHandler = setTimeout(intervalHandle, 1000, $(this).attr('id'));
funcHandlers[$(this).attr('id')] = funcHandler;
}
function mouseOut(event)
{
$('.divItem').removeClass('active');
clearTimeout(funcHandlers[$(this).attr('id')]);
delete funcHandlers[$(this).attr('id')];
}
$(document).ready(function()
{
$('.divItem').bind('mouseenter', mouseIn);
$('.divItem').bind('mouseleave', mouseOut);
});
</script>
</html>
<!DOCTYPE HTML>
<html>
</head>
<body>
<div id="answerPlace"></div>
</body>
<script type="text/javascript" src ="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var myArray = [2, 23, 54, 79, 27, 99, 14];
var url = 'http://page-izbranni.php';
var answer;
$(document).ready(function()
{
$.ajax
({
url: url,
data:
{
checks: JSON.stringify(myArray)
},
success: function(response)
{
$('#answerPlace').children().remove();
$('#answerPlace').append(response);
},
error: function(error)
{
console.log('Ошибка');
console.log(error);
}
});
});
</script>
</html>
if(isset($_REQUEST['checks']))
{
echo "<pre>";
print_r(json_decode($_REQUEST['checks']));
echo "</pre>";
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>Player Demo</title>
<style>
.container
{
width: 1200px;
}
.content
{
width: 100px;
height: 100px;
display: block;
margin: 10px;
position: absolute;
background-color: red;
}
.readmore
{
position: absolute;
display: none;
margin: 10px;
width: 100px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="content" id="1">1</div>
<div class="content" id="2">2</div>
<div class="content" id="3">3</div>
<div class="content" id="4">4</div>
<div class="content" id="5">5</div>
<div class="content" id="6">6</div>
<div class="content" id="7">7</div>
<div class="content" id="8">8</div>
<div class="content" id="9">9</div>
<div class="readmore" id="q1">1</div>
<div class="readmore" id="q2">2</div>
<div class="readmore" id="q3">3</div>
<div class="readmore" id="q4">4</div>
<div class="readmore" id="q5">5</div>
<div class="readmore" id="q6">6</div>
<div class="readmore" id="q7">7</div>
<div class="readmore" id="q8">8</div>
<div class="readmore" id="q9">9</div>
</div>
</body>
<script type="text/javascript" src ="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var offsetX = 120,
offsetY = 10;
$('.content').each(function(index, item)
{
$(item).css({left: offsetX * index, top: offsetY});
$('.readmore[id=q' + (index + 1) + ']')
.css({left: offsetX * index, top: offsetY + 110});
});
$('.content').bind('mouseover', showDivContent);
$('.content').bind('mouseleave', hideDivContent);
});
function showDivContent(event)
{
$('.readmore[id=q' + $(this).attr('id') + ']')
.css({'display': 'block'});
}
function hideDivContent(event)
{
$('.readmore[id=q' + $(this).attr('id') + ']')
.css({'display': 'none'});
}
</script>
</html>