Avatar billede langkiller Nybegynder
25. oktober 2011 - 01:13 Der er 5 kommentarer og
1 løsning

Lukke knap til et jquery vindue (drag box)

Har fundet et script til en "flyrbart" jquery box, som jeg har tænkt mig at rette til efter eget behov. Har bare brug for en "luk vindue" knap, men kan ikke rigtig finde en løsning.

sådan her ser js filen ud:

(function($) {
    $.extend($.fn, {
        getCss: function(key) {
            var v = parseInt(this.css(key));
            if (isNaN(v))
                return false;
            return v;
        }
    });
    $.fn.Drags = function(opts) {
        var ps = $.extend({
            zIndex: 20,
            opacity: .7,
            handler: null,
            onMove: function() { },
            onDrop: function() { }
        }, opts);
        var dragndrop = {
            drag: function(e) {
                var dragData = e.data.dragData;
                dragData.target.css({
                    left: dragData.left + e.pageX - dragData.offLeft,
                    top: dragData.top + e.pageY - dragData.offTop
                });
                dragData.handler.css({ cursor: 'move' });
                dragData.target.css ({ cursor: 'move' });
                dragData.onMove(e);
            },
            drop: function(e) {
                var dragData = e.data.dragData;
                dragData.target.css(dragData.oldCss); //.css({ 'opacity': '' });
                dragData.handler.css('cursor', dragData.oldCss.cursor);
                dragData.onDrop(e);
                $().unbind('mousemove', dragndrop.drag)
                    .unbind('mouseup', dragndrop.drop);
            }
        }
        return this.each(function() {
            var me = this;
            var handler = null;
            if (typeof ps.handler == 'undefined' || ps.handler == null)
                handler = $(me);
            else
                handler = (typeof ps.handler == 'string' ? $(ps.handler, this) : ps.handle);
            handler.bind('mousedown', { e: me }, function(s) {
                var target = $(s.data.e);
                var oldCss = {};
                if (target.css('position') != 'absolute') {
                    try {
                        target.position(oldCss);
                    } catch (ex) { }
                    target.css('position', 'absolute');
                }
                //oldCss.cursor = target.css('cursor') || 'default';
                oldCss.cursor = 'move';
                oldCss.opacity = target.getCss('opacity') || 1;
                var dragData = {
                    left: oldCss.left || target.getCss('left') || 0,
                    top: oldCss.top || target.getCss('top') || 0,
                    width: target.width() || target.getCss('width'),
                    height: target.height() || target.getCss('height'),
                    offLeft: s.pageX,
                    offTop: s.pageY,
                    oldCss: oldCss,
                    onMove: ps.onMove,
                    onDrop: ps.onDrop,
                    handler: handler,
                    target: target
                }
                target.css('opacity', ps.opacity);
                target.css('cursor', 'move');
                $().bind('mousemove', { dragData: dragData }, dragndrop.drag)
                    .bind('mouseup', { dragData: dragData }, dragndrop.drop);
            });
        });
    }
//})(jQuery);


håber at nogen har lyst til at hjælpe med hvad der skal tilføjes til  jquery delen og hvordan selve <a > tagget skal se ud.
Avatar billede keysersoze Guru
25. oktober 2011 - 09:43 #1
Hvad med at vælge en løsning hvor det er implementeret og ikke mindst dokumenteret; http://jqueryui.com/demos/dialog/
Avatar billede BrianCsection Nybegynder
25. oktober 2011 - 09:43 #2
måske disse tutorials kan hjælpe, hvis du altså bruger Jquery biblioteket:
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
http://api.jquery.com/remove/
Avatar billede langkiller Nybegynder
25. oktober 2011 - 20:02 #3
Keysersoze: Har allerede kigget på den løsning, men det lader ikke til at man kan ændre så meget i den, udseendet osv. tænker jeg på.

Brian: Vil lige kigge på de to tutorials og se om det kan hjælpe mig i den rigtige retning.
Holder stadig tråden åben. det kan jo være der kommer flere gode svar :)
Avatar billede keysersoze Guru
25. oktober 2011 - 20:24 #4
I så fald har du ikke kigget særlig godt efter. Der tilbydes et helt interface hvor du kan manipulere med udseendet - http://jqueryui.com/themeroller/ - og derudover kan css-filen selvfølgelig manipuleres efterfølgende. Det kan selvfølgelig stadig være at det ikke er nok, men så må du have nogle specielle ønsker vi måske skal oplyses nærmere om.
Avatar billede langkiller Nybegynder
25. oktober 2011 - 20:38 #5
ahh.. når ja der står en hel masse jo :p
Havde bare set det helt samme på en anden side hvor der ikke rigtig var nogen forklaring udover den meget korte kode man skuller bruge. vil læse på det , er ny til jquery så vil lige sætte mig ordenlig ind i det.

I smider bare et svar hvis i vil have points
Avatar billede keysersoze Guru
25. oktober 2011 - 21:36 #6
svar.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester