Javascript+jquery: Fake Android toast Prompt box

Source: Internet
Author: User

The toast in Android apps is primarily intended to prompt the user with the same intent as the alert () method in JavaScript, but the beauty is better than alert, and the effect of making a toast to Android in light applications is more of a native app experience.

Purpose: Create a faux-Android toast effect on an HTML page

Language:javascript+jquery

Method declaration:
function toast (message, duration)

Parameter description:
String Message-toast hint Content
int duration-toast display duration (optional "Long", "short" or a specific number of milliseconds, "short" is 5000, "Long" is the default "short" when this parameter is not filled)

Method Body:

vartoast_id = 0;//external variable to hold the timer ID generated by the settimeoutvarZIndex = 99;//The Z-index can be adjusted on its own to ensure that it is not obscured by other elements .functiontoast (message, duration) {window.cleartimeout (toast_id); //If you call two toasts in a short time, clear the last timeout    if(document.getElementById ("App_toast")! =undefined) {//The last toast did not disappear, this time force stop animation and delete the element$ ("#app_toast"). Stop (); Document.body.removeChild (document.getElementById ("App_toast")); }//setting the time-out periodDuration = duration==NULL?" Short:d uration; if(duration== "Short") Duration = 2000; Else if(duration== "Long") Duration = 5000; //Defining new elements    vardiv = document.createelement ("div"); Div.setattribute ("Style", "Position:fixed;top:89%;text-align:center;width:95%;z-index: "+ zindex);
Div.setattribute ("id", "app_toast");
  //write InnerHTML content, Z-index for app_tpast z-index value plus 1,value for hint content div.innerhtml = ' <input type="Button" id= "App_txt_toast" style= "padding-left:20px;padding-right:20px;border-radius:8px;opacity:0.2;height : 20px;background: #000000; color: #ffffff; Border:none;z-index: ' + (zindex+1) + '; "value=" ' +message+ ' "/> ';  Document.body.appendChild (DIV); //Add element to document $ ("#app_txt_toast"). Animate ({height: ' 29px ', opacity: ' 0.7 '}, +, function () {}); $("#app_toast"). Animate ({top: ' 85% '}, +, function () {}); //Make a toast slide effect from the bottom //Last duration milliseconds after fadeout toast_id = window.settimeout (function () {$ (   "#app_toast"). FadeOut ($, function () {Document.body.removeChild (document.getElementById ("App_toast")); toast_id = 0; })}, duration);}

Call Method:Toast ("message") or toast ("message", 3000) or toast ("message", "short")

Javascript+jquery: Fake Android toast Prompt box

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.