When you design complex functions, you can design multi-level connections. To achieve better user experience and save page space, the pop-up layer method is often used. We use popular jquery design, at the same time we choose more effective boxy pop-up plug-in extension (about the relevant information about boxy, please refer to Zhang xinxu blog http://www.zhangxinxu.com/wordpress? P = 318 ). The following describes the application of boxy as the selector framework.
For selector, I believe there will be no stranger to anyone who has used recruitment websites (that is, those who click it to pop up and select industries, positions, and regions). The difficulty of selector lies in style debugging, it mainly targets IE6. Here we will introduce the industry, position, and Region selector. The downloaded Demo contains these three selector.
Industry selector: No association. The call statement is Boxy. industry (value, callback, options). The value parameter is a set of selected value numbers (string types, numbers are separated by commas). callback is a customizable callback function, the callback value is the serial number set of the selected items of the industrial selector (string type, separated by commas). options is an optional parameter of the boxy plug-in.
Call example: Select industries numbered 1 and 2, and define the selector title as "industry category selector"
The Code is as follows:
$ ("# Industry"). click (function (){
Boxy. industry ("1, 2", function (val ){
Alert ("what you choose:" + val );
},{ Title: "industry category selector "});
Return false;
});
Job selector: Level 2 Association. The call statement is Boxy. job (value, shown, callback, options), parameter value is a set of selected value numbers (string type, numbers are separated by commas, start with B to select a job category, the parameter shown indicates the number of the displayed job category. The callback parameter is a customizable callback function, the callback value is the number set of the selected items in the position selector (string type, separated by commas). options is an optional parameter of the boxy plug-in.
Call example: select a position class with ID 1 and a position class with ID 2. Define the selector name as the position class selector.
The Code is as follows:
$ ("# Job"). click (function (){
Boxy. job ("s1, b2", "2", function (val ){
Alert ("what you choose:" + val );
},{ Title: "job category selector "});
Return false;
});
Job selector: Triple join. The call statement is Boxy. area (value, shown, callback, options), the parameter value is a set of selected value numbers (string type, numbers are separated by commas (,), start with p indicates the selection of provinces, starts with c and starts with d.) The shown parameter indicates the ID of the region to be displayed. The callback parameter is a customizable callback function, the callback value is the number set of the selected items in the region selector (string type, separated by commas). options is an optional parameter of the boxy plug-in.
Call example: select a county or district numbered 1 and 2, and define the name of the selector as the work area selector.
The Code is as follows:
$ ("# City"). click (function (){
Boxy. area ("d1, c7", "1,724", function (val ){
Alert ("what you choose:" + val );
},{ Title: "region selector "});
Return false;
});
Bug:
1. the margin settings of IE6 checkbox are out of the way. Clearing the checkbox border of IE6 is invalid, but it is valid for other browsers. In addition, many people prefer to set the input margin/padding to zero globally, in order to unify the style, only ie6.
2. in the IE8 environment, the hover of css setting options is slow or even unresponsive. other browsers do not have this problem (including IE6), and js Code solution is not desirable, code hover response is still a little slow. I really don't understand why IE8 has such a problem. Let me know.
3. for ultra-long selected items in IE6, the display area is not enough. In the parent tab, the text is not automatically wrapped. Instead, the text is output inside the selected items, resulting in Style variation. I don't know how to solve this problem. Who knows.
4. I haven't found it yet (maybe you will say that the hover effect of the buttons Under IE6 is not a bug, but I am too lazy to change it. Just set the tag, but I really don't like it. I do nothing for IE6 all day ).
Advantages:
1. Of course it's pretty!
2. The three selectors represent three cascading selectors. You can directly modify the data source in the Demo and the text in the main framework to convert them into other selectors.
3. There is room for improvement. Who should integrate the css style of the demo and send it up.
The consumer is the demo file of the selector. The other two html files about Boxy are written by Zhang xinxu. The blog of Zhang xinxu is http://www.zhangxinxu.com/php/, but there are many things in the East and West, so you can check them out on the fly.
Demo:/201011/yuanma/jquery-plugin-ExtendedBoxy.rar
