Simpltry Dialog

This is the only simpltry library that is not attachable via a simpltry_widget attribute. I also realize that it is terrible to attach click events obtrusively, but it is the easiest to demo.

This is a standard alert box. Not that useful but it shows how easy it is to use.

alert test

example markup:

<a href="#" onclick="alertBox(); return false;">alert test</a>

code example:

function alertBox () {
    Simpltry.Dialog.Alert("This is an alert box");
}

This is a confirm dialog, it allows you to add your own buttons and associate behavior with those buttons. You can also add "additionalText" which is really just markup, so if you need to have custom field on your dialog you can do so.

confirm test

example markup:

<a href="#" onclick="confirmBox(); return false;">confirm test</a>

code example:

function confirmBox() {
    new Simpltry.Dialog.Confirm({
        additionalText: 
            "Enter your name: <input id='name' type='text' name='name' />",
        title: "CONFIRM!!!"}, [
            {text: "first", 
             onClick: function(){
                alert("your first name is " + $('name').value + "?  wierd")}
            },
            {text: "last", 
             onClick: function(){
                 alert("your last name is " + $('name').value + "?  wierd")}
            }
        ]);
}

You can also get the contents of your dialog via an Ajax call to your server. If you choose this dialog you need to provide a means of removing the dialog. You can remove all dialogs by calling Simpltry.Dialog.removeAll();.

ajax test

example markup:

<a href="#" onclick="ajaxDialog(); return false;">ajax test</a>

code example:

function ajaxDialog() {
    new Simpltry.Dialog.Ajax({url: "dialog_ajax.html"});
}

css classes

The dialog builds dynamic html. Simpltry tries to put css classes on different parts of the widget. Here are a list of the classes that you can use. For any information about which element these classes get placed on there is two things you have to do. First use Firefox and second install the firebug extension. That allows your to inspect your DOM after it has been built, not just the page source that gets downloaded.

A good starting off point is the style sheet we used for this demo. demo style sheet