Controls

Try our controls.

Descriptions, Documentation, and Demos

You can try our controls before downloading them. Click on a link to try a control or view options.

mailinglistsubmitter The mailing list submitter control can be placed on a web page to allow a visitor to subscribe to a mailing list by submitting an email address. A web developer may use a custom callback function to handle ajax responses that occur from submitting an email address. The mailing list submitter plug-in has two display styles.

options View a complete list of options and default values. (64)
1. ajax: null
2. backgroundColor: "transparent"
3. color: "#333d3c"
4. containerClass: "ui-container"
5. containerIdentifier: "ui-mailing-list-submitter"
6. containerWidth: "100%"
7. displayStyle: 2
8. fieldsetClass: "ui-fieldset"
9. formAction: "../php/join.php"
10. formIdentifier: "subscribe-form"
11. formMethod: "POST"
12. formSubmitResultClass: "ui-submit-result"
13. formSubmitResultFailureColor: "#5f1b17"
14. formSubmitResultFontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif"
15. formSubmitResultIdentifier: "result"
16. formSubmitResultSuccessColor: "#163923"
17. hasForm: true
18. imageClass: "ui-label icon"
19. imageHeight: "26px"
20. imagePath: "../png/Mailing-List-Envelope.png"
21. imageWidth: "51px"
22. inputBackgroundColor: "#ffffff"
23. inputBlurBackgroundColor: "#283437"
24. inputBlurClass: "ui-input-blur"
25. inputBlurColor: "#ffffff"
26. inputBorderColor: "transparent"
27. inputClass: "ui-input"
28. inputColor: "#283437"
29. inputFontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif"
30. inputFontSize: "0.9em"
31. inputHeight: "24px"
32. inputIdentifier: "email"
33. inputLineHeight: "normal"
34. inputMaxHeight: null
35. inputMaxWidth: null
36. inputName: "email"
37. inputValue: "ENTER AN EMAIL ADDRESS"
38. inputWidth: null
39. joinButtonBackgroundColor: "#283437"
40. joinButtonBorderColor: "#283437"
41. joinButtonClass: "ui-button"
42. joinButtonColor: "#ffffff"
43. joinButtonFontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif"
44. joinButtonFontSize: "0.9em"
45. joinButtonIdentifier: "subscribe-button"
46. joinButtonLineHeight: "normal"
47. joinButtonLink: "#subscribe-button"
48. joinButtonTitle: "Subscribe to receive newsletter."
49. joinButtonValue: "join"
50. labelClass: "ui-label"
51. labelFontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif"
52. labelFontSize: "1.35em"
53. labelIdentifier: "email-label"
54. labelLineHeight: null
55. labelText: "Join our mailing list"
56. labelTextClass: "ui-label-text"
57. labelTextColor: "#283437"
58. noticeClass: "ui-notice"
59. noticeFontFamily: "Geneva, Verdana, 'Verdana Ref', sans-serif"
60. noticeFontSize: "0.91em"
61. noticeLineHeight: "normal"
62. noticeText: "Your information is safe with us!"
63. noticeTextColor: "#283437"
64. submitCallback: $.noop

demos Try mailinglistsubmitter. (5)

demo 1 This is mailinglistsubmitter with default settings.

        <script type="text/javascript">
            $(function() {
                $("#demo-1-control-1").mailinglistsubmitter();
            });
        </script>

demo 2 Change the background and fore colors.

        <script type="text/javascript">
            $(function() {
                $("#demo-2-control-1").mailinglistsubmitter({
                    backgroundColor: "#edc6d3",
                    color: "#3a3034",
                    containerIdentifier: "ui-mailing-list-submitter-2",
                    formIdentifier: "subscribe-form-2",
                    formSubmitResultFailureColor: "#70220f",
                    formSubmitResultIdentifier: "result-2",
                    formSubmitResultSuccessColor: "#1f3922",
                    imagePath: "../png/Second-Mailing-List-Envelope-Icon.png",
                    inputBlurBackgroundColor: "#3a3034",
                    inputBorderColor: "#3a3034",
                    inputColor: "#3a3034",
                    inputIdentifier: "email-2",
                    inputName: "email-2",
                    inputWidth: "32%",
                    joinButtonBackgroundColor: "#6d5b61",
                    joinButtonIdentifier: "subscribe-button-2",
                    joinButtonLink: "#subscribe-button-2",
                    labelIdentifier: "email-label-2",
                    labelTextColor: "#3a3034",
                    noticeTextColor: "#3a3034"
                });
            });
        </script>

demo 3 Change font sizes.

        <script type="text/javascript">
            $(function() {
                $("#demo-3-control-1").mailinglistsubmitter({
                    backgroundColor: "#ed9c73",
                    color: "#3a261c",
                    containerIdentifier: "ui-mailing-list-submitter-3",
                    formIdentifier: "subscribe-form-3",
                    formSubmitResultFailureColor: "#3e0906",
                    formSubmitResultIdentifier: "result-3",
                    formSubmitResultSuccessColor: "#061602",
                    imagePath: "../png/Third-Mailing-List-Envelope-Icon.png",
                    inputBlurBackgroundColor: "#3a261c",
                    inputBorderColor: "#3a261c",
                    inputColor: "#3a261c",
                    inputFontSize: "0.7em",
                    inputIdentifier: "email-3",
                    inputName: "email-3",
                    joinButtonBackgroundColor: "transparent",
                    joinButtonBorderColor: "#3a261c",
                    joinButtonColor: "#3a261c",
                    joinButtonFontSize: "0.9em",
                    joinButtonIdentifier: "subscribe-button-3",
                    joinButtonLink: "#subscribe-button-3",
                    labelFontSize: "1.05em",
                    labelIdentifier: "email-label-3",
                    labelTextColor: "#3a261c",
                    noticeFontSize: "0.8em",
                    noticeTextColor: "#3a261c"
                });
            });
        </script>

demo 4 Use custom text.

        <script type="text/javascript">
            $(function() {
                $("#demo-4-control-1").mailinglistsubmitter({
                    backgroundColor: "#7486b7",
                    color: "#232937",
                    containerIdentifier: "ui-mailing-list-submitter-4",
                    formIdentifier: "subscribe-form-4",
                    formSubmitResultFailureColor: "#ffffff",
                    formSubmitResultIdentifier: "result-4",
                    formSubmitResultSuccessColor: "#ffffff",
                    imagePath: "../png/Fourth-Mailing-List-Envelope-Icon.png",
                    inputBlurBackgroundColor: "#232937",
                    inputBorderColor: "#232937",
                    inputColor: "#232937",
                    inputIdentifier: "email-4",
                    inputName: "email-4",
                    inputValue: "Enter your email...",
                    joinButtonBackgroundColor: "#849bd0",
                    joinButtonBorderColor: "#232937",
                    joinButtonIdentifier: "subscribe-button-4",
                    joinButtonLink: "#subscribe-button-4",
                    joinButtonTitle: "Submit email address to receive newsletters.",
                    joinButtonValue: "Subscribe",
                    labelFontSize: "1.2em",
                    labelIdentifier: "email-label-4",
                    labelText: "Subscribe to receive newsletters",
                    labelTextColor: "#232937",
                    noticeText: "We will not share your information.",
                    noticeTextColor: "#232937"
                });
            });
        </script>

demo 5 Use a custom callback function.

        <script type="text/javascript">
            $(function() {
                $("#demo-5-control-1").mailinglistsubmitter({
                    backgroundColor: "#9d7854",
                    color: "#33281b",
                    containerIdentifier: "ui-mailing-list-submitter-5",
                    formIdentifier: "subscribe-form-5",
                    formSubmitResultFailureColor: "#ffffff",
                    formSubmitResultIdentifier: "result-5",
                    formSubmitResultSuccessColor: "#ffffff",
                    imagePath: "../png/Fifth-Mailing-List-Envelope-Icon.png",
                    inputBlurBackgroundColor: "#433424",
                    inputBorderColor: "#433424",
                    inputColor: "#433424",
                    inputIdentifier: "email-5",
                    inputName: "email-5",
                    inputWidth: "32%",
                    joinButtonBackgroundColor: "#5d4732",
                    joinButtonBorderColor: "#433424",
                    joinButtonIdentifier: "subscribe-button-5",
                    joinButtonLink: "#subscribe-button-5",
                    labelIdentifier: "email-label-5",
                    labelTextColor: "#33281b",
                    noticeTextColor: "#33281b",
                    submitCallback: function ( control, data, textStatus, jqXHR ) {
                        var message;
                        var options;
                        var result;

                        message = data.message;
                        options = control.options;

                        result = $("#" + options.formSubmitResultIdentifier);

                        result.find( "p" )
                              .css({
                                  color: options.formSubmitResultSuccessColor
                              })
                              .html( "" )
                              .hide()
                              .text( message )
                              .fadeIn( "slow" );

                        alert( "The following message was returned:\r\n" + message );

                        control.option( "inputBackgroundColor", "#000000" );
                        control.option( "inputColor", "#ffffff" );
                    }
                });
            });
        </script>

modalnotifier The modal notifier control displays a modal dialog window. The modal notifier plug-in has six display styles. A web developer can attach a specified event to a target element. A web developer may use a custom callback function to handle ajax responses that occur when the event that is attached to the target element is triggered.

options View a complete list of options and default values. (48)
1. action: "../php/track_event.php"
2. ajax: null
3. backgroundColor: "#acddea"
4. buttonContainerClass: "ui-notification-button-container"
5. buttonContainerIdentifier: "notification-button-container"
6. buttonContainerWidth: "100%"
7. closeButtonBackgroundColor: "transparent"
8. closeButtonBorderColor: "transparent"
9. closeButtonBorderStyle: "dotted"
10. closeButtonBorderWidth: "1px"
11. closeButtonClass: "ui-notification-close-button"
12. closeButtonColor: "#283437"
13. closeButtonFontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif"
14. closeButtonFontSize: "1.0em"
15. closeButtonIdentifier: "notification-close-button"
16. closeButtonLink: "#ui-modal-notifier"
17. closeButtonMouseenterBorderColor: "#283437"
18. closeButtonMouseenterBorderStyle: "dotted"
19. closeButtonMouseenterBorderWidth: "1px"
20. closeButtonMouseenterTextDecoration: "none"
21. closeButtonTextDecoration: "none"
22. closeButtonTitle: "Close the notification."
23. closeButtonValue: "Close"
24. color: "#283437"
25. containerClass: "ui-modal-notifier-container"
26. containerIdentifier: "ui-modal-notifier"
27. containerWidth: null
28. displayStyle: 1
29. failureCallback: $.noop
30. failureText: "An error occurred."
31. iconClass: "ui-notification-close-icon"
32. iconHeight: "16px"
33. iconWidth: "16px"
34. imagePath: "../png/Close-Icon.png"
35. maskClass: "ui-notification-mask"
36. maskIdentifier: "notification-mask"
37. method: "POST"
38. notificationText: "This is the modal notifier control."
39. notificationTextClass: "ui-notification-message"
40. notificationTextFontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif"
41. notificationTextIdentifier: "notification-message"
42. notificationTextLineHeight: "1.4em"
43. successCallback: $.noop
44. targetClass: null
45. targetEvent: null
46. targetIdentifier: null
47. targetLocationIdentifier: null
48. targetStructure: null

demos Try modalnotifier. (5)

demo 1 Set options for the target element.

        <script type="text/javascript">
            $(function() {
                $("<div id=\"demo-1-control-2-mask\"></div>").modalnotifier({
                    buttonContainerIdentifier: "notification-button-container-1",
                    closeButtonIdentifier: "notification-close-button-1",
                    closeButtonLink: "#ui-modal-notifier-1",
                    containerIdentifier: "ui-modal-notifier-1",
                    maskIdentifier: "notification-mask-1",
                    notificationTextIdentifier: "notification-message-1",
                    targetClass: "notifier-mouseover-demo",
                    targetEvent: "mouseover",
                    targetIdentifier: "modal-notifier-1",
                    targetLocationIdentifier: "demo-1-control-2",
                    targetStructure: "<div><p>Move your mouse over this text.</p></div>"
                });
            });
        </script>

demo 2 Change event and target.

        <script type="text/javascript">
            $(function() {
                $("<div id=\"demo-2-control-2-mask\"></div>").modalnotifier({
                    backgroundColor: "#edc6d3",
                    buttonContainerIdentifier: "notification-button-container-2",
                    closeButtonIdentifier: "notification-close-button-2",
                    closeButtonLink: "#ui-modal-notifier-2",
                    color: "#3a3034",
                    containerIdentifier: "ui-modal-notifier-2",
                    maskIdentifier: "notification-mask-2",
                    notificationTextIdentifier: "notification-message-2",
                    targetClass: "notifier-click-demo",
                    targetEvent: "click",
                    targetIdentifier: "modal-notifier-2",
                    targetLocationIdentifier: "demo-2-control-2",
                    targetStructure: "<div><button>Trigger!</button></div>"
                });
            });
        </script>

demo 3 Change button style.

        <script type="text/javascript">
            $(function() {
                $("<div id=\"demo-3-control-2-mask\"></div>").modalnotifier({
                    backgroundColor: "#ed9c73",
                    buttonContainerIdentifier: "notification-button-container-3",
                    closeButtonBackgroundColor: "#3a261c",
                    closeButtonColor: "#ffffff",
                    closeButtonIdentifier: "notification-close-button-3",
                    closeButtonLink: "#ui-modal-notifier-3",
                    closeButtonMouseenterBorderColor: "transparent",
                    closeButtonMouseenterBorderStyle: "solid",
                    color: "#3a261c",
                    containerIdentifier: "ui-modal-notifier-3",
                    imagePath: null,
                    maskIdentifier: "notification-mask-3",
                    notificationTextIdentifier: "notification-message-3",
                    targetClass: "notifier-dblclick-demo",
                    targetEvent: "dblclick",
                    targetIdentifier: "modal-notifier-3",
                    targetLocationIdentifier: "demo-3-control-2",
                    targetStructure: "<div><p>Double-click me!</p></div><div style=\"clear: both;\"></div>"
                });
            });
        </script>

demo 4 Change font style.

        <script type="text/javascript">
            $(function() {
                $("<div id=\"demo-4-control-2-mask\"></div>").modalnotifier({
                    backgroundColor: "#7486b7",
                    buttonContainerIdentifier: "notification-button-container-4",
                    closeButtonFontFamily: "'Open Sans', sans-serif",
                    closeButtonFontSize: "0.8em",
                    closeButtonIdentifier: "notification-close-button-4",
                    closeButtonLink: "#ui-modal-notifier-4",
                    color: "#232937",
                    containerIdentifier: "ui-modal-notifier-4",
                    maskIdentifier: "notification-mask-4",
                    notificationTextIdentifier: "notification-message-4",
                    targetClass: "notifier-change-demo",
                    targetEvent: "change",
                    targetIdentifier: "modal-notifier-4",
                    targetLocationIdentifier: "demo-4-control-2",
                    targetStructure: "<div><label for=\"control\">Color:</label><select><option>Select a color:</option><option>Blue</option><option>Pink</option><option>Orange</option><option>Dark Blue</option><option>Brown</option></div>"
                });
            });
        </script>

demo 5 Use a custom callback function.

        <script type="text/javascript">
            $(function() {
                $("<div id=\"demo-5-control-2-mask\"></div>").modalnotifier({
                    backgroundColor: "#9d7854",
                    buttonContainerIdentifier: "notification-button-container-5",
                    closeButtonIdentifier: "notification-close-button-5",
                    closeButtonLink: "#ui-modal-notifier-5",
                    color: "#33281b",
                    containerIdentifier: "ui-modal-notifier-5",
                    failureCallback: null,
                    maskIdentifier: "notification-mask-5",
                    notificationTextIdentifier: "notification-message-5",
                    successCallback: function ( control, data, textStatus, jqXHR ) {
                        var element;
                        var form;
                        var mask;
                        var message;
                        var notification;
                        var options;
                        var request;
                        var response;

                        mask = $("<div />");
                        form = $("#demo-5-control-2").find( "form" );

                        message = data.message;
                        element = control.element;
                        options = control.options;
                        notification = element.children( "#" + options.containerIdentifier );

                        mask.attr( "id", options.maskIdentifier )
                            .addClass( options.maskClass );

                        element.prepend( mask );

                        mask.fadeIn( "fast" );
                        notification.fadeIn( "fast" );

                        console.log( "The following message was returned:\r\n" + message );

                        request = {
                            data: form.serialize(),
                            dataType: "json",
                            type: "POST",
                            url: "../php/compute_winner.php"
                        };

                        response = $.ajax( request );

                        response.done( function ( data ) {
                            console.log( data.message );
                        });
                    },
                    targetClass: "notifier-submit-demo",
                    targetEvent: "submit",
                    targetIdentifier: "modal-notifier-5",
                    targetLocationIdentifier: "demo-5-control-2",
                    targetStructure: "<div><form><label for=\"amount\">How many macarons can you consume?</label><input type=\"number\" id=\"amount\" name=\"amount\" value=\"0\" min=\"0\" max=\"25\" /><input type=\"submit\" value=\"Submit\" /></form></div>"
                });
            });
        </script>

Page
1
Per Page
5
Total Items: 2