We use the popular jquery to design, at the same time we choose the effect of the more excellent boxy pop-up plug-ins to expand (on the boxy of the relevant information, please refer to Rok Zhang Xinsen Xu blog http://www.zhangxinxu.com/wordpress/?p=318). The following is an introduction to the application of boxy as a selector framework.
For the selector, I believe that people who have used the recruitment site will not be unfamiliar (is that click on the pop-up, select the industry, position and area of things), the selector is the difficulty of style debugging, mainly for the IE6. Here is a description of the industry, position, and region selector, and the download demo contains these three selectors.
Industry selector: No association, call statement is Boxy.industry (value, callback, options), parameter value is a selected value number collection (string type, comma separated by number), callback is a definable callback function, The value passed in callback is the number collection of selected items for the industry selector (string type, comma separated by numbers), and options for the boxy plug-in optional parameter.
Call Example: Select an industry with number 1 and 2, and define selector title as "Industry category selector"
Copy Code code as follows:
$ ("#industry"). Click (function () {
Boxy.industry ("1,2", function (val) {
Alert ("Your choice is:" + val);
}, {title: "Industry category selector"});
return false;
});
Position selector: Two cascade, call statement is Boxy.job (value, shown, callback, options), parameter value is a selected value number collection (string type, number between numbers separated by commas, the beginning of B to indicate the selection of large categories of positions, Starting with s indicates the selection of position category, the parameter shown represents the number of the position large class displayed, the parameter callback is a definable callback function, and the value of the incoming callback is the number set of the position selector selection (string type, separated by commas). Options for boxy plug-in optional parameters.
Call Example: Select the position number 1 category, numbered 2 category categories, define selector name for position category Selector
Copy Code code as follows:
$ ("#job"). Click (function () {
Boxy.job ("S1,b2", "2", function (val) {
Alert ("Your choice is:" + val);
}, {title: "Job category selector"});
return false;
});
Position selector: Three cascade, call statement is Boxy.area (value, shown, callback, options), parameter value is a selected value number collection (string type, number between the comma split, the beginning of p to indicate the selection of provinces, beginning with C to indicate the selection of the city, The shown indicates the number of the displayed region, the parameter callback is a definable callback function, the value of the incoming callback is the number collection of the region selector selection (string type, the number is comma separated), and the options is the boxy plug-in optional parameter.
Call Example: Select a county or district Number 1 and 2, define the name of the selector as the work area selector
Copy Code code as follows:
$ ("#city"). Click (function () {
Boxy.area ("D1,c7", "1,724", function (val) {
Alert ("Your choice is:" + val);
}, {title: "Work area selector"});
return false;
});
There are bugs:
1.ie6 checkbox margin settings will be out of shape, IE6 checkbox border empty is invalid, but for other browsers is valid, and many people like to set the global input margin/padding zero, in order to unify the style, only regardless of IE6.
2.IE8 environment, CSS settings options <a> hover effect is slow or even unresponsive, other browsers do not exist this problem (including IE6), JS code resolution is not desirable, code hover reaction is still a bit slow. I really do not understand why IE8 this problem, know that the person told me.
3.ie6 under the long selection, the display of the area is not enough, in the parent tag will not automatically wrap, but in the display of the selected item itself inside line output text, resulting in style aliasing. I do not know how to solve this problem, who knows to tell me.
4. Has not yet found (probably everyone will say IE6 under the hover effect of the button, this is not a bug, but insignificant I do not bother to change, the label that <a> on the line, but really do not like <a>, all day for IE6 do not work hard).
Advantages:
1. Of course it's beautiful!
2. Three selectors represent three kinds of cascade relationship selector, you can modify the data source in the demo directly, and the text in the main frame, can be changed into other selectors.
3. There is room for improvement, who will go to the demo's CSS style integration, send it up.
Quietly tell you that the marquee effect of the selector is implemented using a PNG image, if you want to change the degree of transparency, only redo the picture, if you want to put aside IE6, you can use another common fillet method (do not use the picture only CSS style), the method has been written into the boxy plug-ins (by my comment out, including the style file), there is also a fillet method in the demo round-corner.html file also introduced, extendedboxy.html for the selector of the demo file. The other two HTML files about boxy but Rok Zhang Xinsen Xu classmate wrote Oh, Zhang Classmate blog http://www.zhangxinxu.com/php/But there are a lot of good things, we have time to go up to see it.
Demo Download Address:/201011/yuanma/jquery-plugin-extendedboxy.rar
