Results 1 to 5 of 5
  1.    #1  
    Hey there,

    well I searched a lot but didn't found anything. The code in the stylematters app does'nt helped too.

    Well I got my collapsible divider like this:

    Code:
    <table class="palm-divider collapsible"  id="disclaimer" x-mojo-touch-feedback="delayed">
      <tr>
          <td class="left"></td>
          <td class="label">
          Disclaimer
          </td>
          <td class="line" width="100%"></td>
          <td><div class="palm-arrow-closed arrow_button"></div></td>
          <td class="right"></td>
        </tr>
    </table>
    <div class="content_text">
       Als Autor übernehme ich keinerlei Gewährleistung für die Angaben der Applikation.
       Ich bemühe mich selbstverständlich dennoch, die Angaben so genau wie Möglich zu gestalten.
       Sollten Fehler auftreten, freue ich mich, über diese Informiert zu werden.
    </div>
    What should happen is that the div "content_text" shouldn't display and than after the divider is tapped it should display.

    I didn't found anything how i can setup this function to a collapsible divider???!!!
  2. #2  
    Put the "content_text" in a drawer object.


    Code:
    <table class="palm-divider collapsible"  id="disclaimer" x-mojo-touch-feedback="delayed">
      <tr>
          <td class="left"></td>
          <td class="label">
          Disclaimer
          </td>
          <td class="line" width="100%"></td>
          <td><div class="palm-arrow-closed arrow_button"></div></td>
          <td class="right"></td>
        </tr>
    </table>
    <div class="content_text"  x-mojo-element="Drawer">
       Als Autor übernehme ich keinerlei Gewährleistung für die Angaben der Applikation.
       Ich bemühe mich selbstverständlich dennoch, die Angaben so genau wie Möglich zu gestalten.
       Sollten Fehler auftreten, freue ich mich, über diese Informiert zu werden.
    </div>
    in your setup function
    Code:
    this.drawerModel = {open:false};
    this.controller.setupWidget("content_text", {property: "open"}, this.drawerModel);
    Last in your event handler for the arrow button add:
    Code:
    this.controller.get('content_text').mojo.setOpenState(!this.controller.get('content_text').mojo.getOpenState());
  3.    #3  
    Okay thanks for your support.

    The Drawer is now closed so the content isn't shown.

    But there is nothing happening when i tap on the divider :-O I added the following event listener code for it in the setup:

    Code:
    Mojo.Event.listen(this.controller.get("disclaimer"),Mojo.Event.tap, this.controller.get('drawer1').mojo.setOpenState(!this.controller.get('drawer1').mojo.getOpenState()));
    the Code for the content is now:

    Code:
    <div class="content_text" id="drawer1" x-mojo-element="Drawer">
        Als Autor übernehme ich keinerlei Gewährleistung für die Angaben der Applikation.
        Ich bemühe mich selbstverständlich dennoch, die Angaben so genau wie Möglich zu gestalten.
        Sollten Fehler auftreten, freue ich mich, über diese Informiert zu werden.
    </div>
    i added the ID 'cause the class exist three times.
  4.    #4  
    Well I did some experimentals and now the drawer is there and the code looks like this:

    in the setup:

    Code:
    this.controller.setupWidget("drawer1",
            this.attributes = {
                modelProperty: 'open',
                unstyled: true
            },
            this.model = {
                open: true
            }
        );
    the html code:

    Code:
    <table class="palm-divider collapsible" id="disclaimer" x-mojo-touch-feedback="delayed">
        <tr>
            <td class="left">
            </td>
            <td class="label">
                Disclaimer
            </td>
            <td class="line" width="100%">
            </td>
            <td>
                <div class="palm-arrow-closed arrow_button">
                </div>
            </td>
            <td class="right">
            </td>
        </tr>
    </table>
    <div class="drawer1"  x-mojo-element="Drawer" name="drawer1">
    <div class="content_text">
        Als Autor übernehme ich keinerlei Gewährleistung für die Angaben der Applikation.
        Ich bemühe mich selbstverständlich dennoch, die Angaben so genau wie Möglich zu gestalten.
        Sollten Fehler auftreten, freue ich mich, über diese Informiert zu werden.
    </div>
    </div>
    but the divider is still shown as closed when the drawer is open (its open by default).
    There is no function on the divider I can't close it and if the drawer is closed by default i can't open it.
  5. #5  
    We neeed to turn the arrow into a button,

    Code:
    <table class="palm-divider collapsible" id="disclaimer" x-mojo-touch-feedback="delayed">
        <tr>
            <td class="left">
            </td>
            <td class="label">
                Disclaimer
            </td>
            <td class="line" width="100%">
            </td>
            <td>
                <div id="butArrow" class="palm-arrow-closed arrow_button">
                </div>
            </td>
            <td class="right">
            </td>
        </tr>
    </table>
    <div class="drawer1"  x-mojo-element="Drawer" name="drawer1">
    <div class="content_text">
        Als Autor übernehme ich keinerlei Gewährleistung für die Angaben der Applikation.
        Ich bemühe mich selbstverständlich dennoch, die Angaben so genau wie Möglich zu gestalten.
        Sollten Fehler auftreten, freue ich mich, über diese Informiert zu werden.
    </div>
    </div>
    Then:
    Add a tap event to the button in the Setup function
    Code:
    Mojo.Event.listen(this.controller.get('butArrow'), Mojo.Event.tap, this.toggleDrawer.bind(this));
    Finally:
    Create the event handler for the button
    Code:
    MyAssistant.prototype.toggleDrawer = function(e){		
    
    //use this to change the button image from open to closed and vice versa
                      //I am not sure what CSS classes are set up for this
    
    //this will toggle the drawers state
    this.drawerModel.mojo.setOpenState(!this.drawerModel.mojo.getOpenState());
    }
    Last edited by dirtydogg; 05/27/2010 at 05:42 PM. Reason: Clarity

Posting Permissions