Ymprompt frame. (Popup box)

Ymprompt from the simplest 1.0 version to the current 4.0 version, the code has undergone four major changes, the component has been greatly improved in function, the application flexibility is more flexible, the environment of the application environment is more extensive, especially in the 4.0 version of the mask display hidden, button/icon customization, Component language Control, window hover position control function, more enhance the application scope of the component, so that it can not only use to simulate alert pop-up and other applications, but also to achieve similar QQ message hint, landing window, progress bar and other effects.

However, any thing has its two sides, with the increase in functionality, the complexity of the use of components is also gradually increasing, fortunately, each update of the components to work on the basis of compatibility prior to the revision, which allows you to easily customize the simple popup box, you can also be more complex parameters to customize a more powerful pop-up box. Do not be intimidated by a bunch of parameters and methods in the demo and instructions, and many parameters may not be used, and it is sufficient to find the one or two parameters we really need.

This plan to release 4.0 years ago, but because some of the functions of the implementation has been not very stable, plus years ago, the reason for the work, postponed until the year after the release, the version of the Code on the basis of 3.0 made a relatively large changes, fixed some of the previous version of the problem, added a few features, a lot of netizens to me, in While perfecting and improving the components, although I have been trying to keep the code of the component minimized, any one byte of code can save the province, but limited to personal ability, so the code may still not be the most concise, if the hero has good ideas for improvement, please feel free!

The main improvements include the following:

version 4.0 demo address:http://tech.cncms.com/demo/js/ymPrompt4.0/demo.html

version 4.0:Ymprompt-4.0-b-20090302.rar

Overwrite Frameset Example:http://tech.cncms.com/demo/js/ymPrompt4.0/frameset.html

Ymprompt calling method and parameter description

2. Introduce ymprompt.js in the page. such as: <script type= "Text/javascript" src= "Ymprompt.js" ></script>
4. Introduce the corresponding skin file CSS in the page, such as: <link rel= "stylesheet" type= "Text/css" href= "Skin/qq/ymprompt.css"/>
5. Custom Component default configuration information (this step is optional, this method can be called at any time)
   Page JS in the Ymprompt.setdefaultcfg (CFG) method to modify the component part or all of the default properties.
   such as: Ymprompt.setdefaultcfg ({maskalpha:0.2,maskalphacolor: ' #00f '})
   
   The default configuration for the component (the default value for the configuration item will be used for items that are not set):
   {
   Message: ' content ',//Message box button
   WIDTH:300,//Wide
   height:185,//High
   Title: ' title ',//message box title
   Handler:function () {},//callback Event
   Maskalphacolor: ' #000 ',//matte Transparent Color
   maskalpha:0.1,//Matte transparency
   
   Iframe:false,//iframe mode
   ICOCLS: ",//Icon style
   Btn:null,//button configuration
   Autoclose:true,//click Close, OK etc button to automatically close
   Fixposition:true,//scroll with scroll bar
   Dragout:false,//Do not allow dragging out of form range
   Titlebar:true,//Display title bar
   Showmask:true,//Display matte
   Winpos: ' C ',//display in the middle of the page
   winalpha:0.8,//transparency of forms when dragging a form
   Closebtn:true,//whether the Close button is displayed
   Showshadow:false,//Do not show shadows, only valid for IE
   Useslide:false,//Do not use fades
   SLIDECFG:{INCREMENT:0.3,INTERVAL:50},//Fade configuration
   
   button text, which can be localized by customizing these properties
   Closetxt: ' Off ',
   Oktxt: ' OK ',
   Canceltxt: ' Cancel ',
   Msgcls: ' ym-content '//style of message content
   Minbtn:false,//Do not display the Minimize button
   Mintxt: ' Minimize ',
   Maxbtn:false,//Do not display the Maximize button
   Maxtxt: ' Maximizing '
   Allowselect:false,//whether to allow the selection of message box content, default does not allow
   Allowrightmenu:false//Whether to allow right-click in message box, default does not allow
   }
6. Call the corresponding message function (two parameters passed in) according to your needs:
   • Ymprompt.alert (parameters)//message prompt type
   • Ymprompt.succeedinfo (Parameters)//Success Information type
   • Ymprompt.errorinfo (parameter)//error message type
   • Ymprompt.confirminfo (Parameters)//Inquiry Message Type
     
     
   • Ymprompt.win (parameters)//Custom window type
   
   There are two ways to pass in a parameter:
   • The first is the traditional parameter passed in, in order to pass in the corresponding parameter values (be sure to follow the order), for the value that does not need to be set, pass null. such as Ymprompt.alert (' content ', Null,null, ' title ')
     Parameter order is consistent in the default configuration above the parameter order
     
     
   • (recommended) The second is the way to pass in JSON, you need to specify the field name, no order, set the relevant properties as needed. such as Ymprompt.alert ({title: ' title ', Message: ' Content '})
   
   the parameters of the five methods are exactly the same (all parameters are optional, the default parameter values are used without passing in), meaning the following:
   • Message : The content to be displayed by the messaging component, which defaults to "content."
   • Width : The size of the message box, which defaults to 300.
   • Height : The width of the message box, which defaults to 185.
   • Title : Message Component caption, default to "title"
   • handler: callback function. When the OK/Cancel/Close button is clicked, the function is triggered and the button ID of the click is passed in. If ok means OK, Cancel is canceled, close is closed
   • maskalphacolor: The color of the mask, which is black by default.
   • Maskalpha: The opacity of the mask, which defaults to 0.1.
     
     
   • Fixposition: Sets whether the popover floats with the scroll bar, stays in a fixed position on the screen, and defaults to True
   • Dragout: sets whether to allow dragging out of the screen range, false by default.
   • autoClose: Set the user to automatically close the window after clicking the button in the window, and the default is true (set to False after the program can be closed by calling the Close method).
   • titlebar: Displays the title bar, which is displayed by default. Note that if there is no title bar you need to control the shutdown in your program.
   • Showmask: whether to show matte layer, default to True
   • Winpos: The location of the pop-up window, supporting 8 built-in locations (C,L,T,R,B,LT,RT,LB,RB) and custom window coordinates, default to C.
     Each parameter meaning: C: The middle of the page, L: page left, T: Page top, R: Page right, B: Top of page, lt: Upper left corner, RT: Upper right corner, LB: lower left, RB: Lower right corner
   • Winalpha: The transparency that pops up when the form is dragged, default to 0.8
     
     The following three parameters are mainly used for the win method (you can, of course, override the default properties of the previous four message types by setting these).
   • iframe: Whether the content is loaded using the IFrame method, if true or object, the component attempts to load the message content as a URL (if the property value is an object, Add the contents of the object as an IFrame property, such as an iframe: {id: ' myId ', Name: ' MyName ', src: ' http://www.baidu.com '} then the ID of the IFRAME is Myid,name is MYNAME,SRC for http://www.baidu.com). The default is False.
   • icocls: icon type. The incoming content is classname, and you can refer to how the icon is defined in YMPROMPT.CSS. The default is empty.
   • btn: button definition. The array form is passed in. The format of each button is [' button text ', ' button ID '],
     such as [[' OK ', ' OK '],[' Cancel ', ' Cancel '],[' off ', ' close '], etc.
     Note that a single button should look like this: [[' OK ', ' OK ']
   • closebtn: Whether the Close button is displayed, the default is True (display).
     
     
   • Showshadow: whether to enable the PopOver shadow effect (IE only), the default is False
   • Useslide:F to enable the fade fade effect of the popup box, default to False
   • slidecfg: configuration information for the gradient effect, the parameter format is object, and the property includes Incerment: The value of the transparency increment each time, interval: the speed of the change. For example: {incerment:0.3,interval:50}. This parameter is valid only if Useslide is true
     
     The following parameters can be used to localize the component language, such as in a system such as English
   • Oktxt: Determines the text description of the button, which defaults to "OK"
   • canceltxt: text Description of the Cancel button, default to "Cancel"
   • closetxt: text Description of the Close button (displayed when the mouse is placed on the Close button), default to "off"
   • mintxt: text Description of the minimized button, default to "minimized"
   • maxtxt: text Description of the Maximize button, default to "maximize"
     
     
   • minbtn: Whether to display the Minimize button, default to False
   • maxbtn: whether to display the Maximize button, default to False
     
     
   • Allowselect: whether to allow selection of message box contents, default to False
   • Allowrightmenu: whether to allow right-click in message boxes, false by default
7. Operation Interface:
   
   

   Property:

   Version

   : Current release Number: alert (ymprompt.version)

   pubDate: The release date of the current release is as follows: Alert (ymprompt.pubdate);

   CFG: The current default configuration of the component

   Method:

   setdefaultcfg (CFG): Sets the default properties of the component, all of which are set by default in CFG.
   such as: Ymprompt.setdefaultcfg ({maskalpha:0.2,maskalphacolor: ' #00f '}); Set mask layer color to blue, transparency 0.2
   
   

   getpage (): Gets the DOM object to the IFRAME in the iframe window mode.
   such as: Alert (Ymprompt.getpage (). ContentWindow.document.body.outerHTML); Get HTML content for an IFRAME page
   
   

   Resizewin (W,H): Dynamically modifies the size of the window through the program. Parameter: w: width, h: Height
   such as: Ymprompt.resizewin (400,300); Modify the popover width to 400px and the height to 300px
   
   

   Dohandler (Sign,autoclose): Simulates a Click event that triggers a button. Parameter sign: The identity passed to the callback function, AutoClose: Whether the window is automatically closed (global configuration by default)
   such as: Ymprompt.dohandler (' OK ', false); Triggers the Click event of the OK button, and does not close the window after executing the callback function
   
   

   getbuttons (): Gets all the button objects for the current popup, and returns the result as an object collection (array).
   such as: Var btnid=ymprompt.getbuttons () [0].id; Gets the ID of the first button
   
   

   Close (): Close the currently popup window such as: Ymprompt.close ()
   
   

   Max (): Maximizes the pop-up window.
   
   

   min (): Minimized popup window
   
   

   Normal (): Window normal popup State

9. Other Notes: If you think the "object. Method" Call method is more cumbersome, you can simplify the call as follows:
   Set the Var alert=ymprompt.alert before calling. It can then be invoked using alert ().

Ymprompt frame. (Popup box)