Prototype.js

xiaoxiao2021-04-08 267

Collabnet Enterprise Edition

My start page ProjectsCommunitiesJava.net

Project>

EDU-Gelc>

edu-gelc-main>

Edu-Incubator>

Compdoc2cn

Project tool

Project homepage

Project Message Discussion Forum Mail List

Project Document Version Control - CVS

Event tracking

how do I...

GET RELEASE Notes for Collabnet 3.5.1? Help?

Prototype.js development notes

Overlay version 1.3.1

1. What is prototype?

Maybe you haven't used it yet, prototype.js is a JavaScript package written by SAM Stephenson. This concept of conceivement of a good compatibility standard will assume the burden of creating fat clients, high-interactive web applications. Easily add Web 2.0 characteristics.

If you have experienced this package recently, you are likely to find a document is not one of its strengths. Like all the developers I have, I can only take one of the source code of Prototype.js and test each of them. I want to write a note when I learn him and then share it to others.

I also provide an object, class, method, and extended unofficial reference for this package.

2. General method

This package contains many predefined objects and versatile methods. The obvious purpose of writing these methods is to reduce your large number of repeating coding and usage.

2.1. Use $ () method

$ () Method is to use a convenient discument.getlementById () method in the DOM, just like this DOM method, this method returns the element of the ID incoming ID.

This is more winning more than a method in the DOM. You can pass multiple IDs as a parameter and then returns an Array object with an element with all required elements. The following example will describe you.

test page </ title> <script src = "prototype-1.3.1.js"> </ script> <script> Function test1 () { VAR D = $ ('mydiv'); Alert (D.INNNERHTML); } Function test2 () { VAR DIVS = $ ('mydiv', 'myotherdiv'); For (i = 0; i <divs.length; i ) { Alert (Divs [i] .innerhtml); } } </ script> </ HEAD> <Body> <div id = "mydiv"> this is a paragraph </ div> <div id = "myotherdiv"> this is another paragraph </ div> <Input Type = "Button" Value = Test1 οnclick = "TEST1 ();> <Input Type = "Button" Value = Test2 οnclick = "TEST2 ();"> </ body> </ Html> Another benefit of this method is that you can pass to the ID string or element object you, which makes it very useful when creating a method of incoming any form parameters. 2.2. Using $ f () method $ F () method is another very popular shorthand. It can return any values of the input form control, such as a text box or drop-down box. This method can be introduced to the element ID or element yourself. <script> Function TEST3 () { Alert ($ f ('username'); } </ script> <input type = "text" id = "username" value = "joe doe"> <Input Type = "Button" Value = Test3 οnclick = "TEST3 ();> 2.3. Use the try.these () method The TRY.THESE () method makes it easy to implement the different methods until one of them have become very easy. He performs a series of methods as a parameter and performs these methods in one by one. A successful execution, returning the return value of the method that successfully executed. In the following example, XMLNode.Text is easy to use in some browsers, but XMLNode.TextContent works normally in other browsers. Using the TRY.THESE () method we can get the return value of the method of the normal operation. <script> Function getXmlnodeValue (XMLNode) { Return TRY.These Function () {return XMLNode.Text;}, Function () {returnTent;) ); } </ script> 3. AJAX object The common method mentioned above is very good, but face it, they are not the most advanced thing. Are they? You are likely to write these methods that have similar functions in your script. But these methods are just the hoss of the iceberg. I am sure that your reason for prototype.js is probably due to its AJAX capabilities. So let us explain how this package makes it easier when you need to complete the AJAX logic. Ajax object is a predefined object, created by this packet, to encapsulate and simplify the embassy code involved in the Ajax function. This object contains a series of encapsulated Ajax logic classes. Let's take a look at them. 3.1. Use ajax.Request classes If you don't use any help package, you are likely to write a lot of code to create an XMLHttpRequest object and track it asynchronously, then resolve the response and process it. You will be very lucky when you don't need to support more than one type of browser. In order to support the AJAX functionality. This package defines the Ajax.Request class. If you have an application to communicate with the server via URL http: // Yourver / App / Get_Sales? Empid = 1234 & Year = 1998. It returns the XML response below. <? XML Version = "1.0" encoding = "UTF-8"?> <ajax-response> <response type = "object" id = "productdetails"> <monthly-sale> <Employee-Sales> <Employee-Id> 1234 </ Employee-id> <year-month> 1998-01 </ year-month> <Sales> $ 8,115.36 </ sale> </ Employee-Sales> <Employee-Sales> <Employee-Id> 1234 </ Employee-id> <year-month> 1998-02 </ year-month> <Sales> $ 11,147.51 </ sales> </ Employee-Sales> </ monthly-sales> </ response> </ ajax-response> Communication with Ajax.Request objects and servers and get this XML is very simple. The following example demonstrates how it is done. <script> Function searchsales () { Var Empid = $ f ('lstemployees'); VAR Y = $ f ('lstyears'); Var URL = 'http: // yoursever / app / get_sales' VAR PARS = 'Empid =' Empid '& Year =' Y; Var myajax = new ajax.Request URL, {Method: 'Get', Parameters: Pars, Oncomplete: ShowResponse} ); } Function ShowResponse (OriginalRequest) { // Put Returned XML in The Textarea $ ('result'). Value = OriginalRequest.ResponseText; } </ script> <select id = "lstemployees" size = "10" οnchange = "searchsales ()"> <option value = "5"> BUCHANAN, Steven </ option> <option value = "8"> Callahan, Laura </ option> <option value = "1"> DAVOLIO, NANCY </ OPTION> </ select> <select id = "lstyears" size = "3" οnchange = "searchsales ()"> <option selected = "SELECTED" value = "1996"> 1996 </ option> <option value = "1997"> 1997 </ option> <option value = "1998"> 1998 </ option> </ select> <textarea ID = Result cols = 60 rows = 10> </ textarea> Do you see the second object that is incoming to the Ajax.Request constructor? Parameters {Method: 'Get', Parameters: Pars, OnComplete: ShowResponse} indicates a true writing of an anonymous object. He indicates that the object you have introduced has a property named a Method value of 'get', and the other property name is a query string containing the HTTP request, and an OnComplete property / method contains a function showResponse. There are also other properties to define and set up in this object, such as Asynchronous, you can determine whether Ajax is asynchronous for the call to the server (the default value is true). This parameter defines the options for the AJAX call. In our example, the first parameter requests the URL through the http get command, incorporating the variable PARS containing the query string, the Ajax.Request object will call the showResponse method when it completes the reception response. Maybe you know that XMLHttpRequest will report progress during HTTP requests. This progress is described as four different phases: loading, loaded, interactive, or complete. You can call the Ajax.Request object at any stage to customize the custom method, and Complete is the most commonly used. To call custom methods only need to provide custom method objects in the ONXXXX attribute / method in the requested option parameter. Just like oncomplete in our example. The way you are incorporated will be called with a parameter, this parameter is an XMLHttpRequest object yourself. You will use this object to get the returned data and verify the status property containing the HTTP result code in this call. There are also two useful options to process results. We can pass a method at the onSuccess option, and then call the Ajax error, the opposite, or you can pass a method at the onfailure option, which is called when an error occurs. As the ONXXXX option is incorporated, the two are also incoming an XMLHttpRequest object with an AJAX request when they are called. Our example does not handle this XML response in any interesting way, we just put this XML into a text domain. A typical application for this response is likely to find the desired information, then update some elements in the page, or may even do some XSLT conversions to generate some HTML in the page. For more complete explanation, please refer to the Ajax.Request reference and ajax option reference. 3.2. Use the Ajax.Updater class If the information returned by the other end of your server is already HTML, then the Ajax.Updater class in this package will make your life easier. With it you only need to provide any element that needs to be returned by the Ajax request, the example is more clear than I write. <script> Function gethtml () { VAR URL = 'http:// YourServer / App / GetSomeHtml'; VAR PARS = 'SomeParameter = ABC'; Var myajax = new ajax.Updater ('PlaceHolder', URL, {Method: 'Get', Parameters: Pars}); </ script> <Input Type = Button Value = gethtml οnclick = "gethtml ()"> <div id = "PlaceHolder"> </ div> You can see that this code is more concise than the previous example, does not include an oncomplete method, but an element ID is incorporated in the constructor. Let's modify the code slightly to describe how it is possible to have an error in the client segment. We will add more options to specify a method of processing an error. This is done with the onfailure option. We also specified a PlaceHold only after successful requests. In order to complete this purpose, we modified the first parameter from a simple element ID to an object with two attributes, Success (used when OK) and Failure (used when there were problems) In the following example, the Failure property is not used, but only the ReportError method is used at ONFAILURE. <script> Function gethtml () { VAR URL = 'http:// YourServer / App / GetSomeHtml'; VAR PARS = 'SomeParameter = ABC'; Var myajax = new ajax.Updater {Success: 'PlaceHolder'}, URL, {Method: 'Get', Parameters: Pars, OnFailure: ReportError}; } Function ReportError (Request) { Alert ('sorry. there is an error.'); } </ script> <Input Type = Button Value = gethtml οnclick = "gethtml ()"> <div id = "PlaceHolder"> </ div> If your server logic is returns a JavaScript code instead of a simple HTML tag, the Ajax.Updater object can perform the JavaScript code. In order to treat this object to be responded to JavaScript, you only need to simply add the evagescripts: True property in the object constructor of the last parameter. For more complete explanations, please refer to the Ajax.Updater reference and the AJAX option reference. 4. Prototype.js Reference 4.1. Extension of the JavaScript class A way to join the feature in the Prototype.js package is to extend existing JavaScript classes. 4.2. Extension of the Object class Table 1. Expansion of the Object class Method Category Parameter Description Extend (Destination, Source) StaticDestination: Any object, Source: Any object provides a inheritance mechanism with a way from Source to Destination to replicate all properties and methods. EXTEND (Object) instance provides a inheritance mechanism with any object that is copied from all properties and methods from incoming Object. 4.3. Extension of Number class TABLE 2. Number class extension Method Category Parameter Description TOCOLORPART () Instance (NONE) Returns a number of hexadecimal descriptions that converted to RGB color components to HTML in HTML. 4.4. Expansion of the Function class Table 3. Expansion of the Function class Method Category Parameter Description Bind (Object) InstanceObject: The object with this method returns a function instance that is brought in advance on an object with the function (= method), and the returned method will have the same parameters as the original method. BindaseventListener (Object) InstanceObject: Objects with this method returns a function instance that is pre-bound in an object with this function (= method), and the returned method will use the current event object as its parameters. Let's take a look at the specific examples of these extensions. <input type = checkbox id = mychk value = 1> TEST? <script> // Declaring the class Var CheckBoxWatcher = Class.create (); // defining the rest of the class impLmentation CheckBoxWatcher.Prototype = { Initialize: Function (chkbox, message) { THIS.CHKBOX = $ (chkbox); THIS.MESSAGE = Message; // Assigning Our Method to the Event This.chkbox.onclick = this.showMessage.BindaseventListener (this); } ShowMessage: Function (evt) { Alert (this.Message ')'); } } Var Watcher = New CheckBoxWatcher ('mychk', 'Changed'); </ script> 4.5. Extension of String class Table 4. String class extension Method Category Parameter Description StripTags () Instance (NONE) Returns a string that removes all HTML or XML tags. EscapeHTML () Instance (NONE) Returns a string of all HTML tags. Unescapehtml () Instance (NONE) and EscapeHTML () are opposite. 4.6. Extension of Document DOM object Table 5. Document DOM object extension Method Category Parameter Description getElementsByClassName (className) InstanceClassName: Associated the CSS class name on the element Returns all elements with the same CSS class name. 4.7. Extension of Event object Table 6. Extension of EVENT object Property Type Description Key_Backspacenumber8: Code of a constant, backspace button. Key_Tabnumber9: Code of constant, Tab key. Key_RETURNNUMBER13: constant, the code of the Enter key. Key_escnumber27: Code of constant, ESC key. Key_LEFTNUMBER37: constant, left arrow key code. Key_upnumber38: Code of constant, up arrow key. Key_rightNumber39: Code of a constant, right arrow key. Key_DownNumber40: Code of constant, down arrow keys. Key_DELETENUMBER46: Code of Constant, Delete (Delete) button. Observers: A list of viewers of the ARRAY cache, which is part of this object. Table 7. Extension of Event object Method Category Parameter Description Element (event) staticEvent: Event object returns an element that triggers this event. iSleftClick (Event) staticEvent: Event Object If the left mouse button is running back TRUE. PointerX (Event) staticEvent: Event object Returns the x coordinate on the page. Pointery (Event) staticEvent: Event object Returns the y coordinate on the page. STOP (Event) staticEvent: Event object uses this method to abort the default behavior of the event to stop the transmission of the event. FindElement (event, tagname) staticevent: event object, tagname: Specifies the name of the tag to find the first to the DOM tree, find the element of the first given mark name, start triggering events from this element. Observe (Element, Name, Observer, Usecapture) staticElement: Object or Object ID, Name: Event Name (such as 'click', 'loading', etc), OBSERVER: Handling this event method, Usecapture: If true, catch The phase processing of the event is handled if false is in the bubbling phase. A method of adding an event. StopobServing (Element, Name, Observer, Usecapture) staticElement: Object or Object ID, Name: Event Name (such as 'click', 'load', etc), OBSERVER: Handling this event method, Usecapture: If True, capture The phase processing of the event is handled if false is in the bubbling phase. Delete a method of processing practices. _observeandcache (Element, Name, Observer, Usecapture) static private method, don't take it. UnloadCache () static (none) private method, do not take it. Clear more memory in memory. Let's see how to use this object to add a processing method for processing the LOAD event of the Window object. <script> Event.Observe (Window, 'Load', ShowMessage, False); Function showMessage () { Alert ('page loaded.'); } </ script> 4.8. New objects and classes defined in prototype.js Another version of this package helps you is to provide many objects that support both object-oriented design philosophy and common functions. 4.9. PeriodicalExecuter Object This object provides a logic of a method to repeat a method on a certain interval. Table 8. PeriodicalExecuter object Method Category Parameter Description [CALLBACK, INTERVAL) CONSTRUCALLLBACK: There is no parameter, the interval: the number of seconds to create this object will repeat the given method. Table 9. PeriodicalExecuter object Property Type Description CallbackFunction () The method is called, which is not incoming parameters. FrequencyNumber interval in seconds. CurrentlyExecUsingBoolean means that this method is being executed. 4.10. Prototype object Prototype doesn't work too important, just declares the version of the package. Table 10. The Prototype Object Property Type Description Versionstring package. EmptyFunctionFunction () empty method object. 4.11. Class object In this package, the Class object is used in declaring other classes. Use this object to declare the class to support the new class to support the initialize () method, and he serves as a constructor. See the example below // Declaring the class Var mysampleclass = class.create (); // defining the rest of the class impLmentation MySampleClass.Prototype = { Initialize: Function (Message) { THIS.MESSAGE = Message; } ShowMessage: Function (AjaxResponse) { Alert (this.Message); } } // Now, let's instantiate and use one Object Var mytalker = new mysampleclass ('hi there.'); Mytal.showMessage (); // Displays alert Table 11. Class object Method Category Parameters Description Create (*) Instance (ANY) Defines the construction method of the new class. 4.12. Ajax object This object is used as the root object that provides a class that provides an AJAX function. Table 12. Ajax object Method Category Parameter Description GetTransport () Instance (NONE) Returns a new XMLHttpRequest object. 4.13. Ajax.base class This class is the base class of the class defined in the AJAX object. Table 13. Ajax.base class Method Category Parameter Description SetOptions (options) InstanceOptions: Ajax option Sets the option you want. Responseissuccess () instance (none) Returns True If the AJAX operation is successful, otherwise false. Responseisfailure () Instance (NONE) is the opposite of Responseissuccess (). 4.14. Ajax.Request class Inherit from Ajax.Base Package AJAX operation Table 14. Ajax.Request class Property Type Category Description EventsArrayStatic list of events / status of all possible reports in Ajax operations. This list includes: 'uninitialized', 'loading', 'loaded', 'intective', and 'complete'. TransportXmlhttpRequestInstance carries the XMLHttpRequest object for Ajax operation. Table 15. Ajax.Request class Method Category Parameter Description [CTOR] CONSTRUCTORL: Request URL, Options: Ajax Option Creates an instance of this object, which will request URL under a given option. Important: If the selected URL is subject to the security settings of the browser, he will not afford it. In many cases, the browser does not request a URL of different hosts (domain names) with the current page. You'd better only use local URL to avoid restricting users to configure their browser (Thank you Clay) Request (URL) instanceURL: Ajax request URL usually does not be called outside. It has been called in the constructor. SetRequestHeaders () instance (none) This method is usually not called outside. Call themselves by this object to configure the HTTP header to send in HTTP request. OnStateChange () instance (none) This method is usually not called outside. This object is called by this object when the AJAX request status changes. RespondToreADyState (ReadyState) InstanceReadyState: Status Number (1 to 4) This method is usually not called outside. This object is called by this object when the AJAX request status changes. 4.15. Options parameter object An important part of AJAX operation is the options parameter. There is no Options class in essentially. Any object can be incomed, as long as there is a needed attribute. Anonymous class is usually created only for Ajax calls. Table 16. Options parameter object Property Type Default Description MethodArray'Post'HTTP request. Parameterstring 'The list of values in the URL format in the HTTP request. AsynchronousBooleanTrue Specifies whether to do asynchronous AJAX requests. PostBodystringundefined In the case of HTTP POST, it is incorporated into the contents of the requested body. RequestHeadersArrayundefined and requests are incorporated together, this list must contain even items, any odd items are the name of the custom head, and the next even item makes the string value of this header project. Example: ['my-header1', 'this is the value', 'my-other-header', 'annother value'] onxxxxxxxxfunction (XMLHttpRequest) undefined In AJAX request, when the corresponding event / status is formed Custom method. For example, Var myopts = {oncomplete: showResponse, onlineed: registerloaded} ;. This method will be incoming a parameter, which is the XMLHttpRequest object that carries a Ajax operation. OnSuccessFunction (XMLHttpRequest) undefined Customer Call when the AJAX request is successfully completed. This method will be introduced into a parameter, which is an XMLHttpRequest object that carries a Ajax operation. OnfailureFunction (XMLHttpRequest) undefined Custom Method calls when the AJAX request is completed but an error occurs. This method will be introduced into a parameter, which is an XMLHttpRequest object that carries a Ajax operation. InsertionFunction (Object, String) NULL is performed in order to inject the returned text into an element. This method will be incorporated into two parameters, to be updated, and applies only to Ajax.Updater response text. EvalscriptsBooleanundefined, false decided whether to execute the script block when the response arrives, only in the Ajax.Updater object. DecayNumberundefined, 1 Decided that when the last response and the previous response at the same time in the Ajax.PeriodicalUpDater object, for example, if set to 2, the later refresh is the same as the previous result, this object will wait 2 settings. The timed interval is in the next refresh, and if it is the same again, then wait 4 times, and so on. Do not set this only, or set to 1, will avoid the accessed frequency slower. 4.16. Ajax.Updater class Inherit from Ajax.Request When the requested URL returns a section of HTML and you want to place it directly into a specific element in the page. This object can also be used if the URL returns a block of <script> and wants to execute it when it is received. Use the EvalScripts option when you contain scripts. Table 17. Ajax.Updater class Property Type Category Description ScriptFragmentStringStatic can determine if the regular expression is a script. ContainersObjectInstance This object contains two properties: AJAX requests to use Containers.SuCcess when executed, otherwise use Containers.Failure. Table 18. Ajax.Updater class Method Category Parameter Description [CTOR] CONSTRUctorContainer: It can be an element ID, or an element yourself, or can be an object with 2 properties - Object.success Ajax is used in successful Elements (or ID) Otherwise, the elements (or IDs) set in Object.Fail, the URL: The requested URL, the Options: Ajax option creates an instance of a given URL with a given option. UpdateContent () Instance (NONE) This method is usually not called outside. When the response arrives, it is called by this object. It uses HTML to update the appropriate element or calls the method incorporated in the Insertion option - this method will be incorporated into two parameters, updated elements and response text. 4.17. Ajax.PeriodicalUpdater class Inherit from Ajax.Base This class repeatedly generates and uses the Ajax.UpDater object to refresh one of the elements in the page. Or perform other tasks that Ajax.Updater can perform. More information References for Ajax.Updater. Table 19. Ajax.PeriodicalUpdater class Property Type Category Description ContainerObjectInstance This value will be directly incoming part of the construction method of Ajax.Updater. UrlstringInstance This value will be directly incoming the construction method of the Ajax.Updater. FrequencyNumberInstance The interval between double refreshes (not frequency), in seconds. Default 2 seconds. This number will multiply the current decay when calling the Ajax.Updater object. DecayNumberInstance keeps the decline level level when the task is performed. Updaterajax.Updaterinstance The last time the Ajax.Updater object TimerObjectInstance notifies the next update JavaScript timer. Table 20. Ajax.PeriodicalUpdater class Method Category Parameter Description [CTOR] CONSTRUctorContainer: It can be an element ID, or an element yourself, or can be an object with 2 properties - Object.success Ajax is used in successful Elements (or ID) Otherwise, the elements (or IDs) set in Object.Fail, the URL: The requested URL, the Options: Ajax option creates an instance of a given URL with a given option. Start () instance (none) This method is usually not called outside. The object is called when the task is initially performed. Stop () instance (none) This method is usually not called outside. The object is called when the periodic execution task is stopped. UpdateComplete () instance (none) This method is usually not called outside. Used by the current Ajax.Updater, when the request is over, it is used as the next request. OntimeRevent () instance (none) This method is usually not called outside. When it is updated to the next update, it is called internal. 4.18. ELEMENT object This object provides a functional way to use when an element in the DOM is operated. Table 21. ELEMENT object Method Category Parameter Description Toggle (ELEM1 [, ELEM2 [, ELEM3 [...]]) Constructorelemn: Element object or ID Switch each incoming element. Hide (Elem1 [, Elem2 [, Elem3 [...]]) InstanceElelecn: Element object or ID with setting it with Style.Display to 'None' hide each incoming element. Show (ELEM1 [, ELEM2 [, SLEM3 [...]]] InstanceEleMn: Element object or ID is set to set its style.display to '' to display each incoming element. Remove (Element) InstanceElement: Element object or ID Removes the specified element from the Document object. GetHeight (Element) InstanceElement: Element object or id returns OffsetHeight. AddClassName (Element, ClassName) InstanceElement: Element Object or ID, ClassName: CSS class name Add to the given class name. HasclassName (Element, ClassName) InstanceElement: Element Object or ID, ClassName: CSS class name Returns true If the element's class name contains a given class name RemoveClassName (Element, ClassName) InstanceElement: Element Object or ID, ClassName: CSS name Delete a given class name from the class name of the element. CleanWhitespace (Element) InstanceElement: Element Objects or ID Deletes all sub-nodes that contain only spaces. 4.19. Abstract object This object is the root of other classes in this package. It doesn't have any properties and methods. The classes defined in this object can be considered a traditional abstraction class. 4.20. Abstract.insertion class This class is used as a base class that provides a class that provides dynamic content insertion functions, which is used like an abstraction class. Table 22. Abstract.Insertion class Method Category Parameter Description [CTOR] (Element, Content) ConstructOrElement: Element Object or ID, Content: The inserted HTML creates a object that can help insert dynamic content. Table 23. Abstract.Insertion class Property Type Category Description AdjacencyStringStatic, Parameter This parameter specifies the location of the content to be placed relative to a given element. Possible values are: 'beforebegin', 'afterbegin', 'beforeend', and 'Afterend'.ElementObjectInstance and inserts do refer to the reference element object. ContentStringInstance is inserted HTML. 4.21. Insertion object This object is the root of other similar functions. It doesn't have any properties and methods. The classes defined in this object can still be considered a traditional abstraction class. 4.22. Insertion.before Inherit from Abstract.Insertion Insert HTML in front of the given element starting mark. Table 24. INSERTION.BEFORE class Method Category Parameter Description [CTOR] (Element, Content) ConstructOrElement: Element Object or ID, Content: Inserted HTML inherits from Abstract.Insertion. Creating a object that can help insert dynamic content. The following code Hello, wiggum. How's it going? <script> new insertion.before ('Person', 'chief'); </ script> will turn HTML to Hello, Chief wiggum. How's it going? INSERTION.TOP class Inherit from Abstract.Insertion Insert HTML inserted in the first subtitle position of a given element. The content will be on the back surface of the start mark of the element. Table 25. INSERTION.TOP class Method Category Parameter Description [CTOR] (Element, Content) ConstructOrElement: Element Object or ID, Content: Inserted HTML inherits from Abstract.Insertion. Creating a object that can help insert dynamic content. The following code Hello, wiggum. How's it going? <script> new insertion.top ('person', 'mr.'); </ script> The HTML will become Hello, mr. wiggum. How's it going? 4.24. INSERTION.BOTTOM class Inherit from Abstract.Insertion Insert HTML in the last child node position of a given element. The content will be on the tightening of the end tag of the element. Table 26. Insertion.Bottom Method Category Parameter Description [CTOR] (Element, Content) ConstructOrElement: Element Object or ID, Content: Inserted HTML inherits from Abstract.Insertion. Creating a object that can help insert dynamic content. The following code Hello, wiggum. How's it going? <script> new INSERTION.BOTTOM ('Person', "What's Up?"); </ script> The HTML will become Hello, wiggum. How's it going? What's up? 4.25. Insertion.After class Inherit from Abstract.Insertion The HTML is inserted behind the end tag of a given element. Table 27. INSERTION.AFTER class Method Category Parameter Description [CTOR] (Element, Content) ConstructOrElement: Element Object or ID, Content: Inserted HTML inherits from Abstract.Insertion. Creating a object that can help insert dynamic content. The following code Hello, wiggum. How's it going? <script> new insertion.AFTER ('Person', 'Are you there ") </ script> The HTML will become Hello, wiggum. How's it going? Are you there? 4.26. Field object This object provides the functionality method of the input item in the operational form. Table 28. Field object Method Category Parameter Description Clear (Field1 [, Field2 [, Field3 [...]]) InstanceFieldn: Element object or ID clears the value of the project element in the incoming form. Present (Field1 [, Field2 [, Field3 [...]]) Instancefieldn: Element object or ID Only returns TRUE when all form items are empty. Focus (Field) Instancefieldn: Element object or ID moves focus to a given form item. Select (Field) Instancefieldn: Element Objects or ID Select the value of the form item that supports item values. Activate (Field) Instancefieldn: Element object or ID moves focus and selects the value of a form item that supports item value. 4.27. Form object This object provides operational forms and functionality of their input items. Table 29. Form object Method Category Parameter Description Serialize (Form) InstanceForm: Form Element or ID Returns a list of item names and values of the URL parameter format, such as 'field1 = value1 & field2 = value2 & field3 = value3'. getElements (Form) InstanceForm: Form Elements or IDs Returns Array Objects that contain all items in your form. GetInputs (Form [, TypeName [, Name]]) InstanceForm: Form Element or ID, Typename: Enter the type of item, name: Enter the name of the project Returns an Array contains all <input> elements in the form. In addition, this list can be filtered on the type or name property of the element. Disable (form) instanceform: Form element or ID makes all input items in the form. Enable (Form) InstanceForm: Form Elements or IDs are valid for all input items in the form. FocusFirstlement (Form) InstanceForm: Form Elements or ID Activates the first form, valid input items. RESET (FORM) InstanceForm: Form Element or ID Reset Form. Like the reset () method that calls the form object. 4.28. Form.element object This object provides a functional method of visual and non-visual elements in a form object. Table 30. Form.element object Method Category Parameter Description Serialize (Element) InstanceElement: The name of the form element or ID returns element = value pair, such as 'ElementName = ElementValue'. GetValue (Element) InstanceElement: Form element or ID returns the value of the element. 4.29. Form.eMent.Serializers object This object provides internal use to assist the current value functionality method for parsing the form elements. Table 31. Form.element.serializers object Method Category Parameter Description InputSelector (Element) InstanceElement: a form element or ID with the checkage property, such as Radio or Checkbox. Returns array with element names and values, such as ['ElementName', 'ElementValue'] TEXTAREA (Element) InstanceElement: a form element or ID with the Value property, such as TextBox, Button or Password project. Returns array with element names and values, such as ['ElementName', 'ElementValue'] Select (Element) InstanceElement: A <SELECT> element object or ID. Returns an array with an element name and all selected options, such as ['ElementName', 'SELOPT1 SELOPT4 SELOPT9'] 4.30. Abstract.timedobServer class This class is the base class for the class that changes the value of the value (or attribute involved in any class), this class is used like an abstraction class. Subclasses can be created to listen to the number of input item values, or the number of lines, or the number of tables, or anything related to tracking changes. Subclasses must implement this method to determine what is the current value of the monitored element. Table 32. Abstract.timedobserver class Method Category Parameter Description [CTOR] (Element, Frequency, Callback) ConstructOrElement: Element Object or ID, Frequency: Space in seconds, Callback: The method of calling when the element changes. Create an object of a listening element. RegisterCallback () instance (none) This method is usually not called outside. Call it by this object to start listening to that element. OntimeRevent () instance (none) This method is usually not called outside. This object is called to periodically check that element. Table 33. Abstract.timedobserver class Property Type Description ElementObject is listened to element objects. FREQUENCYNUMER The time interval in seconds per check. CallbackFunction (Object, String) As long as the element changes this method, it will be called. Element objects and new values are received as parameters. The last value of the LastValueString element is verified. 4.31. Form.Element.Observer class Inherit from Abstract.timedobserver A change of the ABSTRACT.TIMEDOBSERVER is used to listen to changes in the form of the form. Use this class when you want to listen to an element without a report value change event. Otherwise, use the Form.element.EventobServer class instead. Table 34. Form.Element.Observer class Method Category Parameter Description [CTOR] (Element, Frequency, Callback) ConstructOrElement: Element Object or ID, Frequency: Space in seconds, Callback: The method of calling when the element changes. Inherit from Abstract.TimedobServer. Create an object of the listening element value attribute. GetValue () Instance (None) Returns the value of the element. 4.32. Form.Observer class Inherit from Abstract.timedobserver A change of the value of the ABSTRACT.TIMEDOBSERVER is used to listen to the value of any data item in the form. Use this class when you want to listen to an element without a report value change event. Otherwise, use the class form.eventobserver instead. Table 35. Form.Observer class Method Category Parameter Description [CTOR] (Form, FREQUENCY, CALLBACK) Constructorform: Form Object or ID, inherits from Abstract.timedobServer. Create an object of monitoring form changes. GetValue () Instance (NONE) Returns a series of values for all form data. 4.33. Abstract.EventobServer class This class is used as a base class for other classes, which has functions such as a callback method when changing the value of an element. Multiple objects of class Abstract.EventobServer can be bound to an element, not a help of other erasing, but perform these callback methods in order to pay the elements. The trigger event of the radio button and the check box is OnClick, and the text box and drop-down list box / drop-down list box is onchange. Subclasses must implement this method to determine what is the current value of the monitored element. Table 36. Abstract.EventobServer class Method Category Parameter Description [CTOR] (Element, Callback) ConstructOrElement: Element Object or ID, Callback: The method of calling when the event occurs. Create an object of the listening element. RegisterCallback () instance (none) This method is usually not called outside. The object is called to bind yourself to the elements. RegisterformCallbacks () instance (none) This method is usually not called outside. The object is called to bind yourself to the event of each data item element in the form. OneElementevent () Instance (None) This method is usually not called outside. The event that will be bound to the element. Table 37. Abstract.EventobServer class Property Type Description ElementObject is listened to element objects. CallbackFunction (Object, String) As long as the element changes, the method is called. Element objects and new values are received as parameters. The last value of the LastValueString element is verified. 4.34. Form.element.eventobserver class Inherited from Abstract.Eventobserver A category of Abstract.EventobServer, which performs a callback method when monitoring the value of the value of the data item element in the form. If the element does not have any events that change changes, you can use the form.element.observer class instead. Table 38. Form.EventObserver class Method Category Parameter Description [CTOR] (Element, Callback) ConstructOrElement: Element Object or ID, Callback: The method of calling when the event occurs. Inherit from Abstract.Eventobserver. Create an object that listens element value attribute. GetValue () Instance (None) Returns the value of the element. 4.35. Form.EventobServer class Inherited from Abstract.Eventobserver A ITRACT.EVENTOBSERVER is an implementation class that listens to any change in any object contained in the form object, and changes in the event detection value of the element. If the element does not have any events that change changes, then you can use the form.observer class instead. Table 39. Form.Event.EventobServer class Method Category Parameter Description [CTOR] (FORM, CALLBACK) Constructorform: Element Object or ID, Callback: The method called when any data item changes in the form, inherits from Abstract.Eventobserver. Create an object that listens element value attribute. GetValue () Instance (NONE) Returns a series of values for all form data. 4.36. Position object (preparatory document) This object provides many ways related to elemental location. Table 40. Position object (preparatory document) Method Category Parameter Description prepare () Instance (NONE) Adjusts the Deltax and Deltay properties to coordinate changes in the scroll position. Remember to call this method before any calling of the WITHINCLUDINGSCROLLLLLLLLLLLLLFSET after scrolling. Realoffset (Element) InstanceElement: Objects or ID Returns the correct scrolling deviation of this element, including all scroll deviations that affect the elements. Result Array Similar to [TOTAL_SCROLL_LEFT, TOTAL_SCROLL_TOP] CumulativeOffset InstanceElement: Object or ID The correct scrolling deviation of this element is an array object that contains any placed parent element. Result Array Similar to [Total_offset_left, Total_offset_top] Withnin (Element, X, Y) InstanceElement: Object, X and Y: A point of coordinate testing the coordinates of a given point whether the coordinates of the given point are within the external rectangle of a given element. withinIncludingScrolloffsets (element, x, y) instanceelement: object, x and y: coordinates of a point overlap (mode, element) instancemode: 'vertical' or 'horizontal', element: the object before calling this method needs to call within (). This method returns a number between 0.0 to 1.0 to indicate the score of the coordinates overlap the elements. For example, if the element is a square side of the square of 100px, it is located (300, 300), then Withn (Divsquare, 330); Overlap ('Vertical', Divsquare); will return 0.10, meaning That point is located at a location of 10% (30px) below the DIV top frame. Clone (Source, Target) Instancesource: Element Objects or IDs, Target: Element Objects or IDs Change the size of the target elements and the same size as the source element. If you find anything wrong, missing or information is not complete, or something is meaningless, please inform the author, the author will correct it as quickly as possible, the author is still writing other unwritten classes to keep consistent. Any translation of the translation, insufficient, words are not intended, express vague, please inform me, I will add consideration and find a suitable description. Java.Net RSS Feedback | FAQ | Press | Terms of Participation | Developer Tool Copyright © 1999-2003 Collabnet, Inc. Collabnet, Sourcecast and Powered by Collabnet flags are trademarks of Collabnet, Inc, or registered trademarks. All other trademarks or registered trademarks are owned by their respective owners.</div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-132724.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div>New Post(0) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="132724" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: 0.046, SQL: 9</div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'kbmrwGm3hx5aP3_2FS5r3UDRJSKbN9Hno8ZYmelQyblFQ55lwh2DcapWsJjHcev4tfTwgeBErvfX9lN3NA'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>