About the contents of the list box selection control

2008-05-17  来源:本站原创  分类:Web  人气:286 

About the contents of the list box selection control, is a real project, is usually used as a control.

You can search the web using Mootools technology development M2MSelector control, is a typical implementation. Impression that the Internet also has the use of ExtJS technology of such control. However, in less than a web search using jQuery technology to achieve the type of control. To achieve a bar on his own.

Let us look at what page elements which bar, drawings are as follows:

About the contents of the list box selection control

The control contains two multiple-choice drop-down box to the left of this, is a list of all available options, the right side of this, is a list of all options.

There are six buttons: all selected, selected, not elected, all the non-election, the Move Up and Move Down.

Click "Select All" button, then the right of the drop-down box data with data on the same drop-down box on the left, while the drop-down box on the left all the data gray out.

Click "Select" button, then the drop-down box to the left of the data has been selected, copy to the right of the drop-down box, while the drop-down box to the left of the data has been selected gray out.

Click "not vote" button, then delete the drop-down box to select the right data, the drop-down box to the left of the data returned to normal color, can again be selected.

Click on "all the non-selection" button, then the drop-down box to the left all back to normal color, the right to delete all data on the drop-down box.

Click "Move" button, then the right of the drop-down box is checked the data in the upward movement; click the "Move Down" button, then the right of the drop-down box is checked the data down.

"Select" button to the registration code are as follows:

$. fn.registerTransferTrigger = function (id, doubleID) (
$($("#" + Id)). Bind ( "change", function (e) (
$ ( 'option', $ (this)). each (function (i) (
if ($ (this). css ( "color") == '# ccc') (
$ (this). attr ( "selected", false);
$ (this). attr ( "disabled", true);
)
));
));

$ (this). bind ( "click", function (e) (
$ ( 'option', $("#" + id)). each (function (i) (
if ($ (this). attr ( "selected") & &! isExistInSelect ($ (this). val (), doubleID)) (
document.getElementById (doubleID). add (new Option ($ (this). text (), $ (this). val ()));
$ (this). attr ( "selected", false);
$ (this). attr ( "disabled", true);
$ (this). css ( "color", '# ccc');
)
));
));
);

"No Choice" button, the registration code are as follows:

$. fn.registerReturnTrigger = function (id, doubleID) (
$ (this). bind ( "click", function (e) (
$ ( 'option', $("#" + doubleID)). each (function (i) (
if ($ (this). attr ( "selected")) (
var v = $ (this). val ();
$ (this). remove ();
$ ( 'option', $("#" + id)). each (function (i) (
if ($ (this). val () == v)
$ (this). css ( "color", '# 000');
$ (this). attr ( "disabled", false);
));

)
));
));
);

"Select all" button to the registration code are as follows:

$. fn.registerTransferAllTrigger = function (id, doubleID) (
$ ( 'option', $("#" + doubleID)). each (function (i) (
var v = $ (this). val ();
$ ( 'option', $("#" + id)). each (function (i) (
if ($ (this). val () == v) (
$ (this). css ( "color", '# ccc');
$ (this). attr ( "disabled", false);
)
));
));

$ (this). bind ( "click", function (e) (
$ ( 'option', $("#" + id)). each (function (i) (
if (! isExistInSelect ($ (this). val (), doubleID)) (
document.getElementById (doubleID). add (new Option ($ (this). text (), $ (this). val ()));
$ (this). attr ( "selected", false);
$ (this). attr ( "disabled", true);
$ (this). css ( "color", '# ccc');
)
));
));
);

"All non-election" button registration code are as follows:

$. fn.registerReturnAllTrigger = function (id, doubleID) (
$ (this). bind ( "click", function (e) (
$("#" + DoubleID). Html ("");
$ ( 'option', $("#" + id)). each (function (i) (
$ (this). css ( "color", '# 000');
$ (this). attr ( "disabled", false);
));
));
);

"Move" button on the registration of the code is as follows:

$. fn.createUpSuite = function (sltID) (
return this.each (function () (
if ($ (this). attr ( 'upSuite')) (return;)
$ (this). attr ( 'upSuite', true);
$ (this). bind ( "click", function (e) (
var oa = new Array ();
$ ( 'option', $("#" + sltID)). each (function (i) (
oa [i] = new Array ($ (this). val (), $ (this). text (), $ (this). attr ( "selected"));
));
$ ( 'option', $("#" + sltID)). each (function (i) (
if (i! = 0 & & oa [i] [2] & &! oa [i - 1] [2]) (
var v = oa [i - 1] [0];
var t = oa [i - 1] [1];
oa [i - 1] = new Array (oa [i] [0], oa [i] [1], true);
oa [i] = new Array (v, t, false);

)
));
$("#" + SltID). Html ("");
$. each (oa, function (i, n) (
document.getElementById (sltID). add (new Option (oa [i] [1], oa [i] [0]));
if (oa [i] [2] == true) (
$ ( 'option: eq (' + i + ')', $("#" + sltID)). attr ( "selected", true);
)
));
));
));
);

"Down" button on the registration code are as follows:

$. fn.createDownSuite = function (sltID) (
return this.each (function () (
if ($ (this). attr ( 'downSuite')) (return;)
$ (this). attr ( 'downSuite', true);
$ (this). bind ( "click", function (e) (
var oa = new Array ();
$ ( 'option', $("#" + sltID)). each (function (i) (
oa [i] = new Array ($ (this). val (), $ (this). text (), $ (this). attr ( "selected"));
));

for (var i = $ ( 'option', $("#" + sltID)). length - 2; i> = 0; - i) (
if (oa [i] [2] & &! oa [i + 1] [2]) (
var v = oa [i + 1] [0];
var t = oa [i + 1] [1];
oa [i + 1] = new Array (oa [i] [0], oa [i] [1], true);
oa [i] = new Array (v, t, false);
)
)
$("#" + SltID). Html ("");
$. each (oa, function (i, n) (
document.getElementById (sltID). add (new Option (oa [i] [1], oa [i] [0]));
if (oa [i] [2] == true) (
$ ( 'option: eq (' + i + ')', $("#" + sltID)). attr ( "selected", true);
)
));
));
));
);

One uses a custom method code is as follows:

function isExistInSelect (value, selectid) (
var is = false;
$("#" + Selectid). Find ( 'OPTION'). Each (function () (
if ($ (this). val () == value) (
is = true;
return false;
)
));
return is;
)

I made a struts2 this control is a custom label, the label's ftl files as follows:

<div>
<div>
<div> $ (parameters.leftTitle) </ div>
<div>
<select <# rt />
name = "$ (parameters.name? default ("")? html)" <# rt />
<# if parameters.id? exists>
id = "$ (parameters.id? html)" <# rt />
</ # if>
<# if parameters.multiple? exists>
multiple = "multiple" <# rt />
</ # if>
size = "15" "float: left; width: $ (parameters.labelwidth? default (130));">

<@ s.iterator value = "parameters.list">
<# assign itemKey = stack.findValue (parameters.listKey) />
<# assign itemValue = stack.findString (parameters.listValue) />
<option value="${itemValue}"> $ (itemKey) </ option>
"/ @ S.iterator"
</ select>
</ div>
</ div>

<div> <br> <br> <br>
<input type="button" value=">> "/>
<br>
<input type="button" value="> "/>
<br>
<input type = "button" value = "<" />
<br>
<input type = "button" value ="<<" />

</ div>

<div>
<div> $ (parameters.rightTitle) </ div>
<div>
<select <# rt />
name = "$ (parameters.doubleName? default ("")? html)" <# rt />
<# if parameters.doubleID? exists>
id = "$ (parameters.doubleID? html)" <# rt />
</ # if>
<# if parameters.doubleMultiple? exists>
multiple = "multiple" <# rt />
</ # if>
size = "10" "float: left; width: $ (parameters.labelwidth? default (130 )};">

<@ s.iterator value = "parameters.doubleList">
<# assign itemKey = stack.findValue (parameters.doubleListKey) />
<# assign itemValue = stack.findString (parameters.doubleListValue) />
<option value="${itemValue}"> $ (itemKey) </ option>
"/ @ S.iterator"
</ select>
</ div>
</ div>
<br> <br> <br>
<div>
<img src = "<@ s.url value = '/ common / img / margin_up.gif' encode = 'false' includeParams = 'none'/>"/>
<br>
<img src = "<@ s.url value = '/ common / img / margin_down.gif' encode = 'false' includeParams = 'none'/>"/>
</ div>

</ div>

<script type="text/javascript">

$ (document). ready (function () (
$ ( "# btTransferAll"). registerTransferAllTrigger ( "$ (parameters.id)", "$ (parameters.doubleID)");
$ ( "# btTransfer"). registerTransferTrigger ( "$ (parameters.id)", "$ (parameters.doubleID)");
$ ( "# btReturn"). registerReturnTrigger ( "$ (parameters.id)", "$ (parameters.doubleID)");
$ ( "# btReturnAll"). registerReturnAllTrigger ( "$ (parameters.id)", "$ (parameters.doubleID)");

$ ( "# MoveUp"). CreateUpSuite ( "$ (parameters.doubleID)");
$ ( "# MoveDown"). CreateDownSuite ( "$ (parameters.doubleID)");
));

</ script>

相关文章
  • About the contents of the list box selection control 2008-05-17

    About the contents of the list box selection control, is a real project, is usually used as a control. You can search the web using Mootools technology development M2MSelector control, is a typical implementation. Impression that the Internet also ha

  • Find a good date selection control My97 DatePicker 2010-05-01

    Find a good date selection control My97 DatePicker Collection Notice My97DatePicker directory is a whole directory structure which can not be destroyed, nor on the inside of the files renamed, you can change the directory name My97DatePicker.htm must

  • Select the check box selection 2010-03-09

    Page: <td align="right"> use of state: <input type="checkbox" name="checkBox2" title=" Select or deselect all "/> </ Td> <td width="30%"> <bean:define name="hardWareForm&quo

  • js javascript pop-up mask layer, the mask layer of translucent pop-up and display the contents of the text box registration 2010-02-25

    <!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-

  • [Transferred] to the left of the contents of the drop-down box to the right of the drop-down box 2010-04-16

    A simple move operation <HTML> <HEAD> <TITLE> Select the drop-down menu </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META NAME="Description" CONTENT="Pow

  • About the content selection list box control 2010-03-09

    Choice about the list box control, is a real project, a control is usually used. Can search the web using Mootools technology development M2MSelector control is a typical implementation. Impression that the Internet is also used ExtJS technology of s

  • Several static methods of the user edit text box 2010-05-04

    To make this box can not edit, we can use several methods to solve the following ideas: The contents of the text box is only used to display and allow users to freely edit the time is necessary. Steps: Method 1: Set <input> tag readonly attribute tr

  • Non-editable text box to [change] 2010-05-04

    To make this box can not edit, we can use several methods to solve the following ideas: The contents of the text box is only used to display and allow users to freely edit the time is necessary. Steps: Method 1: Set <input> tag readonly attribute tr

  • When typing in the search box is not displayed when the "Enter", press the mouse automatically cleared after 2010-05-07

    For a human input box, enter a search when there is no content, search box will display "Please enter the search content" When the mouse according to the input box is that the content should be gone If you enter the search contents of the input

  • JScript.VBScript use the message box. Dialog - scripting language 2010-08-28

    The use of JScript message box ------------------------------------- Use warnings, tips and warnings can be used to confirm, confirm and prompt a message box to get user input. The message box is a window object's interface methods. As the window obj

  • Android foundation - the dialog box and floating Activity - transfer 2010-09-15

    Android foundation - the dialog box and floating Activity - transfer In the learning process before, we already know, Android applications, the most commonly used development is based on the Activity screen display, but, in many cases we need to disp

  • Flex4 Group Box GroupBox to achieve 2010-09-27

    Group box (Group Box) is built around a group of related controls in the labeled rectangle around the border. It provides a relationship through the visual display control Approach. As shown below: This will be achieved through the following steps: F

  • flex4 group box (Zhuantie) 2010-10-08

    http://www.javaeye.com/topic/773679 Group box (Group Box) is built around a group of related controls in the labeled rectangle around the border. It provides a relationship through the visual display control method. As shown below: This will be achie

  • JAVA GUI in a text box (JTextField) to monitor changes in the text box 2010-10-29

    As a cross-platform programming solution, Java is clearly not like the Delphi, as the user interface design to provide powerful, intuitive and efficient design support. For example, a text box control, when we perceived in the program if the user cha

  • MFC edit box, a prerequisite for reading and writing data 2010-11-04

    From the edit box to enter data, you need to call UpdateData (TURE); for data exchange, This use of GetDlgItem () can access the contents of If you want to write, first SetDlgItem (), after calling UpdateData (FLASE); data exchange so that it returns

  • Suppression and selection of focus area 2010-12-01

    The focus has been on the previous study: Monitor and keyboard focus Focus is lost in the iframe problem firefox Focus on compatibility issues related events This is the focus and say, and element of choice. html some of the elements (a, button) or s

  • Android use the drop-down box control Spinner 2010-12-23

    In the Android interface design, the drop-down box control named Spinner, the drop-down control is a common UI elements, this ATAAW.COM to introduce the basic use under the Spinner, of which there are two important steps is to design the adapter and

  • Chapter I: Android entering the door (pop-up dialog box) 2011-01-04

    Effect: main.xml <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout android:id="@+id/widget0" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://

  • Javascript call to create XML drop down list box linked 2011-05-19

    The traditional HTML pages linked by the two methods drop-down box : 1) Content directly to hardcode in the drop-down box html The javascript in the , Call javascript function write cycle drop-down box . This method does not apply to the contents of

  • [ASP.NET] study of small mind (5) pop-up message box 2010-08-15

    Yesterday of how pop-up message box to forward, I can not find C # background limited level of pop-up message box method, only using JS script to package a pop-up effect, today is the day of national mourning, I have three minutes of silence on the C