Как сделать так, чтобы селектор удерживал нажатое состояние до повторного нажатия

Да, этот вопрос слишком широк. Но меня это заинтересовало. Вот грубый пример того, как его выполнить.

Я попытался объяснить, что происходит с комментариями. Конечно, это можно сделать лучше, но я надеюсь, что это поможет.

// init on page ready
$(function() {
    // check on each scroll event
    $(window).scroll(function(){
        // elements to be tested
        var _elements = $('.ele');

        // get most visible element (result)
        var ele = findMostVisible(_elements);
    });
});


function findMostVisible(_elements) {

    // find window top and bottom position.
    var wtop = $(window).scrollTop();
    var wbottom = wtop + $(window).height();


    var max = 0; // use to store value for testing
    var maxEle = false; // use to store most visible element

    // find percentage visible of each element
    _elements.each(function(){

        // get top and bottom position of the current element
        var top = $(this).offset().top;
        var bottom = top + $(this).height();

        // get percentage of the current element
        var cur = eleVisible(top, bottom, wtop, wbottom);

        // if current element is more visible than previous, change maxEle and test value, max 
        if(cur > max) {
            max = cur;
            maxEle = $(this);
        }
    });

    return maxEle;
}

// find visible percentage
function eleVisible(top, bottom, wtop, wbottom) {

    var wheight = wbottom - wtop;

    // both bottom and top is vissible, so 100%
    if(top > wtop && top < wbottom && bottom > wtop && bottom < wbottom)
    {
        return 100;
    }

    // only top is visible
    if(top > wtop && top < wbottom)
    {
        return  100 + (wtop - top) / wheight * 100;
    }

    // only bottom is visible
    if(bottom > wtop && bottom < wbottom)
    {
        return  100 + (bottom - wbottom) / wheight * 100;
    }

    // element is not visible
    return 0;
}

Рабочий пример - https://jsfiddle.net/exabyssus/6o30sL24/

-1
задан AndreaF 30 March 2019 в 23:13
поделиться

1 ответ

Можете ли вы использовать ToggleButton вместо Button?

layout.xml

<ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:textOff="done"
        android:textOn="done"
        android:background="@drawable/test_selector"/>

test_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- on checked -->
    <item
        android:state_checked="true"
        android:state_pressed="false"
        android:drawable="@drawable/button_bg_selected" />

    <!-- normal -->
    <item
        android:state_checked="false"
        android:state_pressed="false"
        android:drawable="@drawable/button_bg_normal" />

    <!-- pressed -->
    <item
        android:state_pressed="true"
        android:drawable="@drawable/button_bg_pressed" />

</selector>
0
ответ дан ysys 30 March 2019 в 23:13
поделиться
Другие вопросы по тегам:

Похожие вопросы: