Let's talk a little about it. Today I focus on jquery plug-in development. I want to use the code to practice. Of course, it is also to solve the actual needs of the project. We often encounter the "select box" control. In normal times, if our selection items are very simple, it is okay to use the select that comes with the browser. However, if the dictionary items have a superior-subordinate relationship, that is, the tree structure that is often seen, it is very uncomfortable. I am wondering why jquery plug-ins are tens of millions. Why is there no such plug-in? It is generally a pure tree plug-in, or a drop-down box plug-in. In short, I did not find a plug-in that meets my requirements. Then write your own hand. First highlight the card to show the effect. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/11460CW4-0.png "/> there are two main effects: First: for data in general, you can also use the select label of the browser to solve the style of the select label. the focus is on beautification. Some tags are used for simulation of select tags. The second is the focus. The drop-down tree is used. The tree structure implementation method is shown in the drop-down list. In fact, this plug-in is only responsible for assembly. These two effects all refer to other jquery plug-ins. I just merged them. Because my personal work on the art has always been in a distant state. The two plug-ins used are ztree.3.5jquery. mfs.
Implementation Code (droptree. js )/**
Drop-down tree
*/
(Function ($ ){
Var defaults = {
IdLabel: "code ",
TextLabel: "name ",
PidLabel: "pid ",
Transition: "ztree ",
Items: []
};
/**
Target: input element;
*/
Function DropTree (target, options ){
This.tar get = target;
This. value = target. value;
This. $ target = $ (target );
This. opts = $. extend ({}, defaults, options, this. $ target. data ());
This. id = this.tar get. id | this.tar get. name;
If (this. $ target. length> 0 ){
This. _ init ();
}
Return this;
}
DropTree. prototype. _ init = function (){
Var self = this;
This. $ target. hide ();
This. $ wrap = this. $ target. wrap ('<div class = "mfs-container">'). parent ();
This. $ selected = $ ('<a class = "mfs-selected-option" href = "#"/>'). prependTo (this. $ wrap );
// This.w.selected.css ("height", 15 );
This.w.selected.html (this. value + "");
This. $ down = $ ("<span> </span>"). prependTo (this. $ selected );
This. transition = Transitions [this. opts. transition]. call (this );
};
Var Transitions = {
Mfs: function (){
Var mfsId = this. id + "_ mfs ";
This. $ options = $ ('<ul class = "mfs-options" id = "' + mfsId + '"/>'). insertAfter (this. $ selected );
Var idLabel = this. opts. idLabel;
Var textLabel = this. opts. textLabel;
Var $ options = this. $ options;
// Var (this. id );
$. Each (this. opts. items, function (I, n ){
Var $ op = $ ('<a href = "#" index = "' + I + '">' + n [textLabel] + '</a> '). wrap ('<li class = "mfs-option"> '). parent ();
$ Options. prepend ($ op );
});
// Add vitality
Var enableMagic = function (theContainer ){
// TODO configurable
Var selectElm = theContainer. find ('select ');
Var selectElmOptions = selectElm. find ('option ');
Var optionList = theContainer. find ('#' + mfsId );
Var optionListLi = optionList. find ('Li. mfs-option ');
Var selectedOption = theContainer. find ('A. mfs-selected-option ');
Var optionListOptions = optionList. find ('A ');
OptionList. hide ();
OptionListOptions. click (function (){
OptionListLi. removeClass ('active'). removeClass ('selected ');
$ (This). closest ('lil'). addClass ('selected ');
SelectedOption.html ($ (this). text () + '<span> </span> ');
SelectElmOptions. removeAttr ('selected ');
SelectElmOptions. eq ($ (this). attr ('index'). prop ('selected', 'selected ');
OptionList. hide ();
// Make a refresh function that just updates the select magic (destroy and re-enable)
If (selectElm. selectedIndex! = $ (This). attr ('index') & selectElm. onchange ){
SelectElm. selectedIndex = $ (this). attr ('index ');
SelectElm. onchange ();
}
If (selectElm. selectedIndex! = $ (This). attr ('index ')){
SelectElm. selectedIndex = $ (this). attr ('index ');
SelectElm. trigger ('change ');
}
Return false;
});
SelectedOption. click (function (){
Var optionListAll = $ ('#' + mfsId );
If (optionList. is (': visable ')){
OptionList. hide ();
MfsSelectOpen = true;
}
Else {
OptionListLi. removeClass ('active ');
OptionListAll. hide ();
OptionList. show ();
Var optionListSelected = optionList. find ('Li. mfs-option.selected ');
If (optionListSelected. length> 0 ){
OptionListSelected. addClass ('active ');
}
Else {
OptionList. find ('Li. mfs-option: first-child '). addClass ('active ');
}
MfsSelectOpen = optionList;
}
$ (This). blur ();
Return false;
});
OptionListLi. mouseover (function (){
OptionListLi. removeClass ('active ');
$ (This). addClass ('active ');
});
}; // End enableMagic
EnableMagic (this. $ wrap );
},
Ztree: function (){
Var treeId = this. id + "_ tree ";
// <Ul id = "treeDemo" class = "ztree"> </ul>
This. $ options = $ ('<ul id = "' + treeId + '" class = "mfs-options ztree">'). insertAfter (this. $ selected );
Var theContainer = this. $ wrap;
Var optionList = theContainer. find ('#' + treeId );
Var selectedOption = theContainer. find ('A. mfs-selected-option ');
Var srcElem = this.tar get;
Var idLabel = this. opts. idLabel;
Var zTreeOnClick = function (event, treeId, treeNode ){
SelectedOption.html (treeNode. name + '<span> </span>'); // span is the placeholder of the drop-down arrow.
SrcElem. value = treeNode [idLabel];
OptionList. hide ();
};
Var setting = {
Data :{
SimpleData :{
Enable: true,
IdKey: this. opts. idLabel,
PIdKey: this. opts. pidLabel
}
},
Callback :{
OnClick: zTreeOnClick
}
};
This. identifier = $. fn. zTree. init ($ ("#" + treeId), setting, this. opts. items );
// Set the default value
Var nodes = this. Sums. getNodesByParam (idLabel, this. value, null );
If (nodes. length> 0 ){
Var nodeName = (nodes [0]) [this. opts. textLabel];
SelectedOption.html (nodeName + '<span> </span>'); // span is the placeholder of the drop-down arrow.
This. nodes. selectNode (nodes [0], true );
}
Var enableMagic = function (theContainer ){
Var selectedOption = theContainer. find ('A. mfs-selected-option ');
OptionList. hide ();
SelectedOption. click (function (){
If (optionList. is (': visable ')){
OptionList. hide ();
}
Else {
OptionList. show ();
}
$ (This). blur ();
Return false;
});
} // End enableMagic
EnableMagic (this. $ wrap );
}
};
$. Fn. droptree = function (options ){
Return this. each (function (){
If (! $. Data (this, 'droptree ')){
$. Data (this, 'droptree ', new droptree (this, options ));
}
});
};
}) (JQuery) integration point: Transitions object. The object provides two methods: mfs: refer to the mfs plug-in to build the ztree of the drop-down list content. Of course, ztree has never been used to build the drop-down list tree with ztree, you can also use other tree plug-ins. Of course, you have to add it in Transitions. In short, the great route passes Rome
Html usage
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script type = "text/javascript" src = "jquery-1.9.1.min.js"> </script>
<Script type = "text/javascript" src = "jquery. Z tree. all-3.5.js"> </script>
<Script type = "text/javascript" src = "droptree. js"> </script>
<Link href = "droptree_style.css" rel = "stylesheet"/>
<Link href = "zTreeStyle/zTreeStyle.css" rel = "stylesheet"/>
</Head>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Simple-select"). droptree ({
Transition: 'mfs ',
Items: [{code: 'man ', name: 'man '},
{Code: 'Woman ', name: 'female '},
{Code: 'yunao', name: 'shill '}
]}
);
$ ("# Simple_input"). droptree ({items :[
{Code: 'root', name: 'rootnode', pid:-1 },
{Code: 'man ', name: 'Men's wear', pid: 'root '},
{Code: 'Woman ', name: 'wow', pid: 'root '},
{Code: 'man1', name: 'Men's 1', pid: 'man '},
{Code: 'man2', name: 'Men's 2', pid: 'man '},
{Code: 'woman1', name: 'Women's 1', pid: 'Woman '}
],
Transition: "ztree"
});
});
</Script>
</Head>
<Body>
<Div class = "wrap" style = "width: 600px; margin: 0 auto; margin-top: 200px">
<Div style = "width: 60px; float: left">
<Select id = "simple-select" name = "simple-select">
<Option value = "opt1"> option 1 </option>
<Option value = "opt2"> option 2 </option>
<Option value = "opt3" selected = "selected"> option 3 </option>
</Select>
</Div>
<Div style = "float: right">
<Input type = "text" name = "simple_input" id = "simple_input" value = "man2"/>
</Div>
</Div>
</Body>
</Html>
Also note: The component suitable for using this plug-in is a form element, such as input/select | other elements are not suitable for use. Think about it. We use the drop-down tree to obtain the selected value and transfer it to the background for processing. If it is used for radio and checkbox. That's not the drop-down series. If it is textarea, I can only use Zhao Benshan's sketch to answer your question: [I think you are, it's okay to eat] Of course, there are also many places to improve: for example: 1. ajax Support 2. multi-choice support ==================================================== ============================ next, it should be further encapsulated into jsp labels. The rest is about time.
This article is from the "simple" blog, please be sure to keep this source http://dba10g.blog.51cto.com/764602/1188190
