Autor Thema: Onclick und weitere Events ohne Funktion auf Touch-Devices  (Gelesen 426 mal)

Offline darkon

  • Jr. Member
  • **
  • Beiträge: 56
Vielleicht ist es schon mehreren aufgefallen, dass wenn man ein Event, egal ob onclick oder touchstart etc., mit einem Button aus der übergeordneten Kategorie Multistatebutton verwenden möchte, diese auf Touch-Geräten (Handy, Tablet) nicht funktionieren bzw. gehändelt werden.

Beispiel:
<div data-type="push" class="push"
  data-on-color="#0088CC"
  data-off-color="green"
  data-icon="fa-check"
  data-background-icon="null"
  onclick="$('#BA_Ro_Fenster.dialog-close').trigger('click');">
</div> 

Ich habe dazu mehrere Forenbeiträge gefunden, die jedoch keine Lösung des Problems enthielten.

Ich würde gerne über ein "onclick" (Betätigung des Switch) den Status des Switch abfragen, indem ich prüfe, ob die Klasse multistatebutton active gesetzt ist. Oder einfach nur ein Popup schließen mit einem Push Button.

Weiß jemand wie man dieses Problem lösen kann? Auf dem PC funktioniert alles einwandfrei.


Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3759
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Onclick und weitere Events ohne Funktion auf Touch-Devices
« Antwort #1 am: 03 Januar 2018, 04:01:22 »
die sauberste Lösung wäre, du baust ein neues Widget, wo die speziellen Funktion einfacher realisiert werden können.
Man kann von switch erben und braucht nur die Funktion init_ui überschreiben.

<div data-type="newbutton" data-device="SchrankLicht" data-receiver="#BA_Ro_Fenster"></div>
/* FTUI Plugin
 * Copyright (c) 2018 Mario Stephan <mstephan@shared-files.de>
 * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
 */

/* global ftui:true, Modul_switch:true */

"use strict";

function depends_newbutton() {
    var deps = [];
    if(typeof window["Modul_switch"] === 'undefined'){
        deps.push('switch');
    }
    return deps;
}

var Modul_newbutton = function () {

    function init_ui(elem) {

        base.init_ui.call(me, elem);
       
        elem.on('clicked', function() {
           console.log('clicked:' + elem.find('.famultibutton').hasClass('active'));
           var receiver = elem.data('receiver');
           $(receiver + '.dialog-close').trigger('click');
        });
    }

    // public
    // inherit all public members from base class
    var parent = new Modul_switch();
    var base = {
        init_ui: parent.init_ui
    };
    var me = $.extend(parent, {
        //override or own public members
        widgetname: 'newbutton',
        init_ui: init_ui,
    });

    return me;
};

Offline choenig

  • Full Member
  • ***
  • Beiträge: 112
Antw:Onclick und weitere Events ohne Funktion auf Touch-Devices
« Antwort #2 am: 09 August 2018, 20:45:31 »
Hi,

ich habe das Obige mal als Vorlage verwendet, um ein onclick-widget zu bauen. Das einzige, was es zusätzlich zum "Switch" kann, ist ein onclick durchführen zu können

Zitat
<div data-type="onclick" data-icon="fa-close" data-onclick="$('#statusoverlay').hide();">

Hier der Code:
/* FTUI Plugin
 * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
 */

/* global ftui:true, Modul_switch:true */

"use strict";

function depends_onclick() {
    var deps = [];
    if(typeof window["Modul_switch"] === 'undefined' || !$.fn.switch){
        return ["switch"];
    }
    return deps;
}

var Modul_onclick = function () {
    function init_ui(elem) {
        base.init_ui.call(me, elem);

        elem.on('clicked', function() {
           var onclick = elem.data('onclick');
           eval(onclick);
        });
    }

    // public
    // inherit all public members from base class
    var parent = new Modul_switch();
    var base = {
        init_ui: parent.init_ui
    };
    var me = $.extend(parent, {
        //override or own public members
        widgetname: 'onclick',
        init_ui: init_ui,
    });

    return me;
};

LG & vielen Dank für die Vorlage :)
Christian

 

decade-submarginal