jquery-picklist/examples/callbacks.html

<!DOCTYPE html>
<html>

<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>jQuery PickList - Callbacks Example</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

        <!-- REMOVE THIS if you're using jQuery UI. -->
        <script type="text/javascript" src="../jquery.ui.widget.js"></script>

        <script type="text/javascript" src="../jquery-picklist.js"></script>
        <script type="text/javascript">
                $(function()
                {
                        // Example of adding your event handler during initialization via options.
                        $("#callbacks").pickList(
                        {
                                "beforeBuild": eventHandler,
                                "afterBuild": eventHandler,
                                "beforePopulate": eventHandler,
                                "afterPopulate": eventHandler,
                                "beforeAddAll": eventHandler,
                                "afterAddAll": eventHandler,
                                "beforeAdd": eventHandler,
                                "afterAdd": eventHandler,
                                "beforeRemove": eventHandler,
                                "afterRemove": eventHandler,
                                "beforeRemoveAll": eventHandler,
                                "afterRemoveAll": eventHandler,
                                "beforeRefresh": eventHandler,
                                "afterRefresh": eventHandler,
                                "beforeRefreshControls": eventHandler,
                                "afterRefreshControls": eventHandler,
                                "onDestroy": eventHandler
                        });

                        // Example of adding your event handler after initialization via type binding.
                        $("#callbacks").bind("picklist_onchange", changeHandler);

                        $("#clearConsole").click(function()
                        {
                                clearConsole();
                                return false;
                        });
                });

                function eventHandler(event)
                {
                        logConsole(event.type.replace("picklist_", ""));
                }

                function changeHandler(event, obj)
                {
                        var itemIds = [];

                        obj.items.each(function()
                        {
                                itemIds.push($(this).attr("data-value"));
                        });

                        logConsole(event.type.replace("picklist_", "") + " [" + obj.type + ": " + itemIds.join(", ") + "]");
                }

                function logConsole(msg)
                {
                        $("#console ol").append("<li>" + msg + "</li>");
                        $("#console").scrollTop( $("#console")[0].scrollHeight - $("#console").height() );
                }

                function clearConsole()
                {
                        $("#console ol").html("");
                }
        </script>

        <link type="text/css" href="../jquery-picklist.css" rel="stylesheet" />
        <!--[if IE 7]><link href="../jquery-picklist-ie7.css" rel="stylesheet" type="text/css" /><![endif]-->

        <style type="text/css">
                #console
                {
                        height: 10em;
                        width: 30em;
                        margin: 0.5em;
                        overflow-y: scroll;
                        border: 1px inset;
                }

                #consoleLabel
                {
                        font-weight: bold;
                        margin-top: 1em;
                }

                #console ol
                {
                        margin: 0;
                        padding: 0 0 0 2em;
                }
        </style>
</head>

<body>

        <div>
                <select id="callbacks" name="callbacks" multiple="multiple">
                        <option value="1">Option 1</option>
                        <option value="2" selected="selected">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4" selected="selected">Option 4</option>
                        <option value="5">Option 5</option>
                </select>
        </div>

        <div id="consoleLabel">Event Log:</div>
        <div id="console"><ol></ol></div>
        <a id="clearConsole" href="#">Clear Console</a>

</body></html>
1	torben	2125	<!DOCTYPE html>
2			<html>
3
4			<head>
5			<meta http-equiv="content-type" content="text/html; charset=utf-8" />
6			<title>jQuery PickList - Callbacks Example</title>
7
8			<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
9
10			<!-- REMOVE THIS if you're using jQuery UI. -->
11			<script type="text/javascript" src="../jquery.ui.widget.js"></script>
12
13			<script type="text/javascript" src="../jquery-picklist.js"></script>
14			<script type="text/javascript">
15			$(function()
16			{
17			// Example of adding your event handler during initialization via options.
18			$("#callbacks").pickList(
19			{
20			"beforeBuild": eventHandler,
21			"afterBuild": eventHandler,
22			"beforePopulate": eventHandler,
23			"afterPopulate": eventHandler,
24			"beforeAddAll": eventHandler,
25			"afterAddAll": eventHandler,
26			"beforeAdd": eventHandler,
27			"afterAdd": eventHandler,
28			"beforeRemove": eventHandler,
29			"afterRemove": eventHandler,
30			"beforeRemoveAll": eventHandler,
31			"afterRemoveAll": eventHandler,
32			"beforeRefresh": eventHandler,
33			"afterRefresh": eventHandler,
34			"beforeRefreshControls": eventHandler,
35			"afterRefreshControls": eventHandler,
36			"onDestroy": eventHandler
37			});
38
39			// Example of adding your event handler after initialization via type binding.
40			$("#callbacks").bind("picklist_onchange", changeHandler);
41
42			$("#clearConsole").click(function()
43			{
44			clearConsole();
45			return false;
46			});
47			});
48
49			function eventHandler(event)
50			{
51			logConsole(event.type.replace("picklist_", ""));
52			}
53
54			function changeHandler(event, obj)
55			{
56			var itemIds = [];
57
58			obj.items.each(function()
59			{
60			itemIds.push($(this).attr("data-value"));
61			});
62
63			logConsole(event.type.replace("picklist_", "") + " [" + obj.type + ": " + itemIds.join(", ") + "]");
64			}
65
66			function logConsole(msg)
67			{
68			$("#console ol").append("<li>" + msg + "</li>");
69			$("#console").scrollTop( $("#console")[0].scrollHeight - $("#console").height() );
70			}
71
72			function clearConsole()
73			{
74			$("#console ol").html("");
75			}
76			</script>
77
78			<link type="text/css" href="../jquery-picklist.css" rel="stylesheet" />
79			<!--[if IE 7]><link href="../jquery-picklist-ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
80
81			<style type="text/css">
82			#console
83			{
84			height: 10em;
85			width: 30em;
86			margin: 0.5em;
87			overflow-y: scroll;
88			border: 1px inset;
89			}
90
91			#consoleLabel
92			{
93			font-weight: bold;
94			margin-top: 1em;
95			}
96
97			#console ol
98			{
99			margin: 0;
100			padding: 0 0 0 2em;
101			}
102			</style>
103			</head>
104
105			<body>
106
107			<div>
108			<select id="callbacks" name="callbacks" multiple="multiple">
109			<option value="1">Option 1</option>
110			<option value="2" selected="selected">Option 2</option>
111			<option value="3">Option 3</option>
112			<option value="4" selected="selected">Option 4</option>
113			<option value="5">Option 5</option>
114			</select>
115			</div>
116
117			<div id="consoleLabel">Event Log:</div>
118			<div id="console"><ol></ol></div>
119			<a id="clearConsole" href="#">Clear Console</a>
120
121			</body></html>