- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Здравствуйте ! Очень нужна Ваша помощь!
Есть замечательный jquery плагин jQuery jTruncate
Во всем разобрался, но столкнулся с одной проблемой ! :gm:
Вот код данного плагина:
$.fn.jTruncate = function(options) {
var defaults = {
length: 300,
minTrail: 20,
moreText: "Читать далее",
lessText: "Свернуть",
ellipsisText: "...",
moreAni: "",
lessAni: ""
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
var body = obj.html();
if(body.length > options.length + options.minTrail) {
var splitLocation = body.indexOf(' ', options.length);
if(splitLocation != -1) {
// truncate tip
var splitLocation = body.indexOf(' ', options.length);
var str1 = body.substring(0, splitLocation);
var str2 = body.substring(splitLocation, body.length - 1);
obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText +
'</span>' + '<span class="truncate_more">' + str2 + '</span>');
obj.find('.truncate_more').css("display", "none");
// insert more link
obj.append(
'<div class="clearboth">' +
'<a href="#" class="truncate_more_link">' + options.moreText + '</a>' +
'</div>'
);
// set onclick event for more/less link
var moreLink = $('.truncate_more_link', obj);
var moreContent = $('.truncate_more', obj);
var ellipsis = $('.truncate_ellipsis', obj);
moreLink.click(function() {
if(moreLink.text() == options.moreText) {
moreContent.show(options.moreAni);
moreLink.text(options.lessText);
ellipsis.css("display", "none");
} else {
moreContent.hide(options.lessAni);
moreLink.text(options.moreText);
ellipsis.css("display", "inline");
}
return false;
});
}
} // end if
});
};
})(jQuery);
Как мне заставить меняться данное значение (выделил красным) в зависимости от того нажата ли кнопка "читать далее" или "свернуть" (выделил зелёным). Т.е. если нажата Moretext, то чтобы вместо clearboth было "класс1", а если нет то "класс2".
Помогите пожалуйста, ну ооочень нужно. :(
Попробуйте так:
$.fn.jTruncate = function(options) {
var defaults = {
length: 300,
minTrail: 20,
moreText: "Читать далее",
lessText: "Свернуть",
ellipsisText: "...",
moreAni: "",
lessAni: ""
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
var body = obj.html();
if(body.length > options.length + options.minTrail) {
var splitLocation = body.indexOf(' ', options.length);
if(splitLocation != -1) {
// truncate tip
var splitLocation = body.indexOf(' ', options.length);
var str1 = body.substring(0, splitLocation);
var str2 = body.substring(splitLocation, body.length - 1);
obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText +
'</span>' + '<span class="truncate_more">' + str2 + '</span>');
obj.find('.truncate_more').css("display", "none");
// insert more link
obj.append(
'<div class="clearboth">' +
'<a href="#" class="truncate_more_link">' + options.moreText + '</a>' +
'</div>'
);
// set onclick event for more/less link
var moreLink = $('.truncate_more_link', obj);
var moreContent = $('.truncate_more', obj);
var ellipsis = $('.truncate_ellipsis', obj);
moreLink.click(function() {
if(moreLink.text() == options.moreText) {
moreContent.show(options.moreAni);
moreLink.text(options.lessText);
ellipsis.css("display", "none");
$(this).parent().addClass('class1');
} else {
moreContent.hide(options.lessAni);
moreLink.text(options.moreText);
ellipsis.css("display", "inline");
$(this).parent().addClass('class2');
}
return false;
});
}
} // end if
});
};
})(jQuery);
Saitoff, прежде всего, спасибо большое за ответ !
Увы, но не работает, сразу выдает:
<div class="clearboth class1 class2"> :(
---------- Добавлено 04.08.2012 в 21:58 ----------
Пардон ! Работает ! Только как не добавить класс (т.е. $(this).parent().addClass), а изменить полностью его ?
---------- Добавлено 04.08.2012 в 23:25 ----------
Решил проблему посредством .removeClass :)