Onclick und weitere Events ohne Funktion auf Touch-Devices

[darkon]

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:

Code Auswählen Erweitern


<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.

[setstate]

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.

Code Auswählen Erweitern

<div data-type="newbutton" data-device="SchrankLicht" data-receiver="#BA_Ro_Fenster"></div>

Code Auswählen Erweitern


/* 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;
};


[choenig]

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

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

Hier der Code:

Code Auswählen Erweitern


/* 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