All geek questions in one place

Create a bullet list in a mindmap sample using js-mindmap

I use the js-mindmap library for another use, I need to allow the selection to link to extrenal / internal pages to some links, but I need others to bubble into the list of markers (preferably with the same css form as the rest of the mindmap.) I initially looked at getting warning content from header or alt tags, but not sure if they will save the ul and li needed without default in mindmap format ...

I am looking for an easier way to accomplish this. I am sure css is most likely the best practice, and I need to pull the content from html to make it easier to create different mods.

here is JSFiddle MindMp

HTML:

<!DOCTYPE html>
<html>
<head>
<!-- Computer Medic 2016 
NOTE: http://stackoverflow.com/questions/15352556/links-not-working-on-js-mindmap
-->
<title>ALS Mindmap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="mindmap/js-mindmap.css" />
<link href="mindmap/style.css" type="text/css" rel="stylesheet"/>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!-- UI, for draggable nodes -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

<!-- Raphael for SVG support (won't work on android) -->
<script type="text/javascript" src="mindmap/raphael-min.js"></script>

<!-- Mindmap -->
<script type="text/javascript" src="mindmap/js-mindmap.js"></script>

<!-- Kick everything off -->
<script src="mindmap/script.js" type="text/javascript"></script>

<style>
.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
</style>



</head>
<body>
  <ul>
    <li><a href="http://jeffbarcay.com/">ALS</a>
      <ul>
        <li><a href="#" target="_blank" class="alert" style="background:green !important;">Chest Pain</a></li>
        <li><a href="#" target="_blank" class="icon linkedin" color="blue">Shortness of Breath</a></li>
        <li><a href="#" target="_blank" class="icon facebook">Allergic Reaction</a></li>
        <li><a href="http://www.google.com" target="_blank" class="icon twitter" title="goo">Diabetic</a></li>
        <li><a href="#">STEMI</a>
          <ul>
            <li><a href="#" target="_blank" class="icon twitter" title="9">ACS</a></li> 
            <li><a href="#" target="_blank" class="closebtn" title="13">STEMI</a>
              <ul>
                <li><a href="#" title="A">Treatment</a></li> 
                <li><a href="#" title="C">Protocol</a></li> 
              </ul>
            </li> 
          </ul>
        </li>


        </ul>
    </li>
  </ul>


  <div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
  </div>

</body>
</html>
+4
1

, , . , html.

, . , data-content . , , , click.

, div :

$('a').click(function(e){
    var tag = $(this).attr('data-content');
    if(tag)
    {
        $('.alert .content').html(content[tag]).parent().show();
    }
});

- , .

https://jsfiddle.net/x8826shn/7/

+1

Source: https://habr.com/ru/post/1665122/

More articles:


All Articles