Форум

Объявление

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Форум » Тестовый форум » Скрипт:

Скрипт:

Страница: 1

Сообщений 1 страница 3 из 3

1

  • Автор: Admin
  • Зарегистрирован: 2011-04-25
  • Приглашений: 0
  • Сообщений: 50
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    19 часов 27 минут
  • Последний визит:
    2011-06-08 22:10:17

Стили для панели переключателей:

Код:
<style> 
.controls ul, .controls li { margin:0px; padding:0px; list-style:none; display:inline }
.controls li a:link, .controls li a:visited { float:right; display:block; height:15px; width:15px; text-indent:-9999px; overflow:hidden; margin-left:10px; }
.controls li a.switch_780 { background-image:url(http://upforme.ru/uploads/000f/40/fc/87-1.jpg); }
.controls li a.switch_980 { background-image:url(http://upforme.ru/uploads/000f/40/fc/87-2.jpg); }
.controls li a.switch_fluid { background-image:url(http://upforme.ru/uploads/000f/40/fc/87-3.jpg); }
.controls li a.select{border:solid 1px #cc0000; width:14px; height:14px;}
</style>

Панель переключателей:

Код:
<div class="controls">
<ul>
<li><a href="#" class="switch_fluid">100%</a></li>
<li><a href="#" class="switch_980">980</a></li>
<li><a href="#" class="switch_780">780</a></li>
</ul>
</div>

Сам скрипт:

Код:
<script type="text/javascript">
$(document).ready(function(){
$("a.switch_780").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div#pun").animate({width: 780}, 'slow', function() {;
});
});
$("a.switch_980").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div#pun").animate({width: 980}, 'slow', function() {;
});
});
$("a.switch_fluid").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div#pun").animate({width: '100%'}, 'slow', function() {;
});
});
});
</script>

В старых ИЕ анимация не работает

0

2

  • Автор: Admin
  • Зарегистрирован: 2011-04-25
  • Приглашений: 0
  • Сообщений: 50
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    19 часов 27 минут
  • Последний визит:
    2011-06-08 22:10:17

Без Аниамации (т.к.Анимация не работает в старых ИЕ)

Код:
<style> 
.controls ul, .controls li { margin:0px; padding:0px; list-style:none; display:inline }
.controls li{float:right;  height:15px; width:15px; margin-left:10px; }
.controls li.select{border:solid 1px #cc0000; width:14px; height:14px;}
</style>
<!--<style id="setPunWidth">#pun{width:870px;}</style>-->
<style>#pun{margin:0 auto;}</style>

<div class="controls">
<ul>
<li class="switch_fluid" alt="100%"><img src="http://upforme.ru/uploads/000f/40/fc/87-3.jpg"  title="Forum width:100%"/></li>
<li class="switch_980" alt="980px"><img src="http://upforme.ru/uploads/000f/40/fc/87-2.jpg"  title="Forum width:980px"></li>
<li class="switch_780" alt="780px"><img src="http://upforme.ru/uploads/000f/40/fc/87-3.jpg"  title="Forum width:780px"></li>
</ul>
</div>
<script src="http://i.ucof.ru/f/ru/ucof/CookieAdm.js"></script>
<script type="text/javascript">
var setTimeEdit=24 //Время (в днях) максимального существования коки без входа юзера
$(document).ready(function() {
$("li[class^='switch_']").click(function () {
$("div.controls li").removeClass("select");
$(this).addClass("select");//alert($(this).attr("alt"))
//$("div#pun").animate({width: $(this).attr("alt")}, 'slow') //Анимацию убрал - не работает в старых ИЕ
$("#pun").css({"width":$(this).attr("alt")})
});
  $(".controls li[class^='switch_']").mouseover(function(){
    }).mouseout(function(){
if($(this).hasClass("select")==true) { //
var cls=$(this).attr("class").split(" "); //alert(cls[0])//Выясняем класс(switch_) активной кнопки
setCookieAdm(UserLogin+"switch_№",cls[0],setTimeEdit*24*60*60*1000)}
    });
//=============================== Конец Подфункций ===================================//

var s=getCookieAdm(UserLogin+"switch_№"); //alert(s) //cчитываем кук бывшей активной кнопки

if(s!=false){ 	//Проверяем - Кук - есть ?;

setCookieAdm(UserLogin+"switch_№",s,setTimeEdit*24*60*60*1000); //Перезаписываем для продления по времени
$("div.controls li."+s).click(); 	//alert("Click")//Кликаем и переустанавливаем кнопу
}
});
</script>

ЗЫ: ширину просто прописываем просто в ALT(е) к LI с соответствующей кнопкой, кнопок добавляем скок надо - я бы вообще сделал двигающуюся штуку - как с texarea - тогда бы и анимация не нужна была и начальную установку можн делать было мгновенно

0

3

  • Автор: Admin
  • Зарегистрирован: 2011-04-25
  • Приглашений: 0
  • Сообщений: 50
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    19 часов 27 минут
  • Последний визит:
    2011-06-08 22:10:17

С Аниамацией (*Не работает в старых ИЕ)

Код:
<style> 
.controls ul, .controls li { margin:0px; padding:0px; list-style:none; display:inline }
.controls li{float:right;  height:15px; width:15px; margin-left:10px; }
.controls li.select{border:solid 1px #cc0000; width:14px; height:14px;}
</style>
<!--<style id="setPunWidth">#pun{width:870px;}</style>-->
<style>#pun{margin:0 auto;}</style>

<div class="controls">
<ul>
<li class="switch_fluid" alt="100%"><img src="http://upforme.ru/uploads/000f/40/fc/87-3.jpg"  title="Forum width:100%"/></li>
<li class="switch_980" alt="980px"><img src="http://upforme.ru/uploads/000f/40/fc/87-2.jpg"  title="Forum width:980px"></li>
<li class="switch_780" alt="780px"><img src="http://upforme.ru/uploads/000f/40/fc/87-3.jpg"  title="Forum width:780px"></li>
</ul>
</div>
<script src="http://i.ucof.ru/f/ru/ucof/CookieAdm.js"></script>
<script type="text/javascript">
var setTimeEdit=24 //Время (в днях) максимального существования коки без входа юзера
$(document).ready(function() {
$("li[class^='switch_']").click(function () {
$("div.controls li").removeClass("select");
$(this).addClass("select");//alert($(this).attr("alt"))
$("div#pun").animate({width: $(this).attr("alt")}, 'slow') //Анимация - не работает в старых ИЕ
//$("#pun").css({"width":$(this).attr("alt")}) //Вариант без Анимации - отключен
});
  $(".controls li[class^='switch_']").mouseover(function(){
    }).mouseout(function(){
if($(this).hasClass("select")==true) { //
var cls=$(this).attr("class").split(" "); //alert(cls[0])//Выясняем класс(switch_) активной кнопки
setCookieAdm(UserLogin+"switch_№",cls[0],setTimeEdit*24*60*60*1000)}
    });
//=============================== Конец Подфункций ===================================//

var s=getCookieAdm(UserLogin+"switch_№"); //alert(s) //cчитываем кук бывшей активной кнопки

if(s!=false){ 	//Проверяем - Кук - есть ?;

setCookieAdm(UserLogin+"switch_№",s,setTimeEdit*24*60*60*1000); //Перезаписываем для продления по времени
$("div.controls li."+s).click(); 	//alert("Click")//Кликаем и переустанавливаем кнопу
}
});
</script>

ЗЫ: ширину просто прописываем просто в ALT(е) к LI с соответствующей кнопкой, кнопок добавляем скок надо - я бы вообще сделал двигающуюся штуку - как с texarea - тогда бы и анимация не нужна была и начальную установку можн делать было мгновенно

0

Страница: 1

Вы здесь » Форум » Тестовый форум » Скрипт: