Alert prompt box open-source framework Tiny-Alert based on Zepto

Source: Internet
Author: User

Alert prompt box open-source framework Tiny-Alert based on Zepto
Project homepage: http://shootyou.github.io/tiny-alert/?is tiny-alert?

This is a prompt box plug-in based on Zepto, which can be used on mobile terminals for better results. It is designed as a more beautiful alternative to mobile native alert and confirm prompt boxes. It also implements a loading effect. Its core code references rDailog and is adapted to zepto based on it, removing features that are not available on mobile terminals and making it look more beautiful.
It has the following features:

  • Lightweight, with no more than 300 lines of code, and only 2 k after compression.
  • Zepto is more suitable for mobile terminals.
  • Callback is supported.
  • Barely beautiful.
  • Built based on Grunt. In this way, I feel more and more like a front-end attacker.

    How to use Tiny-Alert

    First introduce related resources:

    
        <script type="text/javascript" src="http://libs.useso.com/js/zepto/1.1.3/zepto.min.js"></script><script type="text/javascript" src="js/zepto.alert.min.js"></script>
    If you think the style is ugly, change it yourself. Pay attention to the resources under images.

    Then we can construct a simple loading prompt box.

    $('#demo-1').on('click', function() {        $.dialog();});
    Click here to see the effect. By default, it is a box that does not disappear. If you click it, refresh the page and it will not disappear.

    Create a prompt dialog box.

    $ ('# Demo-2 '). on ('click', function () {$. dialog ({content: 'window will be closed automatically after 2 seconds ', title: "alert", time: 2000 });});
    Click here to see the effect. The pop-up box is closed in 2 seconds.

    A confirmation box supports callback.

    $ ('# Demo-3 '). on ('click', function () {$. dialog ({content: 'Dialog box content', title: 'OK', OK: function () {alert ('I am a confirmation button. When the callback function returns false, the dialog box is not closed. '); Return false ;}, cancel: function () {alert ('here is the cancel button') ;}, lock: false });});
    Click here to see the effect.

    Attributes and default values
    // Content: 'loading... ', // icon style: load/OK/alert title: 'load', // width: 'auto', // height: 'auto ', // confirmation button callback function OK: null, // cancel button callback function cancel: null, // OK button text okText: 'OK', // cancel button text cancelText: 'cancel', // automatic shutdown time (millisecond) time: null, // whether to lock screen lock: true, // z-index value zIndex: 9999

    For the first time, I hope to give you more advice.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.