Как скользить довольный открытие с jQuery
Взгляните на Цербер (не путать с Kerberos) http://docs.python-cerberus.org/en/stable/usage.html#basic-usage
[112 ] Все, что вы хотите, и даже больше - проверка данных JSON общего назначения и применение схем.
3 ответа
Можно усилить JQuery UI 1.6's Эффекты (Страница Демонстрации Эффектов). Следующее выполнило желаемый эффект для меня.
$('#toggleButton').bind('click', function(e) {
$('#expandingFooter').toggle(
'slide',
{ easing: 'easeOutQuint', direction: 'down' },
1000
);
});
Примечание: Можно хотеть играть с параметром упрощения для получения желаемой гладкости эффекта.
У Вас должны будут быть последние версии и JQuery и JQuery Эффект слайда UI, чтобы сделать это.
Попробуйте что-то вроде этого:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="shared-scripts/jquery-1.2.4b.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#footer").click(function () {
if ($("#expandingFooter").is(":hidden")) {
$("#expandingFooter").show("slow");
} else {
$("#expandingFooter").slideUp();
}
});
$("#expandingFooter").hide();
});
//--></script>
</head>
<body>
<div id="footer">
<div id="expandingFooter"> hidden content</div>
content that is always visible
</div>
</body>
</html>
Моим решением является что-то вроде приема. slideUp () функция путем, которую Вы хотите, не является сборкой в JQuery, потому что способ, которым можно достигнуть его, зависит от дизайна html/css. Нормальный поток сверху донизу.
Я предлагаю это:
<a id="toggle">Toggle()</a>
<div id="slide" style="position:relative; height: 100px">
<div id="slideInner" style="position:absolute; bottom: 0; background: lightblue"">
<p>Suspendisse potenti. Vivamus libero. Dummy Text</p>
</div>
</div>
<script type="text/javascript">
$('.hoverable').hover( function() { $(this).find("div").show(); },
function() { $(this).find("div").hide(); } );
$('#toggle').click(function () {
$('#slideInner').slideToggle();
});
</script>
Этот код является просто примером. Переместите встроенную CSS во внешний лист. То же самое для JavaScript.
Если Вы хотите отделение 'слайда' к disapeare, добавьте обратный вызов к slideToggle () функция, которую вызов скрывает () на отделении 'слайда'.