15 days to learn jquery (11-15)

15 days of jquery (day 11) --- use less demanding JavaScript code to upload multiple files

 

Several months ago, when I was chasing the Ajax Craze on the internet, I found an article on the fiftyfoureleven website using innovative JavaScript code to implement "Multifile upload with single file elements" that was bothering me at the time.

So when I want to write "15 days of roaming jquery", the first thing I think of is to use jquery to implement this function.

Easy-to-use enthusiasts

A few days ago, when I checked my website records, I found a missing Article trackback. I found that my two jquery articles were cited by the author to prove why he hated JavaScript.

According to this person, any tool or technology that doesn't put ease of use first will become junk.

Although I do not agree with this elder brother's attitude of killing him, he still reminds me of this detailed tutorial. When I write a simple web page, I will try my best to handle it with caution. In this way, if visitors decide to disable the JavaScript code execution function, they can still use the function of the website normally.

Two tutorials on the first value

• Use a single file input element to upload multiple files and make the interaction process smooth and comfortable.

• Make multi-file upload more user-friendly, but avoid sacrificing availability. The key is to use less demanding JavaScript code to create multi-file input areas.

Demo

• There is only one file input element, but jquery and other code are added to implement the multi-file upload function that is closer to the user.

Demo 1 Address

• Multiple file input elements are used in page (x) HTML code, but the display page effect is similar to that of the first demo through jquery. The advantage is that the Code is not harsh... Even if Javascript execution is disabled, you can upload multiple files.

DEMO 2 address

Explanation

Single file input box

The $ (document). Ready () function of jquery has two functions:

Create a div element when the file downloads the most. Find the File Upload box (assuming there is only one) and attach an onchange event to it.

$("input[@type=file]").change(function(){doIt(this, fileMax);});

Doit () function (simple and memorable, haha ~) Check whether the maximum number of files is reached. If not, it hides the input box of the current file and adds a new input box to the parent Div, use the id "files_list" as the marker for the file name in the input box, and add the "delete" button at the end.

In the DOM tree navigation, I use the jquery parent () function and then use the remove () function to remove elements. I also used the append () and prepend () functions to add file names and new input boxes respectively.

Two key points

-Maximum number of file uploads:

var fileMax = 3;

-The input box must have appropriate positioning measures:

<input type="file" class="upload" name="fileX[]"/>

In this case, the user determines whether to add or delete the input box. There is no operation on the ID or name. When the form code is sent to the server script, the related information is stored in an array.

Multi-file input box

First, the number of files that can be uploaded is determined by the number of file input boxes on the page. Second, you still need to use an array to store the content received by each input box in some way.

<input type="file" class="upload" name="fileX[]"/>

In the second demonstration, the biggest difference from the previous one is that I traversed each file input box and executed the doit () function when its content was changed. By traversing each input box, I can add useful additional information for my code: the order of the input box content in the "stack.

In other words, when the code is executed, it specifies the first input box, the second box, or the third box.

For the code, see:

$("input[@type=file]:nthoftype("+n+")")

Jquery's flexibility allows us to use CSS and XPath description statements to locate the specified Element location.

You will find that when a file is selected, the file input box will be overwritten by the file name. Click the file name to select different files.

 

15 days of jquery (Day 12) --- jquery lightbox (plug-in)

 

The first version of "thickbox" transplanted by Cody Lindley made me feel the charm of jquery for the first time. Later, he made some code upgrades to fix cross-browser compatibility issues.

Notes

$ (Document). Ready replaces the tb_init () function by appending an onclick event to each link containing the object name "thickbox.

function TB_init(){$("a.thickbox").click(function(){var t = this.title || this.innerHTML || this.href;TB_show(t,this.href);this.blur();return false;});

When these links are clicked, The tb_show () function is executed.

$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");$("#TB_overlay").click(TB_remove);$(window).resize(TB_position);$(window).scroll(TB_position);$("#TB_overlay").show();$("body").append("<div id='TB_load'><div id='TB_loadContent'></div></div>");

As you can see, two DIV elements are added before the document body element. In other words, these two DIV elements will be added before the HTML code's body closes the elements.

The covered Div uses a specific CSS file containing an opaque appearance to specify the performance. The tb_window code is used to place an image in the page through Ahah or add another page. $ (Window). Resize and $ (window). Scroll tell jquery to execute the tb_position function when you resize the window or drag the page to flip the page. This is a means to ensure that thickbox is always in the center of the window.

Then, Cody queries the URL suffix.

var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm|.php|.cfm|.asp|.aspx|.jsp|.jst|.rb|.txt/g;var urlType = url.match(urlString);if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images

If this is an image file, the jquery append function will add HTML code to the appropriate location.

$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'></a>"+ "<div id='TB_caption'>"+caption+"</div><divid='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>close</a></div>");$("#TB_closeWindowButton").click(TB_remove);

In addition, the remote file will be imported using jquery's load () function.

$("#TB_ajaxContent").load(url, function(){

 

15 days of jquery (day 13) --- jquery table

 

A friend named Klaus wrote a small plug-in that uses jquery to implement a javascript table with excellent availability.

Set the correct (x) HTMLAnd CSS, you can create a table as follows:

$. Tabs ("container") Restart ");First tab on by default if you add another table at the top of the default position: $. tabs ("container", 2) tables );Second tab on

Here is an example of Klaus. You can see the final result.

My revisions

I slightly modified the Klaus code and added a simple form to generate the table header.

Usage:

Very simple. You only need to enter the header (up to five) of each table, and then click the button below the form. The next page will generate the HTML code of the result. You can copy and paste it into the file.

You also need to download the CSS file of the Klaus website, make some modifications on your own, and upload the jquery Framework library to your server.

Here is the address of the Table Builder.

 

15 days of jquery (day 14) --- JavaScript tooltip

 

Cody Lindley, author of thickbox, recently released the jtip-jquery tooltip.

I have never heard of many of these ideas and ideas. I know that you have read many similar tooltip codes. However, the Cody method has shown a bright spot in my work.

When I checked the HTML code, I found a big problem with accessibility. The link cannot work when Javascript is disabled. I am not inclined to implement comprehensive accessibility, but here I think there are other more friendly ways to implement the same function.

In particular, I personally do not like the way to link another page Link in the prompt box at the sacrifice of availability for accessibility. I like this prompt box-not disrespectful to Cody, but I "need" it to work in various situations.

Today, I want to provide you with a small modification to the Cody tooltip code. If you are not a fan of Cody tooltip, I may not be very concerned about the revision. But if you like his work and want it to work as usual when Javascript is disabled, you may need it.

My changes

What makes me think of modification is the application of his code on Yahoo. I don't like the code he uses:

<a href="yahoo.htm?width=175&amp;link=http://www.yahoo.com"name="Before You Click..."id="yahooCopy"class="jTip">Go To Yahoo</a>

So I have rewritten some of his code and it looks like this:

<a href="http://www.yahoo.com"rel="yahoo.htm?width=175&link=yahoo&name=Before%20%20You%20Click..."id="yahooCopy"class="jTip">Go To Yahoo</a>

My example

Improvement: HTML standard verification

My code can be tested through w3.org

Improved: Name

When I modified the Cody code, I found that he used a variable name named "title" to store the Link name, which caused some confusion.

I marked this naming problem, even if I thought it was just a small mistake.

Improvement: Availability

With my code, you can make each prompt box contain a real link address to another document, whether internal or external. Or you just want the prompt box and don't want to worry about availability. You can leave the link blank.

You have the right to choose.

Thanks

Cody provides great code that helps me save a lot of time and effort. My changes are just a slight "adjustment" to the original code, and I hope my friends will like it.