Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

Efekt windowsa na stronie

Ozzzj

Przez Ozzzj
w Niezbędnik Programisty - Archiwum

Rekomendowane odpowiedzi

Ozzzj Budowniczy

Ozzzj

Opublikowano
Budowniczy

Ozzzj

Opublikowano

Siema siema,

A więc do sedna.

 

Potrzebuje skrypt efektu jak w Windows przy zaznaczaniu pulpitu, ale na stronie www.

Takiego że jak przejedziesz myszka na dany element z innego to robi się kwadracik, znajdę to gdzieś na necie?

 

http://scr.hu/0dnx/kc80u
 

Jeżeli nie, to jak to się wgl nazywa?

I przy pomocy jakiej biblioteki i komend w JS to napisać?

Ozzzj Budowniczy

Ozzzj

Opublikowano
Budowniczy

Ozzzj

  • Autor
Opublikowano

Chodzi Ci o zaznaczenie kilku elementów, aby móc później na nich działać, czy tylko efekt zaznaczenia?

https://jqueryui.com/selectable/#display-grid

 

Tylko efekt, dzięki.

Chodzi Ci o zaznaczenie kilku elementów, aby móc później na nich działać, czy tylko efekt zaznaczenia?

https://jqueryui.com/selectable/#display-grid

 

Zauważyłem że coś nie działa, nawet kiedy skopiowałem cały kod.

Nie można uzyskać tego efektu, dlaczego?

Gość

Gość

Opublikowano

Gość

Opublikowano 

<html>

    <head>

    <style>

        div 

        {

            border: 1px dotted black;

            position:absolute;

        }

    </style>

    <script>

        var btn = false;

        var topOffset, leftOffset;

        var div;

        document.onmousedown = (e) =>

        {

            topOffset = e.pageY;

            leftOffset = e.pageX;

            div = document.createElement("div");

            div.style.top = topOffset + "px";

            div.style.left = leftOffset + "px";

            document.body.appendChild(div);

            btn = true;

        };

        document.onmouseup = () => {

            btn = false;

            document.body.removeChild(div);

        };

        document.onmousemove = (e) => {

            if (btn)

            {

                var width = e.pageX - leftOffset;

                var height = e.pageY - topOffset;

                if (width > 0)

                    div.style.width = width + "px";

                else {

                    div.style.left = e.pageX + "px";

                    div.style.width = Math.abs(width) + "px";

                }

                if (height > 0)

                    div.style.height = height + "px";

                else {

                    div.style.top = e.pageY + "px";

                    div.style.height = Math.abs(height) + "px";

                }

            }

        };

    </script>

    </head>

        

<body>

</body>

</html>

0956f82ade15beb4453406c084017741.gif
Ozzzj Budowniczy

Ozzzj

Opublikowano
Budowniczy

Ozzzj

  • Autor
Opublikowano 
<html>
    <head>
    <style>
        div 
        {
            border: 1px dotted black;
            position:absolute;
        }
    </style>
    <script>
        var btn = false;
        var topOffset, leftOffset;
        var div;
        document.onmousedown = (e) =>
        {
            topOffset = e.pageY;
            leftOffset = e.pageX;
            div = document.createElement("div");
            div.style.top = topOffset + "px";
            div.style.left = leftOffset + "px";
            document.body.appendChild(div);
            btn = true;
        };
        document.onmouseup = () => {
            btn = false;
            document.body.removeChild(div);
        };
        document.onmousemove = (e) => {
            if (btn)
            {
                var width = e.pageX - leftOffset;
                var height = e.pageY - topOffset;
                if (width > 0)
                    div.style.width = width + "px";
                else {
                    div.style.left = e.pageX + "px";
                    div.style.width = Math.abs(width) + "px";
                }
                if (height > 0)
                    div.style.height = height + "px";
                else {
                    div.style.top = e.pageY + "px";
                    div.style.height = Math.abs(height) + "px";
                }
            }
        };
    </script>
    </head>
        
<body>
</body>
</html>
0956f82ade15beb4453406c084017741.gif

 

 

Pięknie dziala, tylko dlaczego buttony blokuje?

(Lub moze JQuery, bo buttony to wykorzystuja)

Ozzzj Budowniczy

Ozzzj

Opublikowano
Budowniczy

Ozzzj

  • Autor
Opublikowano

@Ozzzj Jeśli chodzi Ci tylko o uzyskanie efektu, to ta opcja się do tego nie nadanie. Dodatkowo wymaga dołączenia do strony biblioteki javascript: jQuery oraz jQuery UI.

 

Sam efekt zaznaczania został użyty tutaj: http://stackoverflow.com/questions/8884803/jquery-drag-and-draw

 

Działa ale buttony nie działają dalej po klikaniu.... :_:

 

Przykladowo

<button class="folder" id="1"></button><br />
<span class="icon-text">Programy</span>
$(document).ready(function(){
    $("#1").click(function(){
        $("#f1").show(1000);
    });
});

NAPRAWIŁEM, DO ZAMKNIĘCIA!

Gość

Gość

Opublikowano

Gość

Opublikowano 
<html>
    <head>
    <style>
        div 
        {
            border: 1px dotted black;
            position:absolute;
        }
    </style>
    <script>
        "use strict";
        class SelectBox
        {
            constructor(element)
            {
                this.isMouseButtonPressed = false;
                this.topOffset = this.leftOffset = 0;
                this.divElement = null;
                
                element.onmousedown = (e) =>
                {
                    this.topOffset = e.pageY;
                    this.leftOffset = e.pageX;
                    this.divElement = document.createElement("div");
                    this.divElement.style.top = this.topOffset + "px";
                    this.divElement.style.left = this.leftOffset + "px";
                    document.body.appendChild(this.divElement);
                    this.isMouseButtonPressed = true;
                };         
                element.onmouseup = () => {
                    this.isMouseButtonPressed = false;
                    if (this.divElement != null)
                        this.divElement.remove();
                };
                element.onmousemove = (e) => {
                    if (this.isMouseButtonPressed)
                    {
                        let width = e.pageX - this.leftOffset;
                        let height = e.pageY - this.topOffset;
                        if (width < 0)
                        {
                            this.divElement.style.left = e.pageX + "px";
                            width = Math.abs(width);
                        }
                        if (height < 0)
                        {                    
                            this.divElement.style.top = e.pageY + "px";
                            height = Math.abs(height);
                        }
                        
                        this.divElement.style.width = width + "px";
                        this.divElement.style.height = height + "px";                        
                    }
                };
            }
        }    
        class SelectEffect
        {
            static addTo(element)
            {
                new SelectBox(element);
            }
        }
    </script>
    <script>
        window.onload = (e) => {
            var btnElement = document.querySelector("button");
            btnElement.onmousedown = (e) => {
                e.stopPropagation();
            };
            btnElement.onclick = (e) => {
                alert(123);  
            };
            /////////////// 
            SelectEffect.addTo(document);           
        }
    </script>
    </head>
        
<body>
    <button>test</button>
</body>
</html>

NAPRAWIŁEM, DO ZAMKNIĘCIA!

Na przyszłość dziel się rozwiązaniem z innymi.
Ozzzj Budowniczy

Ozzzj

Opublikowano
Budowniczy

Ozzzj

  • Autor
Opublikowano

A no tak xD sry @pan Szymek
Zamiast div, dajemy to na body, następnie dajemy też odpowiednie id do body.

 

KOD JS

$(function() {
    var $container = $('#windows');
    var $selection = $('<body>').addClass('selection-box');

    $container.on('mousedown', function(e) {
        var click_y = e.pageY;
        var click_x = e.pageX;

        $selection.css({
          'top':    click_y,
          'left':   click_x,
          'width':  0,
          'height': 0
        });
        $selection.appendTo($container);

        $container.on('mousemove', function(e) {
            var move_x = e.pageX,
                move_y = e.pageY,
                width  = Math.abs(move_x - click_x),
                height = Math.abs(move_y - click_y),
                new_x, new_y;

            new_x = (move_x < click_x) ? (click_x - width) : click_x;
            new_y = (move_y < click_y) ? (click_y - height) : click_y;

            $selection.css({
              'width': width,
              'height': height,
              'top': new_y,
              'left': new_x
            });
        }).on('mouseup', function(e) {
            $container.off('mousemove');
            $selection.remove();
        });
    });
});

Plik html

<body id="windows">
Kod strony...
</body>

+ CSS

  .selection-box {
    position:    absolute;
    background: transparent;
    background-color: #657CC9;
    opacity: 0.5;
    border:     1px dotted #000;
  }

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy
×
×
  • Dodaj nową pozycję...