Released two JQ widgets (Image Viewer + Category selector), open source

Photo Viewer , GitHub address: Https://github.com/VaJoy/imgViewer

The effect is as follows:

It was written for about 2 hours and rushed out in a hurry, using an interface that was simple:

$.bindviewer (". Viewer-item");

Its implementation is not a complex principle, the only thing that can be said is the picture unfolding process-from small to large dynamic process realization. This is mainly achieved by this section of code:

$ (this). css ({"Top": Win_h/2 + sroll_t, "Margin-left": sroll_l-50, "margin-top": " -50px", "width": "100px", "H Eight ":" 100px "," opacity ":" 0 "})           . Animate ({function () {  //...

The first is to use the. css () to narrow it down and position it in the middle (as in the above code we will reduce the width to 100px), and then through. Animate () to enlarge it, the numerical value through some elementary school mathematics calculation can draw (after all, the picture is wide, Window size and other valuesare known), here is not the explanation.

Next is a category selector , GitHub address: Https://github.com/VaJoy/categorySelector

The effect is as follows:

Use the interface as follows:

$ ("XX"). Bindcategory (option);

The optional values for option are as follows:

varoption ={data: [//Data        {            "id": "1", "Name": "Game", "items": [            {"id": "+", "name": "Puzzle Game"},            {"id": "$", "name": "Role Play"},            {"id": "All", "name": "Games for Children"}        ]        },        {            "id": "2", "Name": "Book", "Items": [            {"id": "+", "name": "Map Embryonic"},            {"id": "+", "name": "Business Banking"},            {"id": "the", "name": "Romantic Idol"},            {"id": "the", "name": "Social Humanities"},            {"id": "+", "name": "Teaching children"},            {"id": "+", "name": "Construction project"},            {"id": "PNS", "Name": "Science and Technology"}        ]        },        {            "id": "3", "name": "Apply", "items": [            {"id": "" "," Name ":" Network Tools "},            {"id": "*", "name": "Prerequisites"},            {"id": "+", "name": "Accessibility"}]}], theme:"#2cbaa0",//Theme ColorTitle: "Please select a category",//titleItemnum:3,//maximum number of options availableGrouptitle_enable:true,//whether the group title is optionalSplitor: ","//Separators}

This plugin is driven out today, temporarily haven't detected what bug, if there is a bug welcome issues. Before the detection of a problem, found that there is a text style in IE and chrome are executed well, but Firefox invalid, tossing a little time only to find that the original is font:12px/1.2 "Arial", "Microsoft Yahei" was written by me font:12px/1.2 "Arial" "Microsoft Yahei ".

The source code of the plug-in is basically full of relevant comments, carefully studied under the principle of easy to understand. Personally feel that the most cumbersome plug-ins is the processing of the style, personally think that this piece can have four kinds of treatment solutions:

⑴, like Bootstrap, separates a separate xx.css file for the user to choose, but this means that the user is introduced to a style file (which is recommended if the user switches the topic);

⑵ directly inline within the element, such as $elem.css ("xx", "XX"), $ ("<div style= ' XXX ' ></div>"). This method is more commonly used, the style has the highest priority, but it will make the code look messy;

⑶ generate a style tag, such as $ ("<style>XXXX</style>"), and then plug it into the head, so that the code looks a little bit better, but to prevent the style tag from being repeatedly inserted, and to add the corresponding class name to the element, Maintenance, it is not ⑵ so intuitive, Sunline is likely to pollute other people's class name;

⑷ write an API for user reference, let the user write the corresponding style on the page. This is more customized for users, but feels more troublesome and less humane than ⑴.

Individual or use ⑵ a little more, of course, if the reuse of a very high style, can rely on ⑶ to solve.

The two plug-ins are lightweight, feature-less redundancy, and interested friends can try to use them, or expand them (especially the category selector, which temporarily supports only level two data, and does not add support for one or more levels of data).

For specific examples, refer to the corresponding HTML page file.

Mutual Encouragement ~

Released two JQ widgets (Image Viewer + Category selector), open source