Items vom Type "sortable()" mit inputsfelder verbinden

oment · 10. Januar 2012

Hallo zusammen,

Ich bin neu bei jquery and ich hoffe, dass mir jemand hilft.

Ich habe zwei Items vom Type "sortable()" erstellt. Ich kann die beiden Elementen sortieren, soweit gut. Ich möchte jetzt jedem Item mit zwei Inputsfelder "label und content" zuweisen , sodass wenn auf Item 1 klicke, werden die dazugehörige "Label1 and Inhalt1" angezeigt.

Danke schon mal im Vorraus für eure Hilfe,

Grüße Omen

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>


<style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
   
    label, input {display: block;}
    textarea {margin-bottom: 12px;width:95%; padding: .4em;height:15em;}
    input.text {margin-bottom: 12px;width: 95%;padding: .4em;}
</style>
    <script>
   
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
  
    </script>
</head>
<body>

<form>
<ul id="sortable">
    <li id="1" onclick="showFs1();" type="button" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li id="2" type="button" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
</ul>


 <fieldset id="fs1" style="clear: both; ">
              <label for="label1">Label 1</label>
              <input type="text" name="label1" id="label1" value="" class="text ui-corner-all">
              <label for="content1">Content 1</label>
              <textarea name="inhalt1" id="inhalt1" class="text ui-corner-all"></textarea>
            </fieldset>
 <fieldset id="fs1" style="clear: both; ">
              <label for="label2">Label 2</label>
              <input type="text" name="label2" id="label2" value="" class="text ui-corner-all">
              <label for="label2">Label 2</label>
              <textarea name="content2" id="content2" class="text ui-corner-all"></textarea>
            </fieldset>
</form>
</body>
</html>

Items vom Type "sortable()" mit inputsfelder verbinden

oment

Grünschnabel

Neue Beiträge