كيفية جعل زر انزلاق الشريط الجانبي في المرن

Question

أنا جديد إلى حد ما على المرن. أريد أن أجعل زر زر (أيقونة) في أقصى اليمين في منتصف الصفحة التي تعرض شريطا جانبيا منزلقا مع أزرار متعددة في ذلك عند تحريكه. أريد عندما يحوم المستخدم بالخروج من شريط الزر إنه ينزلق مرة أخرى.

من الناحية النظرية حصلت على أساسيات ذلك للعمل. المشكلة التي أحصل عليها هي أنه عندما يقوم المستخدم بنقل الماوس بين الأزرار الموجودة في الشريط الجانبي، فإنه يركل في تغيير الحالة والشريط الجانبي ينزلق مرة أخرى. حاولت استخدام أنواع مختلفة من الحاويات وحصلت على نفس النتائج.

اي نصيحه؟

شكرًا،

تام

هنا هو الرمز:

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:vld ="com.lal.validators.*"
    xmlns:effect="com.lal.effects.*" 
    width="150"
    horizontalAlign="right"
    gap="0">

    <fx:Script>
        <![CDATA[
            import com.lal.model.LalModelLocator;
            var _model:LalModelLocator = LalModelLocator.getInstance();

        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:ArrayCollection id="someData"> 
        </mx:ArrayCollection>
    </fx:Declarations>
    <s:states>
        <s:State name="normal" />
        <s:State name="expanded" />
    </s:states>
    <fx:Style source="/styles.css"/>
    <s:transitions>
        <s:Transition fromState="normal" toState="expanded"  >
            <s:Sequence>
                <s:Wipe direction="left" duration="250" target="{buttonsGroup}"  />
            </s:Sequence>

        </s:Transition>
        <s:Transition fromState="expanded" toState="normal"  >
            <s:Sequence>            
                <s:Wipe direction="right" duration="250" target="{buttonsGroup}"  />
            </s:Sequence>   
        </s:Transition>
    </s:transitions>
    <s:Button skinClass="com.lal.skins.CalendarButtonSkin" id="calendarIconButton" 
              includeIn="normal"
              verticalCenter="0"
              mouseOver="currentState = 'expanded'"/>

    <s:Panel includeIn="expanded" id="buttonsGroup"           
              mouseOut="currentState = 'normal' "
              width="150" height="490" >
        <s:layout>
            <s:VerticalLayout gap="0" paddingRight="0" />
        </s:layout>
        <s:Button id="mondayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="tuesdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="wednesdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="thursdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="fridayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="saturdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="sundayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
    </s:Panel>

</s:VGroup>  

Answer 1

إذا فهمت بشكل صحيح، فأنت ترغب في إنشاء نوع من سلوك القائمة المنبثقة المتحركة. تريد إظهار اللوحة عندما يحوم المستخدم عبر الزر الأصلي، وإخفائه مرة أخرى عندما يتحرك المستخدم الماوس بعيدا عن القائمة.

مشكلتك هي أنك تخفي اللوحة على الفور على Mouseout. هذا ليس ما تريده لأنك ستحصل في كثير من الأحيان على حدث Mouseout عندما يتحرك المستخدم المؤشر بين المكونات داخل اللوحة.

تتمثل نهج أفضل في بدء حدث Mouseout مؤقتا سيبدأ الانتقال بعد تأخير موجز، ثم إلغاء هذا الموقت إذا تلقيت حدثا إضافيا آخر في هذه الأثناء.

سوف تبدو مثل هذا (غير مختبر):

mouseOver="showMenu()"
mouseOut="hideAfterDelay()"

protected var t:Timer;

protected function hideAfterDelay ():void {
    killTimer();
    t = new Timer(500, 1);
    t.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
    t.start();
}

protected function onTimerComplete ():void {
    currentState = "normal";
    killTimer();
}

protected function killTimer ():void {
    if (t) {
        t.removeEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
        t.stop();
        t = null;
    }
}

protected function showMenu ():void {
    killTimer();
    currentState = "expanded";
}

تحتاج إلى معالجات الماوس على كل من الزر الأصلي والقائمة. قد تحتاج إلى إجراء بعض التعديلات، ولكن نأمل أن يظهر هذا الفكرة الأساسية.