Development Notes: Tweener lists

 <style type="text/css">
  
        ul 
        {
            list-style-type: none;
            line-height: 2em;
        }
    
        li label     
        {
         
            color: #a0a0a0;    
            font-weight: bold;    
            background-color:White ;    
            border-style: solid;
            border-width: 1px;
            border-color: #a0a0a0;
            padding-left:10px;
            padding-right:10px;
            padding-top:3px;
            padding-bottom:3px;
            margin-right:10px;
            font-size: 12px;
            }
  
  li label:hover {    font-weight: bold;    color: #FFFFFF;    background-color: #999999;    border-style: outset;}
   
    </style>
</head>
<body>
<input id="PersonIdTextBox" value="123" type="hidden" />
<input id="addSomething" title="add" type="button" value="add" />
 
<div >
  <ul class="divisions">
   <li data-personid="10" data-somethingid="20">
    <label class="removeSomething">remove</label>
    Something 1
   </li>
      <li data-personid="200" data-somethingid=200">
    <label class="removeSomething">remove</label>
    Something 2
   </li>
          </ul>
    </div>
     <script type="text/javascript">
        
 
 
         $("#addSomething").click(function () {
             var personId = $("#PersonIdTextBox").val();
             var somethingName = "Something 3";
             var somethingId = "432";
 
             var removeLabel = '<label class="removeSomething">remove</label>';
             var listItem = '<li data-personid="' + personId + '" data-somethingid="' + somethingId + '">' + removeLabel + somethingName + '</li>';
             $("ul").append(listItem);
         });
 
 
         $(".removeSomething").live('click', function () {
             var personIdSelector = $(this).parent().data("personId");
             var somethingIdSelector = $(this).parent().data("somethingId");
             alert("here" + personIdSelector + " " + somethingIdSelector);
             $(this).parent().css("text-decoration", "line-through");
         });
     </script>
Development Notes

Saturday, June 4, 2011

Tweener lists

No comments:

Post a Comment

Followers
