HTML Basic Learning 02

1. Drag and drop elements in H5
In HTML5, we can use the mouse to drag an element in the page, but in the implementation of drag elements, and use drag and drop to change the layout of the elements, you need to set some properties of the corresponding elements in the page:
1.1 Realization elements can be dragged and dragged
Set the property in the element tag that needs to be dragged: draggable, which has only two values of true and the flase,img tag supports dragging by default.
1.2 implementations can be dragged into a box
The default is that you cannot drag an element to another location, but if you need to drag the element into a box, you need to set the event to that box:
Dom.ondragover = function (event) {
Event.preventdefault ();
}
But it's just finished and can be dragged into the box, and it's not finished adding elements to the box. You need to set the box to the event that the element is placed in the box, and the code to add the element to the box in the event handler.
Dom.ondrop = function () {}
2. Full-screen display in H5
We'll have full screen buttons when we watch the video, and of course the elements can be displayed full screen in some other places.
The basic code for the full-screen display of the element is: Dom.requesetfullscreen (); But this method is not yet officially enabled, all we need to do is to detect different browsers:
if (Dom.requestfullscreen) {
Dom.requestfullscreen ();
}else if (dom.webkitrequestfullscreen) {
Dom.webkitrequestfullscreen ();
}else if (dom.mozrequestfullscreen) {
Dom.mozrequestfullscreen ();
}
The judgment here is to detect if the element exists in the browser and if there is a call.
3. Custom player in H5
We've talked about the default player tags in HTML5 before, but when we use the properties in the default tag directly, we don't meet our requirements, and all HTML5 give us a lot of methods and properties to make it easy to customize the label.
3.1 Play ()
Controls the playback of the video, with pause ().
3.2 Pause ()
Controls the pause of the video and works with Play ().
3.3 CurrentTime and duration
These are the properties of the tag, you can get the current time of the video playback and the total time, you can also set the time the video needs to start playing.
You can use these two properties to customize the playback progress of the video and to change the playback progress by dragging the progress bar.
Using the properties and methods provided by these HTML5, we can make our page player more beautiful.
4. Positioning provided by H5
Window.navigator.geolocation.getCurrentPosition (function (position) {})
Calling this method requires passing in a callback-function to get the longitude of the current position through Position.coords.longitude in the callback function, and position.coords.latitude to get the latitude of the current position.
But just through this method to obtain latitude and longitude, and does not have any effect, we need to coordinate with some of the online map server to locate, such as Baidu Map, Google Maps and so on. This allows you to complete a personal location positioning function.
We can make a map of our own location by setting up the restaurant's Baidu map.
5. Save data on the browser side
When the browser browses the page, some information is automatically saved in memory, and the memory is cleared when the page is closed.
We can also manually save some of the data we need to the browser side.
5.1 Save Once
Before the window is closed, save the data and clear the data when the window is closed:
Window.sessionstorage
5.2 Permanent Save
When the data is saved, until you clear the browser browsing history or code cleanup:
Window.localstorage
5.3 methods commonly used in two ways
5.3.1 SetItem (' key ', ' value '), sets the saved data, formats the key-value pairs, and only saves the string.
5.3.2 GetItem (' key '); Gets the value of the corresponding key.
5.3.3 commonly used scenarios
We can first obtain the user input content, the content with the set of keys stored in the user's browser side, the next time you access the data can be directly obtained, no need to repeat the user input.
5.3.4 expansion
Although only strings can be stored through SetItem (), we could first convert the JSON data to a string stored on the browser side, and then convert the string to a JSON object to get the required data when it is needed.
A corresponding set of format conversion methods:
Json.stringify (obj), converts a JSON object to a string, and returns a string that contains the contents of a JSON object.
Json.parse (String), converts a string of contents to a JSON object, and returns a JSON object.
6. Get the uploaded file
6.1 Getting information about the files that need to be uploaded
Before you get the upload file, you need to know how to get the information for the file you want to upload.
<input type= the "file" > tag has a property that can get information about the file that the user has selected.
Dom.files; Gets an array of the selected file information, which can be selected by Dom.files[index], to select the information that needs to get the file.
Then you need to create a file to read the object, through this object method to get the information of the file.
var obj = new FileReader ();//Create a file read object.
Obj.readasdataurl (file);//The method through which the object is called to read the file, passing in a dom.files[index]; Gets the file information as a parameter.
Obj.onload = function (argument) {//The text is loaded after the call}
File.type: Gets the type of file;
Obj.result: Gets the path information for the file.
6.2 Getting uploaded files via form form
6.2.1 What you need to set in the form tag
When uploading a file, the form element must be requested by post, and the server can obtain the uploaded file.
And you need to set enctype= ' Multipart/form-data ' property and attribute values in the form tag, in order for the form to know that there are files in the form that need to be uploaded.
6.2.2 What you need to set in your PHP file
After clicking the Submit button, the uploaded file will be stored in a global variable in PHP, and we can obtain the uploaded file information in the corresponding way, such as: $_get,$_post.
$_files[' key '; Gets a relational array of uploaded file information, key is the value of the Name property of the upload file tag.
Move_uploaded_file () moves the specified upload file to a specific location for storage.
This method has two parameters:
Parameter 1 moving the target file
Parameter 2 The location you want to save/the file name you want to save
6.3 Getting uploaded files via ajax
6.3.1 Ajax can directly read the data in the form form
In the case where the form form does not commit, the data in the form can be obtained directly in PHP when the request is made via Ajax. But you need to create a form data object before Ajax.send (): New FormData (Formdom), A FORM element is passed in parentheses.
Then get the data directly in PHP using $_post or $_get.
6.3.2 to upload the selected files
1 HTML section
The file selected in <input type= "file" > is uploaded to Php,.append () by the. Append () method with two parameters:
First parameter: the custom key name;
Second parameter: through Dom.files[index]; Gets the selected file.
2 PHP section
PHP settings are consistent with the process obtained through form forms.
3. Append () method
You can also use this method to set custom properties and property values for the form form, and to get the property values set in PHP as normal properties.
6.3.3 uploading files while displaying upload progress
ajax.upload.onprogress = function (event) {}
File upload simultaneous departure event, you can get to the size of the uploaded file by event.loaded. And Event.total gets the total size of the uploaded file, using these two properties to set the progress of the display upload.

HTML Basic Learning 02