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