jquery-picklist/examples/rich.html

<!DOCTYPE html>
<html>

<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>jQuery PickList - Rich Content 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 rich content items during picklist creation.
                        $("#rich").pickList(
                        {
                                items:
                                [
                                        {
                                                value:    3,
                                                label:    "Basketball",
                                                selected: true,
                                                element:  $(".rich1")
                                        },

                                        {
                                                value:    4,
                                                label:    "Soccer",
                                                selected: true,
                                                element:  $("<img src='images/soccer.png'/>")
                                        }
                                ]
                        });

                        // Example of adding rich content items after picklist creation.
                        $("#rich").pickList("insert",
                        {
                                value:    5,
                                label:    "Football",
                                selected: false,
                                element:  $(".rich3")
                        });
                });
        </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">
                .pickList_listItem .image { float: left; }
                .pickList_listItem .label { float: left; padding-left: 0.25em; }
                .pickList_listItem .clear { clear: both; }
        </style>
</head>

<body>

        <div>
                <select id="rich" name="rich" multiple="multiple">
                        <option value="1">Non-Rich Item 1</option>
                        <option value="2">Non-Rich Item 2</option>
                </select>

                <div class="rich1">
                        <div class="image"><img src="images/basketball.png" /></div>
                        <div class="label">Basketball</div>
                        <div class="clear"></div>
                </div>

                <div class="rich3">
                        <img src="images/football.png" /> Football
                </div>
        </div>

</body></html>
1	<!DOCTYPE html>
2	<html>
3
4	<head>
5	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
6	<title>jQuery PickList - Rich Content 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 rich content items during picklist creation.
18	$("#rich").pickList(
19	{
20	items:
21	[
22	{
23	value: 3,
24	label: "Basketball",
25	selected: true,
26	element: $(".rich1")
27	},
28
29	{
30	value: 4,
31	label: "Soccer",
32	selected: true,
33	element: $("<img src='images/soccer.png'/>")
34	}
35	]
36	});
37
38	// Example of adding rich content items after picklist creation.
39	$("#rich").pickList("insert",
40	{
41	value: 5,
42	label: "Football",
43	selected: false,
44	element: $(".rich3")
45	});
46	});
47	</script>
48
49	<link type="text/css" href="../jquery-picklist.css" rel="stylesheet" />
50	<!--[if IE 7]><link href="../jquery-picklist-ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
51
52	<style type="text/css">
53	.pickList_listItem .image { float: left; }
54	.pickList_listItem .label { float: left; padding-left: 0.25em; }
55	.pickList_listItem .clear { clear: both; }
56	</style>
57	</head>
58
59	<body>
60
61	<div>
62	<select id="rich" name="rich" multiple="multiple">
63	<option value="1">Non-Rich Item 1</option>
64	<option value="2">Non-Rich Item 2</option>
65	</select>
66
67	<div class="rich1">
68	<div class="image"><img src="images/basketball.png" /></div>
69	<div class="label">Basketball</div>
70	<div class="clear"></div>
71	</div>
72
73	<div class="rich3">
74	<img src="images/football.png" /> Football
75	</div>
76	</div>
77
78	</body></html>