Js - Alert ile ilgili bir soru

[serhat_7]

arkadaşlar bu kodları html in içine nerelere ekleyeceğim yardımcı olur musunuz? http://fabien-d.github.io/alertify.js/?utm_source=dlvr.it&utm_medium=twitter

 

[annttiigs]

sayfada nasıl kullanacağın yazıyor zaten ? Eğer web kodlayacaksanız. Browser'lerin developer toollarını iyi bir şekilde hatmetmeniz gerekir. ilgili sayfadaki örnekleri nası kullandığını görmek için;

sayfa üzerinde sağ tuş -> öğeyi denetle ya da ingilizce "inspect element" derseniz sayfanın html kodunu görür ( kaynağı görüntüle eski adı ile ) oradan kullanımı çıkarabilirsiniz.

head kısmını da inceleyip include edilen js vs css'leri unutmamak şartı ile şu şekilde kullanım var.

"use strict";
        var
        $ = function (id) {
            return document.getElementById(id);
        },
        reset = function () {
            $("toggleCSS").href = "assets/js/lib/alertify/alertify.default.css";
            alertify.set({
                labels : {
                    ok     : "OK",
                    cancel : "Cancel"
                },
                delay : 5000,
                buttonReverse : false,
                buttonFocus   : "ok"
            });
        };


        // ==============================
        // Standard Dialogs
        $("alert").onclick = function () {
            reset();
            alertify.alert("This is an alert dialog");
            return false;
        };


        $("confirm").onclick = function () {
            reset();
            alertify.confirm("This is a confirm dialog", function (e) {
                if (e) {
                    alertify.success("You've clicked OK");
                } else {
                    alertify.error("You've clicked Cancel");
                }
            });
            return false;
        };


        $("prompt").onclick = function () {
            reset();
            alertify.prompt("This is a prompt dialog", function (e, str) {
                if (e) {
                    alertify.success("You've clicked OK and typed: " + str);
                } else {
                    alertify.error("You've clicked Cancel");
                }
            }, "Default Value");
            return false;
        };


        // ==============================
        // Standard Dialogs
        $("notification").onclick = function () {
            reset();
            alertify.log("Standard log message");
            return false;
        };


        $("success").onclick = function () {
            reset();
            alertify.success("Success log message");
            return false;
        };


        $("error").onclick = function () {
            reset();
            alertify.error("Error log message");
            return false;
        };


        // ==============================
        // Custom Properties
        $("delay").onclick = function () {
            reset();
            alertify.set({ delay: 10000 });
            alertify.log("Hiding in 10 seconds");
            return false;
        };


        $("forever").onclick = function () {
            reset();
            alertify.log("Will stay until clicked", "", 0);
            return false;
        };


        $("labels").onclick = function () {
            reset();
            alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
            alertify.confirm("Confirm dialog with custom button labels", function (e) {
                if (e) {
                    alertify.success("You've clicked OK");
                } else {
                    alertify.error("You've clicked Cancel");
                }
            });
            return false;
        };


        $("focus").onclick = function () {
            reset();
            alertify.set({ buttonFocus: "cancel" });
            alertify.confirm("Confirm dialog with cancel button focused", function (e) {
                if (e) {
                    alertify.success("You've clicked OK");
                } else {
                    alertify.error("You've clicked Cancel");
                }
            });
            return false;
        };


        $("order").onclick = function () {
            reset();
            alertify.set({ buttonReverse: true });
            alertify.confirm("Confirm dialog with reversed button order", function (e) {
                if (e) {
                    alertify.success("You've clicked OK");
                } else {
                    alertify.error("You've clicked Cancel");
                }
            });
            return false;
        };


        // ==============================
        // Custom Log
        $("custom").onclick = function () {
            reset();
            alertify.custom = alertify.extend("custom");
            alertify.custom("I'm a custom log message");
            return false;
        };


        // ==============================
        // Custom Themes
        $("bootstrap").onclick = function () {
            reset();
            $("toggleCSS").href = "assets/js/lib/alertify/alertify.bootstrap.css";
            alertify.prompt("Prompt dialog with bootstrap theme", function (e) {
                if (e) {
                    alertify.success("You've clicked OK");
                } else {
                    alertify.error("You've clicked Cancel");
                }
            }, "Default Value");
            return false;
        };

alertfiy denen obje ise tam bakmadım ama head tagı içinde include edilen js'lerden elde edilen ve;

sayfanın sonundaki şu kısımları modifiye eden bir objedir herhalde.

<div id="alertify-cover" class="alertify-cover alertify-cover-hidden"></div>
<section id="alertify" class="alertify alertify-hidden"></section>
<section id="alertify-logs" class="alertify-logs alertify-logs-hidden"></section>