Для персонализации select так, что он показывает список option с отсортированных в порядке «Наиболее часто используемых» из них, мы можем иметь лучшее из обоих мира в свой список желаний. Давайте создадим его с помощью jQuery и файлов cookie. А также сделайте повторно используемое решение, готовое к использованию. С дополнительным преимуществом вы можете изменить его по своему вкусу.
Прежде чем мы это сделаем, просто обратите внимание на осторожность. Если вы хотите персонализировать много вещей, тогда лучше сделать это на стороне сервера и создать подсистему персонализации в своем приложении. Опираясь на куки-файлы на стороне клиента, не рекомендуется для таких сценариев.Однако, если ваш прецедент - это всего лишь одноразовый сценарий, такой как этот, где вы просто хотите улучшить пользовательский интерфейс, предоставляя дополнительное усовершенствование помимо рабочего набора функций без внесения изменений в код на стороне сервера, тогда имеет смысл реализовать такую функциональность на стороне клиента. Именно поэтому файлы cookie и localstorage существуют. Подобно тому, как рекламодатели используют файлы отслеживания, это также похоже на файл cookie отслеживания, который отслеживает, что ваши пользователи используют чаще. Не так ли?
Сказанное, давайте создадим плагин jQuery, который вы можете использовать как есть. Он также позволит вам применить его к нескольким select. Назовем это .mfu().
Примечание: Код здесь - просто грубая демонстрация для вас. Он не оптимизирован и, возможно, нуждается в повторном факторинге. В настоящее время этот плагин не сработает, если вы не дадите уникальный id всем вашим select s, так как он зависит от id, чтобы прикрепить и восстановить частоту.
Вы можете просмотреть полную демонстрацию здесь: http://jsfiddle.net/abhitalks/u5z868d0/
Выберите опцию из обоих select с и держать кнопку «запустить» в скрипку. Вы увидите, что наиболее часто используемые параметры продолжают расти.
Начнет с пустым шаблоном плагина, который выглядит следующим образом:
(function ($) {
$.fn.extend({
mfu: function() {
....
return this.each(function() {
...
});
}
});
})(jQuery);
Мы проходим каждый из select с, на которой плагин был призван и вернуть их все обратно для построения цепочки ,
Вы можете назвать этот плагин на все ваши выбирает, как это:
$(select).mfu();
Мы будем хранить наши option детали вместе с частотами в массиве объектов для всех select с указанным в селекторе, на котором вызывается плагин. Массив объекта выглядит так:
[
{
'id': 'drop1',
'mfu':
[
{ 'value': 'a', 'caption': 'Red', 'frequency': 0 },
{ 'value': 'b', 'caption': 'Green', 'frequency': 0 },
...
]
},
{
'id': 'drop2',
'mfu':
[
{ 'value': '1', 'caption': 'One', 'frequency': 0 },
{ 'value': '2', 'caption': 'Two', 'frequency': 0 },
...
]
}
];
Теперь давайте начнем кодирование плагина. Первое, что нужно сделать, это немного инициализировать материал. Мы будем хранить «частоту» каждого option в каждом select для наших «наиболее часто используемых» элементов в файле cookie. Таким образом, наш код инициализации будет включать код для чтения cookie при инициализации и загрузки элементов «наиболее часто используемых» в массив объектов. Нам также нужно будет написать файл cookie, поэтому давайте создадим функцию, чтобы сделать это здесь. Потому что мы будем работать с массивом объектов, мы будем использовать JSON для stringify(), чтобы он записывался в файл cookie, и parse() на чтение.
Итак, наш плагин теперь начинает выглядеть так:
(function ($) {
$.fn.extend({
mfu: function() {
var self = this, cookieName = 'mfu',
defaultExpiry = new Date(2050, 1, 1),
getCookie = function(name) {
var results = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return results ? unescape(results[2]) : null;
},
setCookie = function(name, value) {
var cookieString = name + "=" + escape(JSON.stringify(value));
cookieString += "; expires=" + defaultExpiry.toGMTString();
document.cookie = cookieString;
},
mfuStored = getCookie(cookieName),
mfuList = JSON.parse(mfuStored)
;
return self.each(function() {
...
});
}
});
})(jQuery);
Мы жестко закодировано название печенья, как «MFU». Мы также установили дату истечения срока действия cookie. В реальном коде вы должны изучить динамически эту настройку.Тогда есть обычные функции чтения/записи для файлов cookie. Мы читаем файл cookie и загружаем список MFU в переменную mfuList, которая является массивом объектов.
Далее мы просматриваем каждый из select s, на который был вызван плагин, а затем выполните поиск в нашем массиве объектов для id каждого select. Если он не найден, значит, он был запущен в первый раз (и/или cookie недоступен), в этом случае мы создаем новый объект для хранения частот. Если найдено, мы найдем option s в том, что select и проверьте, доступны ли частоты при загрузке файлов cookie. Если не найдено, мы создаем новые объекты для хранения данных option.
После этого мы отсортируем наш массив объектов для текущего select, а затем заменим selectoption s в отсортированном виде. Мы также можем показывать частоты пользователю, если это необходимо.
Теперь, все, что остается, чтобы связать change событие на каждом select обновить частоту в массиве объектов выбранного option и сохранить, что обратно в печенье. В этой демонстрации мы сохраняем ее на событии change. В реальной жизни вы можете сохранить файл cookie при разгрузке страницы.
Итак, теперь наш полный плагин выглядит следующим образом:
(function ($) {
$.fn.extend({
mfu: function() {
var self = this, cookieName = 'mfu',
defaultExpiry = new Date(2050, 1, 1), // far ahead expiry of cookie
getCookie = function(name) { // routine to read cookie
var results = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return results ? unescape(results[2]) : null;
},
setCookie = function(name, value) { // routine to write cookie
var cookieString = name + "=" + escape(JSON.stringify(value));
cookieString += "; expires=" + defaultExpiry.toGMTString();
document.cookie = cookieString;
},
mfuStored = getCookie(cookieName), // read the cookie
mfuList = JSON.parse(mfuStored) // parse object array from the string
;
return self.each(function() {
var select = this, mfu;
if (! mfuList) { // for the first time, create object
mfuList = []; mfuList.push({ 'id': select.id, 'mfu': [] });
}
// search for the current select
mfu = mfuList.filter(function(o) {
return o.id === select.id;
})[0];
if (!mfu) { // if not found, create object and add to array
mfuList.push({ 'id': select.id, 'mfu': [] });
mfu = mfuList[mfuList.length - 1].mfu;
} else {
mfu = mfu.mfu; // if found, use the mfu property
}
// for each option search the object arrat
[].map.call(select.options, function(option) {
var opt = mfu.filter(function(o) {
return o.value === option.value;
})[0];
if (! opt) { // if not found, create object and add to array
opt = {} ;
opt.value = option.value;
opt.caption = option.innerText;
opt.frequency = 0;
mfu.push(opt);
}
});
// sort the array on frequency
mfu.sort(function(a, b) { return a.frequency < b.frequency });
// empty the select
$(select).empty();
// loop thru our object array and to select in sorted order
mfu.forEach(function(item) {
var $opt = $("<option>");
$opt.val(item.value);
$opt.text(item.caption + ': (' + item.frequency + ')');
$(select).append($opt);
});
// add event listener for change
$(select).on("change", function() {
var value = this.value;
// search our object array
var opt = mfu.filter(function(o) {
return o.value === value;
})[0];
opt.frequency++; // increment the frquency
setCookie(cookieName, mfuList); // write back the cookie
});
});
}
});
})(jQuery);
// call the plugin on all selects
$("select").mfu();
Это все есть на него. Теперь вы можете импровизировать и улучшить этот код, если это необходимо, в противном случае он будет готов к использованию как есть.
.
Таким образом, вы хотели бы сохранить, сколько раз человек выбран определенный вариант? Как вы загружаете эти параметры в настоящее время? – carlosherrera
Параметры взяты из моей базы данных mysql. Однако строка позиции не является опцией, так как это не решение для каждого пользователя – Peter
, откуда берутся данные для вашего выбора? – baao