Итак, вы отправились на поиски ответа на вопрос о жизни, вселенной и всем остальном , и когда вы взяли , вы нашли jQuery. Да, я знаю, вы ожидали 42, но, к нашему удивлению, это был jQuery . Так что же дальше? Создайте свой собственный плагин!
Хотя некоторых пугает мысль о создании собственного плагина, правда в том, что jQuery построен с бесконечно дружественной архитектурой плагина. Если вы освоились с основами кодирования jQuery, то вы наверняка готовы разработать свой собственный плагин. Этот учебник шаг за шагом проведет вас через создание собственного плагина усечения. Скажем, например, у вас есть виджет «Совет дня» на вашей домашней странице. Этот плагин позволит вам обрезать его до указанной длины со ссылкой, чтобы развернуть его, чтобы просмотреть его полный контент. На следующем изображении показан усеченный фрагмент текста:
В исходной статье (открывается в новом окне) для этой публикации есть рабочие примеры этого плагина.
Обратите внимание, что если JavaScript отключен (или не поддерживается), контент будет просто отображаться полностью.
Ты готов? Давайте копаться в …
Шаг 1
Первым шагом является расширение фактического объекта jQuery функцией, которую мы хотим добавить. В нашем случае мы хотим добавить функциональность «усечения». Итак, вот с чего начать: создайте файл jquery.truncate.js и сохраните его с помощью следующего кода:
$.fn.truncate = function(options) {
return this.each(function() {
});
};
Теперь вы, возможно, слышали, что разработчики плагинов не должны использовать псевдоним $ , так как это может привести к конфликтам с другими библиотеками. Это только частично правда. Следующий фрагмент аналогичен приведенному выше, за исключением того, что мы передаем jQuery в функцию, что позволяет нам использовать псевдоним, который мы хотим. Мы будем придерживаться $ .
(function($){
$.fn.truncate = function() {
return this.each(function() {
});
};
})(jQuery);
Шаг 2
Прежде чем идти дальше, давайте создадим простую тестовую страницу, которую мы можем использовать для тестирования нашего плагина. Создайте страницу и назовите ее what_you_want.html . Вставьте следующий код. Как видите, я поместил библиотеку jQuery и плагин в папку с именем js . Обратите внимание, что мы уже запускаем наш плагин в этом фрагменте, хотя мы еще не написали никакого поведения.
<html>
<head>
<title>Truncation Plugin Test</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.truncate.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('.tip').truncate();
});
</script>
</head>
<body>
<div class="tip" style="width:200px;background-color:#ccc;padding:10px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit,
odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum,
feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit
pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet,
dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh
ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris
odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.
</div>
</body>
</html>
Шаг 3
Следующее, что мы хотим сделать, — предоставить пользователю механизм для настройки плагина. Хотя мы хотим сделать плагин настолько гибким, насколько это возможно, мы также должны указать значения по умолчанию, чтобы пользователь не был вынужден предоставлять длинный список параметров. Мы можем легко сделать это, используя метод расширения jQuery . Обновите ваш плагин, чтобы он соответствовал следующему:
(function($){
$.fn.truncate = function(options) {
var defaults = {
length: 300,
minTrail: 20,
moreText: "more",
lessText: "less",
ellipsisText: "..."
};
var options = $.extend(defaults, options);
return this.each(function() {
});
};
})(jQuery);
Пока что мы не будем переопределять значения по умолчанию на нашей тестовой странице, но продемонстрируем это позже.
Шаг 4
Так что это берет на себя все предварительные соображения. Давайте перейдем к кодированию функциональности плагина. Как вы уже видели, плагин возвращает this.each (…) . Эта строка будет выполнять содержащуюся анонимную функцию для каждого элемента в массиве jQuery. Так, если, например, мы вызвали $ (‘p’). Truncate () , код, который мы собираемся написать, будет выполняться для каждого тега p .
Поскольку я предполагаю комфортное понимание jQuery, я не буду подробно объяснять, как на самом деле работает код функции. Если что-то в коде не очевидно, вам следует обратиться к документации или задать вопрос в комментариях. Чтобы дополнить свой плагин, обновите его, чтобы он соответствовал следующему:
(function($){
$.fn.truncate = function(options) {
var defaults = {
length: 300,
minTrail: 20,
moreText: "more",
lessText: "less",
ellipsisText: "..."
};
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('normal');
moreLink.text(options.lessText);
ellipsis.css("display", "none");
} else {
moreContent.hide('normal');
moreLink.text(options.moreText);
ellipsis.css("display", "inline");
}
return false;
});
}
} // end if
});
};
})(jQuery);
Вы заметите, что всякий раз, когда мне нужно было выбрать элемент в плагине, я всегда использовал obj в качестве контекста (например, moreLink = $ (‘. Truncate_more_link’, obj) ). Это необходимо для ограничения любых выделений текущим усеченным элементом. Без такой настройки контекста вы получите непредсказуемые результаты.
Вот и все — ваш первый плагин jQuery! Мы еще не совсем закончили, так как я обещал продемонстрировать переопределение параметров по умолчанию. В следующем примере каждый параметр был переопределен, хотя вполне допустимо переопределять меньшее количество. Просто замените скрипт на вашей тестовой странице следующим:
$().ready(function() {
$('.tip').truncate( {
length: 120,
minTrail: 10,
moreText: 'show more',
lessText: 'show less',
ellipsisText: " [there's more...]"
});
});
Этот код даст вам что-то вроде этого:
Ну … Я надеюсь, вы нашли это полезным. Если у вас есть какие-либо вопросы помимо того, что я объяснил, пожалуйста, задавайте их в комментариях. Обратите внимание, что плагин, разработанный в этом руководстве, превратился в плагин jTruncate, который можно найти в репозитории плагинов jQuery или здесь, в моем блоге . Спасибо за чтение!