(function($) {
'use strict';
$.fn.succinct = function(options) {
var settings = $.extend({
size: 240,
omission: '...',
ignore: true
}, options);
return this.each(function() {
var textDefault,
textTruncated,
elements = $(this),
regex = /[!-\/:-@\[-`{-~]$/,
init = function() {
elements.each(function() {
textDefault = $(this).html();
if (textDefault.length > settings.size) {
textTruncated = $.trim(textDefault)
.substring(0, settings.size)
.split(' ')
.slice(0, -1)
.join(' ');
if (settings.ignore) {
textTruncated = textTruncated.replace(regex, '');
}
$(this).html(textTruncated + settings.omission);
}
});
};
init();
});
};
})(jQuery);
$(function() {
"use strict";
$('.truncate299').succinct({
size: 299,
omission: '...',
ignore: true
});
$('.truncate200').succinct({
size: 200,
omission: '...',
ignore: true
});
$('.truncate100').succinct({
size: 100,
omission: '...',
ignore: true
});
$('.truncate80').succinct({
size: 80,
omission: '...',
ignore: true
});
$('.truncate25').succinct({
size: 25,
omission: '!',
ignore: true
});
$('.truncate20').succinct({
size: 20,
omission: '',
ignore: true
});
});
<!--Указывается схема Product.-->
<div itemscope itemtype="http://schema.org/Product">
<!--В поле name указывается наименование товара.-->
<h1 itemprop="name">Iphone 6 plus 16 GB</h1>
<!--В поле description дается описание товара.-->
<span itemprop="description">iPhone 6 не просто больше. Он лучше во всех отношениях. Больше, но при этом значительно тоньше. Мощнее, но при этом исключительно экономичный. Его гладкая металлическая поверхность плавно переходит в стекло нового HD-дисплея Retina, образуя цельный, законченный дизайн. Его аппаратная часть идеально работает с программным обеспечением. Это новое поколение iPhone, улучшенное во всём</span>
<!--В поле image указывается ссылка на картинку товара.-->
<img src="http://imageexample.com/iphone6plus.jpg" itemprop="image">
<!--Указывается схема Offer.-->
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<!--В поле price указывается цена товара.-->
<span itemprop="price"></span>
<!--В поле priceCurrency указывается валюта.-->
<span itemprop="priceCurrency"></span>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed:300i&subset=cyrillic,cyrillic-ext');
p{
font-family: 'Fira Sans Extra Condensed', sans-serif;
}
</style>
// get the container to hold the IO globe
var container = document.getElementById( "globalArea" );
// create controller for the IO globe, input the container as the parameter
var controller = new GIO.Controller( container );
// ask a file for the JSON data, using AJAX to load the data
$.ajax( {
url: "data/sampleData.json",
type: "GET",
contentType: "application/json; charset=utf-8",
async: true,
dataType: "json",
success: function ( inputData ) {
// if received the data, use addData() API to add the the data to the controller
controller.addData( inputData );
// call the init() API to show the IO globe in the browser
controller.init();
}
} );