Does anyone have a good accordion-style snippet?

il y a 12 ans • mis à jour par il y a 12 ans • 4

I'm trying to build an accordion-style navigation (for lack of a better explanation) in my app. Similar to this guy: http://www.designchemical.com/lab/jqu...

I'm trying to work out the logic, and I thought I'd throw it out there to see if anyone has any suggestions.

My main items are from a datasource and created as panels in a pager (with a looped action). I want an onclickup to expand the height of the panel I touch (it could be any of them) and (most challengingly) push the other panels down in the pager.

I know the scale action is the way to change heights (my first strategy), but scaling panel1 to a larger height doesn't push panel2 down. Something that creates a new panel between panel1 and panel2, would be acceptable, but I'm still working through the logic there. Maybe create new panel bottomof panel1 and translate the others down? Not very elegant, so any ideas would be helpful.

Voter

Réponses 4
Plus ancien en premier
- Plus récent en premier
- Plus ancien en premier

il y a 12 ans

Tyler,

The challenge here is that a list, pager or tableview has its scroll defined based on the size of its contents, when you scale or change that content, then the scroll becomes invalid.

Your best bet is to not use a pager and build out your column view with panels instead.

I will try and create an example for you.

Répondre
|

il y a 12 ans

Ah, I was afraid of that. I noticed that if I triggered my action and turned my iPad 90° (and back, since my design isn't landscape optimized yet) it redrew the pager perfectly. This makes sense, but isn't practical, of course.

Just for clarification, here's how I have my pager laid out:




<pager>


   <panel name="1" onclickup="open">


      <panel name="1a"></panel>


   </panel>


   <panel name="2" onclickup="open">


      <panel name="2a"></panel>


   </panel>


   <panel name="3" onclickup="open">


      <panel name="3a"></panel>


   </panel>


   <panel name="4" onclickup="open">


      <panel name="4a"></panel>


   </panel>


</pager>

I could also structure it like this:




<pager>


   <panel name="1" onclickup="open"></panel>


   <panel name="1a"></panel>


   <panel name="2" onclickup="open"></panel>


   <panel name="2a"></panel>


   <panel name="3" onclickup="open"></panel>


   <panel name="3a"></panel>


   <panel name="4" onclickup="open"></panel>


   <panel name="4a"></panel>


</pager>

Another method I'm contemplating: my action could delete all the primary panels, and recreate them with the appropriate secondary panel in the mix. (Tapping on "1" deletes "1", "2", "3", and "4" then creates "1", "1a", "2", "3", and "4".) This is a little uglier code and probably a slightly slower experience, but it might work.

Looking forward to your example! Thanks, Ian!

Répondre
|

il y a 12 ans

Tyler,

Adam pointed out that our Event Sample app has an accordion style design that might work for you. However, it runs horizontal and not vertical, so you would have to adjust it.

You can find it here: https://studio.rarewire.com/wordpress...

Répondre
|

il y a 12 ans

Here is a simple version of it. The theory is overlapping the panels and moving them around.




<wire>


    <main>


      <panel name="menu" alias="MENU" width="100%" height="100%" background="ff0000">


        <panel name="sub-list1" alias="SUB-LIST1" width="100%" height="100%" alpha="1">


          <panel name="subA" alias="A" width="100%" height="300" background="333333" onclickup="show-subB">


            <text name="text1" width="100%" height="100" color="#000000" font="arial" size="12" alignment="left" text="Sub 1"></text>


            <text name="text2" width="100%" height="100" bottomof="text1" color="#000000" font="arial" size="12" alignment="left" text="Sub 4" ></text>


            <text name="text3" width="100%" height="100" bottomof="text2" color="#000000" font="arial" size="12" alignment="left" text="Sub 5" ></text>


          </panel>


          <panel name="subB" alias="B" width="100%" height="100" ypos="100" background="00ff00" >


            <text name="text" alias="T1" width="100%" height="100" color="#000000" font="arial" size="12" alignment="left" text="Sub 2" ></text>


          </panel>


          <panel name="subC" alias="C" width="100%" height="100" ypos="200"  background="ffffff">


            <text name="text" width="100%" height="100%" color="#000000" font="arial" size="12" alignment="left" text="Sub 3"></text>


          </panel>


          <panel name="subD" alias="D" width="100%" ypos="300" height="724" background="ff0000"></panel>


        </panel>


      </panel>


    </main>



    <actions>


      <action name="show-subB">


          <translate  ypos="300" time=".5" curve="linear" target="B" />


          <translate  ypos="400" time=".5" curve="linear" target="C" />


          <translate  ypos="500" time=".5" curve="linear" target="D" />


          <set onclickup="hide-subB" target="A" />



      </action>


      <action name="hide-subB">


          <translate  ypos="100" time=".5" curve="linear" target="B" />


          <translate  ypos="200" time=".5" curve="linear" target="C" />


          <translate  ypos="300" time=".5" curve="linear" target="D" /> 


          <set onclickup="show-subB" target="A" /> 


      </action>


    </actions>


</wire>

Répondre
|

Service d'assistance aux clients par UserEcho