Поточний час:
Сьогодні 21 листопада, вівторокк 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 2 дня

Ваш ip адрес:54.198.210.67

Доброї ночі!
Ви обновили сторінку в 4 : 27
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

zura-blog demoПривіт всім відвідувачам Zura – Blog, сьогоднішня публікація буде стосуватись “Демеострацій”, а саме як додати демонстрацію, демонстрація це є показ, показ якогось небудь елементу, додається на сайт з метою, щоб була можливість наочного перегляду, як функціонує сам предмет.

Показ демо версій якогось небудь елементу, чи ефекту значно робить публікацію цікавішою.

Оскільки наочний перегляд ефекту, звісно що і більш зрозуміліший, так як надає можливість повного уявлення даного елементу.

На прикладі як працює “демонстрація ефекту” можна переглянути на Zura – Blog  в деяких  публікаціях, зокрема в публікації з назвою “Створюємо красивий рекламний банер з висуваючим текстом”,  в зазначеному місці клацнувши на “Показ демонстрації”, в новій вкладці відкриється сторінка, на який відобразиться робота даного елементу.

В цій публікації, щоб зрозуміліше пояснити як додати “Показ демонстрацій” до сайту, я додам демонстрацію  такого корисного інструменту як  “Калькулятор”, саме цей елемент я вирішив взяти за основу, і найзрозуміліше описати як додаються ефекти до сайту.

Калькулятор написаний на мові програмування JavaScript, самі коди  написані на JavaScript в принципі додаються до сторінки дуже легко, всього то тільки скопіювати код і зберегти в файлі, і в файлі виставити потрібне розширення.

Але якщо наприклад цей код довати до сторінки в csm WordPress, звичайним методом копіювати – вставити,  або в іншій системі управління контентом, то в такому разі, код може працювати не коректно, або взагалі не відобразиться, в мене таким способом “Калькулятор” не працює.

В принципі, можу також показати на прикладі, на  сторінці яка присвячена мові програмування JavaScript, клацнувши і перейшовши за посиланням, ви побачите що хоча форма калькулятора відображається, але сам калькулятор не працює.

Причин може бути багато різних, цей й необхідність прописування кодів в файлах csm, взагалі які можуть бути методи додавання  демонстрації до сайту. Звісно що може бути дописування кодів в файлах, які мають відношення до csm або до шаблону теми, але це досить таки ризикована справа, можна і плагіни пошукати, безпечніше але не дуже то бажано, більшість стараються обходитись без плагінів.

В любому випадку, перше ніж робити якісь зміни, краще не спішити а  “почіхати маківку”, перед тим як додати демонстрацію ефекту на Zura – Blog, я  спочатку прийнявся за пошуки плагінів, звісно що рекомендовані завжди появляться на перших сторінках.

Найшлось пару плагінів, правда вони то, скоріш за все призначались для демонстрації шаблонів. Можливо плагіни й можуть стати в нагоді тому хто на сайті вирішить викласти демонстрацію саме шаблонів, а можливо хтось і розробляє шаблони. Але  щоб  плагіни використовувати заради показу ефектів, я вважаю що не потрібно, досить легко створити демонстрацію ефектів на сайті. 

Справиться з таким завданням кожен. Додається звичайна демонстрація дуже просто, потрібно всього то створити папку, в папку вкласти файл, і додати папку, ось тут то і виникне питання куда саме. Звісно що в кореневу папку сайту, або головною її ще називають. Не потрібно додавати папку для демонстрації, в папки які належать до шаблонів, або до плагінів.

Взагалі які саме дї потрібно робити, в майбутньому планую викласти декілька публікацій які будуть присвячені створенню сайтів за допомогою веб редакторів, мається на увазі без застосування систем управління контентом, конструкторів для сайтів, і т.д т.п. Ви і самі можите скачати любу демо версію сайту, в котрій зразу побачити, що для кожного елементу створена своя папка.

Так для любого веб майстра, який має бажання використовувати шаблон в своїх цілях, буде і краще, і мабуть правильніше, якщо ви створити для своїх демонстрацій окрему папку, і саме в цю папку додаєте вже всі ваші елементи, які будете показувати “на живо”.   Звісно що в цій папці також краще для кожного елементу створювати окрему папку.

Для прикладу я роблю всі дії, запустивши локальний сервер, створений програмою Endels. Отож створюємо папку для демонстрацій елементів, я назвав папку “lessons”, папка бажано щоб знаходилась тільки в головній папці вашого сайту, і в цій папці вже будуть знаходитись елементи які ви збираєтесь показувати “на живо”.

Для кожного елементу створюємо свою окрему папку, і в цій папці вже будуть знаходитись всі файли і папки які будуть належати саме до елементу, отож в пацій “lessons” створюємо папку наприклад “Calc”, папка буде стосуватись калькулятора.

Тепер в папці “Calc”, додаємо все те що потрібне для роботи калькулятора, в даному випадку це всього лише один файл, копіюється код, відкриваємо редактор, вставляємо  і зберігаємо файл, а далі просто відкриваємо файл, наприклад (відкрити з допомогою) вибираємо браузер, і коли сторінка запуститься, саме посилання на файл відобразиться в верхній панелі браузера.

Далі залишається скопіювати посилання, і вставити в те місце де ви хочите, щоб у вас була демонстрація.

Код калькулятора написаний на мові програмування JavaScript.

<style type="text/css">
    .tblCalc{
        border:1px solid gray;
        margin:0;
        padding:0;
        width:250px;
        text-align:center;
    }
    .tblCalc input{
        border:1px solid gray;
        width:30px;
        margin:4px;
    }
        #btnWide{
        width:80px;
    }
    #editWide{
        width:250px;
    }
</style>

<form name="calc" action="">
     <table class="tblCalc" cellpadding=0 cellspacing=0>
     <tr>
         <td colspan=5 align=middle>
            <input id="editWide" name="ReadOut" type="Text"
                size=28 value="0" width="250px">
         </td>
     </tr>
     <tr>
         <td colspan="3"></td>
         <td><input name="btnClear" type="Button"
            value="C" onclick="Clear()" /></td>
         <td><input name="btnClearEntry" type="Button"
            value="CE" onclick="ClearEntry()" /></td>
     </tr>
     <tr>
         <td><input name="btnSeven" type="Button"
            value="7" onclick="NumPressed(7)"></td>
         <td><input name="btnEight" type="Button"
            value="8" onclick="NumPressed(8)"></td>
         <td><input name="btnNine" type="Button"
            value="9" onclick="NumPressed(9)"></td>
         <td><input name="btnPlus" type="Button"
            value="+" onclick="Operation('+')" /></td>
         <td><input name="btnMultiply" type="Button"
            value="*" onclick="Operation('*')" /></td>
       </tr>
     <tr>
         <td><input name="btnFour" type="Button"
            value="4" onclick="NumPressed(4)"></td>
         <td><input name="btnFive" type="Button"
            value="5" onclick="NumPressed(5)"></td>
         <td><input name="btnSix" type="Button"
            value="6" onclick="NumPressed(6)"></td>
         <td><input name="btnMinus" type="Button"
            value="-" onclick="Operation('-')" /></td>
         <td align=middle><input name="btnDivide" type="Button"
            value=" / " onclick="Operation('/')" /></td>
     </tr>
     <tr>
         <td><input name="btnOne" type="Button"
            value="1" onclick="NumPressed(1)"></td>
         <td><input name="btnTwo" type="Button"
            value="2" onclick="NumPressed(2)"></td>
         <td><input name="btnThree" type="Button"
            value="3" onclick="NumPressed(3)"></td>
         <td><input name="btnPercent" type="Button"
            value="%" onclick="Percent()" /></td>
         <td align=middle>&nbsp;</td>
     </tr>
     <tr>
         <td><input name="btnZero" type="Button"
            value="0" onclick="NumPressed(0)"></td>
         <td><input name="btnDecimal" type="Button"
            value="." onclick="Decimal()"></td>
         <td><input name="btnNeg" type="button"
            value="+/-" onclick="Neg()" /></td>
         <td colspan="2"><input id="btnWide" name="btnEquals"
            type="Button" value="=" onclick="Operation('=')"></td>
     </tr>
     </table>
</form>
<script language="JavaScript">

var Fcalc = document.calc;
var Currents = 0;
var FlagNewNum = false;
var PendingOp = "";

// обробник натискання
// цифрової кнопки
function NumPressed (Num)
{
        if (FlagNewNum)
        {
            Fcalc.ReadOut.value = Num;
            FlagNewNum = false;
        }
        else
        {
            if (Fcalc.ReadOut.value == "0")
                Fcalc.ReadOut.value = Num;
            else
                Fcalc.ReadOut.value += Num;
        }
}

// обробник натискання
// кнопки дій
function Operation (Op)
{
        var Readout = Fcalc.ReadOut.value;
        if (FlagNewNum && PendingOp != "=")
        {
            Fcalc.ReadOut.value = Currents;
        }
        else
        {
            FlagNewNum = true;
            if ( '+' == PendingOp )
                Currents += parseFloat(Readout);
            else if ( '-' == PendingOp )
                Currents -= parseFloat(Readout);
            else if ( '/' == PendingOp )
                Currents /= parseFloat(Readout);
            else if ( '*' == PendingOp )
                Currents *= parseFloat(Readout);
            else
                Currents = parseFloat(Readout);
            Fcalc.ReadOut.value = Currents;
            PendingOp = Op;
        }
}

// додавання десяткової точки з числа
function Decimal ()
{
        var curReadOut = Fcalc.ReadOut.value;
        if (FlagNewNum)
        {
            curReadOut = "0.";
            FlagNewNum = false;
        }
        else
        {
            if (curReadOut.indexOf(".") == -1)
                curReadOut += ".";
        }
        Fcalc.ReadOut.value = curReadOut;
}

// Очищення поточного результату
function ClearEntry ()
{
        Fcalc.ReadOut.value = "0";
        FlagNewNum = true;
}

//Повне очищення всіх результатів
function Clear ()
{
        Currents = 0;
        PendingOp = "";
        ClearEntry();

}

// міняємо знак поточного результату
function Neg ()
{
        Fcalc.ReadOut.value =
        parseFloat(Fcalc.ReadOut.value) * -1;
}

// обчислюємо значення відсотків
function Percent ()
{
        Fcalc.ReadOut.value =
            (parseFloat(Fcalc.ReadOut.value) / 100) *
            parseFloat(Currents);
}

Демонстрація роботи калькулятора


user_97

Демнонстрація калькулятора


На цьому все до зустрічі !

Leave a Reply

Your email address will not be published. Required fields are marked *