У коментарях до минулій статті « Створюємо валютний інформер з допомогу PHP і JavaScript »Читач з ніком php-user запропонував хороший варіант удосконалення скрипта.
Подивитися, як виглядає кінцевий результат можна на демонстраційній сторінці або запустивши приклад з архіву.
SourceДля того, щоб не переписувати все заново, за основу візьмемо скрипт з минулого статті . Нагадаю, що він виводить список з курсами зазначених валют.
Визначимо план робіт.
1) Змінити розмітку елементів списку.
У вихідному варіанті інформера кожен запис виводиться у вигляді
<Li> 100 USD = 791.9900 грн. </ Li>Щоб зробити значення редагованими їх потрібно якось виділити, наприклад, за допомогою тега span. Наприклад, так:
<Li> <span class = "editable"> 100 </ span> USD = <span class = "editable"> 791.9900 </ span> грн. </ Li>2) Зробити поля редагуються.
Це завдання вирішимо за допомогою плагіна Jeditable .
3) Написати функцію перерахунку.
Ця функція буде викликатися після того, як відвідувач завершить введення нового значення. Ми використовуємо подія, яке ініціює плагін Jeditable.
Переходимо до реалізації.
розмітка
Щоб трохи спростити собі життя, і не формувати HTML розмітку безпосередньо за допомогою JS коду, використовуємо шаблонизатор - плагін Templates .
Працювати з ним нескладно.
Перш за все, на сторінку (index.html) додамо шаблон для елементів списку.
<Script id = "rateTemplate" type = "text / x-jquery-tmpl"> <li> <span class = "editable $ {curCode}"> $ {nominal} </ span> $ {curCode} = <span class = "editable UAH"> $ {value} </ span> грн. </ li> </ script>Тут зверніть увагу на кілька моментів.
1) Для скрипта потрібно встановити атрибут id, щоб ми потім могли до нього звернутися.
2) Атрибут type має дорівнювати text / x-jquery-tmpl.
3) Змінні, які буде замінювати шаблонизатор, вказуємо в фігурних дужках зі знаком $ перед відкриває дужкою.
В даному випадку змінних три:
$ {CurCode} - код валюти;
$ {Nominal} - номінал;
$ {Value} - значення в гривнях.
Для того, щоб сформувати список використовуємо наступний код (в файлі script.js).
var rates = []; $ (Data) .find ( 'Valute'). Each (function (key, value) {var curCode = $ (value) .find ( 'CharCode'). Html (); if (-1! = $ .InArray ( curCode, curCodes)) {var n = $ (value) .find ( 'Nominal'). html (); var v = $ (value) .find ( 'Value'). html (); var r = parseFloat (v ) / parseFloat (n); var data = {curCode: curCode, nominal: n, value: v, rate: r}; rates.push (data);}}); // прибираємо повідомлення про завантаження $ ( '# rates'). Html ( ''); // вставляємо дані $ ( '# rateTemplate'). Tmpl (rates) .appendTo ( '# rates');Цей скрипт знаходить записи з даними про валютах (детально цей алгоритм ми розглядали в минулій статті) і для кожної валюти формує хеш data (рядки 8-13). Зверніть увагу, що імена елементів хешу збігаються з іменами змінних в шаблоні. Після цього, додаємо хеш-кодування в масив rates (рядок 14).
Зауважте, що в хеше ми зберігаємо не тільки дані для шаблону, але і курс кожної валюти - rate (рядок 12).
Шаблонизатор запускається за допомогою методу tmpl (рядок 20), якому ми передаємо масив rates. В результаті, буде сформована розмітка тегів li, яку ми і вставляємо в список (за допомогою методу appendTo).
Після виконання цієї операції розмітка елементів списку буде виглядати наступним чином
<Li> <span class = "editable USD"> 100 </ span> USD = <span class = "editable UAH"> 791.9900 </ span> грн. </ Li>Як бачите, ми додали код валюти в атрибут span для кожного тега span. Таким чином, нам буде простіше визначити напрямок конвертації.
Робимо значення редагованими.
Підключаємо плагін Jeditable.
<Script src = "js / jquery.jeditable.mini.js"> </ script>І викликаємо його метод editable для всіх елеменов з класом editable. У першому параметрі цього методу передаємо функцію-обробник, яка буде викликана після завершення редагування, у другому - хеш з настройками плагіна.
$ ( '. Editable'). Editable (function (value, settings) {var curField = $ (this); // визначаємо напрямок перекладу if (curField.hasClass ( 'UAH')) {// гривні -> обрана валюта / / визначаємо span в який потрібно вставити результат і код валюти var target = curField.parent (). children ( 'span'). eq (0); var currency = target.attr ( 'class'). split ( '') [ 1]; // конвертуємо target.html (convert ( 'UAH', currency, value, rates));} else {// обрана валюта -> гривні // визначаємо span в який потрібно вставити результат і код валюти var target = curField .parent (). children ( 'span'). eq (1); var currency = curField.attr ( 'class'). split ( '') [1]; // конвертуємо target.html (convert (currency, ' UAH ', value, rates));} return value;}, {tooltip:' Click to edit ... ', style:' display: inline '});Налаштувань небагато. tooltip - підказка, яка з'являється при наведенні курсору на редагується поле, style - стиль, який використовується для форми редагування.
Оброблювач в параметрі value отримує введене відвідувачем значення. Для того, щоб виконати конвертацію, крім цього значення нам необхідно знати напрямок перекладу і код валюти.
Код валюти можна отримати з атрибуту class, а напрямків обміну всього два: з обраної валюти в гривні і навпаки.
Спочатку ми визначаємо, редагується чи значення в гривнях (рядок 4). Якщо так, знаходимо перший тег span в даному елементі списку, і визначаємо код валюти (рядки 7 і 8). Потім викликаємо функцію convert, яка і виконує перетворення.
Якщо відвідувач редагує значення валюти і хоче отримати результат в гривнях, то алгоритм роботи практично той самий. За винятком того, що потрібно знайти другий тег span і змінити напрямок перекладу при виконанні функції convert (рядки 12-19).
Не забудьте, що для правильної роботи платина Jeditable, обробник повинен повернути введене користувачем значення (рядок 20).
функція convert
Виконує конвертацію однієї валюти в іншу. Коди валют необхідно вказати в параметрах from і to. value - кількість грошей в валюті з кодом, зазначеним в параметрі from. rates - масив з даними валют.
function convert (from, to, value, rates) {var v = parseFloat (value); if (isNaN (v)) {return '0'; } Var curRate, result; $ (Rates) .each (function (i, currency) {var breakIt = false; if ( 'UAH' == from) {if (to == currency.curCode) {result = (v / parseFloat (currency.rate) ) .toFixed (2) .toString (); breakIt = true;}} else {if (from == currency.curCode) {result = (v * parseFloat (currency.rate)). toFixed (2) .toString () ; breakIt = true;}} return! breakIt;}); return result; }Перш за все, перевіряємо допустимість введеного користувачем значення (рядки 2-5).
Потім шукаємо вказану валюту в масиві rates (рядок 7). При цьому враховуємо напрямок перекладу (рядок 9). Якщо зазначена валюта знайдена - конвертуємо значення і припиняємо подальший пошук.
Зверніть увагу, що для того щоб перервати виконання методу each необхідно повернути false (змінна breakIt).
висновок
Як бачите, трохи коду, і звичайний інформер став набагато корисніше 🙂
Якщо хтось хоче запропонувати ще варіанти удосконалення, пишіть, обговоримо!
цікаво почитати
Чотири етапу пошуку клієнтів для компаній на б2б-ринку
Збільшення продажів в ресторані - креативне рішення складного завдання
