Требуется Jstree css, который использует большую темную стрелку для открытия и закрытия узла, как показано на рисунке ниже - PullRequest
Новая
       12

Требуется Jstree css, который использует большую темную стрелку для открытия и закрытия узла, как показано на рисунке ниже

0 голосов
/ 08 мая 2018

Я новичок в Jstree. Прямо сейчас я использую ниже css и js для jstree, который использует 32px.png для значков открытия и закрытия узла.

https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js

Может ли кто-нибудь помочь мне с CSS, который использует большую темную стрелку для открытия и закрытия узла, как показано на рисунке ниже.

Снимок экрана jstree с большой темной стрелкой, который я нашел в Интернете 

Here is the fiddle, with big dark arrow -

http://jsfiddle.net/wqrmpb01/2/

1 Ответ

0 голосов
/ 10 мая 2018

Надеюсь, ты выглядишь примерно так enter image description here

Я могу добавить код ниже, чтобы сделать это возможным 

<!DOCTYPE html>
<html>
<head>
    <title>JSTree</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <style type="text/css">

        .jstree-node .jstree-icon.jstree-ocl {
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Angle_right_font_awesome.svg/512px-Angle_right_font_awesome.svg.png');
            background-size: 22px 22px;
            background-position: center !important;
            background-repeat: no-repeat;
            transition: all 0.3s ease;
        }
        .jstree-node.jstree-open .jstree-icon.jstree-ocl {
            transform: rotate(90deg);
        }

    </style>
</head>
<body>
    <h2>
        JSTree
    </h2>
    <div id="jstree_demo_div"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#jstree_demo_div').jstree({
                'core' : {
                    'data' : [
                       'Simple root node',
                       {
                         'text' : 'Root node 2',
                         'state' : {
                           'opened' : true,
                           'selected' : true
                         },
                         'children' : [
                           { 'text' : 'Child 1' },
                           'Child 2'
                         ]
                      }, {
                         'text' : 'Root node 3',
                         'state' : {
                           'opened' : false,
                           'selected' : false
                         },
                         'children' : [
                           { 'text' : 'Child 11' },
                           'Child 22'
                         ]
                      }
                    ]
                },
                "checkbox" : {
                    "keep_selected_style" : false
                },
                "plugins" : [ "wholerow" ]
            });
        })
    </script>
</body>
</html>

Здесь я не использовал font-awesome, а изменил фоновое изображение. Пожалуйста, проверьте код и измените его так, как вы хотите.

Спасибо

...