Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
   <script src="//code.jquery.com/jquery.min.js"></script>
    
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.3.5/bootstrap-select.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.3.5/bootstrap-select.min.css" /> 
​
    <script src="http://diegotc.github.io/bone101/Support/GSOC/js/jquery-ui.js"></script>
    <link href="http://diegotc.github.io/bone101/Support/GSOC/css/bootstrap.min.css" rel="stylesheet"> 
    
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
</head>
<body>
  
  <div class="row">
            <div class="col-md-12 well">
                <div>
                    <button type="button" id="btPre" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-plus"></span></button>
                </div>
            </div>
             <div class="col-md-3 well">
                <ul class="nav nav-pills nav-stacked example" id="myTab" style="height: 200px; overflow: auto">
                    <li id="cZero" class="active">
                            <a href="#tab_small" data-toggle="pill">
                            <span  class="display edit_text">Preview Card 1</span>
                            <input type="text" class="edit" style="display:none"/>
                        </a>
                    </li>
                </ul>
            </div>
          
        </div>
​
</body>
</html>
 
$(".edit_text").on('dblclick', function(event){
    event.preventDefault(event);
    $(this).hide().siblings(".edit").show().val($(this).text()).focus();
});
​
$(".edit").focusout(function(){
    $(this).hide().siblings(".display").show().text($(this).val());
});
​
$('#btPre').click(function(e) {
    var list = $('#myTab');
    var listActive = $('#myTab .active');
    addNewElement(list,listActive);
});
​
var addNewElement = function addNewElement(list,listActive){
    var psize= list.find('li');
    listActive.removeClass('active');
    psize = psize.size()-1;
    var newLi='<li class="active" id='+psize+'>';
    newLi=newLi+'<a href="#tab_preview" data-toggle="pill">';
    newLi=newLi+'<span  class="display edit_text">Card '+psize+'</span>';
    newLi=newLi+'<input type="text" class="edit" style="display:none"/></a></li>';
    list.append(newLi);
    $('#myTab a[href="#tab_preview"]').tab('show');
};
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
DiegoTcpro
0viewers