【问题标题】:Content Collapsible jquery mobile内容可折叠jquery mobile
【发布时间】:2012-07-02 17:39:54
【问题描述】:

我对 jQuery Mobile 1.1.0 手风琴有疑问 (http://jquerymobile.com/test/docs/content/content-collapsible.html)

我有一个带有更多手风琴的页面,当我按下打开/关闭该部分时,我会回到页面顶部。

我已经设置好了:

ajaxEnabled: false;
hashListeningEnabled: false;
linkBindingEnabled: false; 

这是我的代码:

                <!-- anagrafica -->
                <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="c">
                    <h3>Scheda cliente</h3>

                   <!-- Dati azienda -->
                    <div data-role="collapsible" data-collapsed="true" data-content-theme="c" class="grid-scheda">
                        <h3>Anagrafica</h3>
                        <form id="dati-azienda">

                            <div data-role="fieldcontain">
                                <label for="ragionesociale">Ragione Sociale:</label>
                                <input type="text" name="ragionesociale" id="ragionesociale" class="required fullsize" />
                            </div>

                            <div data-role="fieldcontain">
                                <label for="indirizzo">Indirizzo:</label>
                                <input type="text" name="indirizzo" id="indirizzo" class="fullsize" />
                            </div>

                            <div data-role="fieldcontain">
                                <label for="localita">Localit&agrave;:</label>
                                <input type="text" name="localita" id="localita" class="large" />
                                <input type="text" name="cap" id="cap" class="small" placeholder="CAP" />
                            </div>

                            <div data-role="fieldcontain">
                                <label for="pi">Partita IVA:</label>
                                <input type="number" name="pi" id="pi" class="fullsize" />
                            </div>

                            <div data-role="fieldcontain">
                                <label for="fisso">Fisso:</label>
                                <input type="number" name="fisso" id="fisso" class="medium" />
                                <input type="number" name="fax" id="fax" class="medium" placeholder="Fax" />
                            </div>

                            <div data-role="fieldcontain">
                                <label for="mobile">Mobile:</label>
                                <input type="number" name="mobile" id="mobile" class="fullsize" />
                            </div>

                            <div data-role="fieldcontain">
                                <label for="mail">Mail:</label>
                                <input type="text" name="mail" id="mail" class="fullsize" />
                            </div>

                            <!--
                            <div data-role="fieldcontain">
                                <fieldset data-role="controlgroup">
                                   <legend>Altre sedi:</legend>
                                    <input type="checkbox" name="checkbox-0" style="margin-top:0px;" id="checkbox-mini-0" data-mini="true" />
                                    <label for="checkbox-mini-0">Si</label>
                                </fieldset>
                            </div>     
                            -->
                            <fieldset class="ui-grid-a">
                                    <label>&nbsp;</label>
                                    <div class="ui-block-b"><button rel="dati-azienda" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>       
                            </fieldset>
                        </form>
                    </div><!-- /Dati Azienda -->

                   <!-- Dati Referente -->
                    <div data-role="collapsible" data-content-theme="c" class="grid-scheda">
                        <h3>Dati Referente</h3>
                        <form id="dati-referente">
                            <div data-role="fieldcontain">
                                <label for="cognome">Referente:</label>
                                <input type="text" name="cognome" id="cognome" class="small2" placeholder="Cognome" />
                                <input type="text" name="nome" id="nome" class="small2" placeholder="Nome"/>
                                <input type="text" name="dt_nascita" id="dt_nascita" class="small2" placeholder="Data nascita"/>
                            </div>

                           <div data-role="fieldcontain">
                                <label for="posizione">Posizione:</label>
                                <input type="text" name="posizione" id="posizione" class="medium" />
                                <input type="text" name="reperibilita" id="reperibilita" class="medium" placeholder="Reperibilit&agrave;" />
                            </div>

                            <div data-role="fieldcontain">
                                <label for="mobile">Mobile:</label>
                                <input type="number" name="mobile" id="mobile" class="medium" />
                                <input type="number" name="fisso" id="fisso" class="medium" placeholder="Fisso" />
                            </div>

                            <div data-role="fieldcontain">
                                <label for="mail">Mail:</label>
                                <input type="text" name="mail" id="mail" class="fullsize" />
                            </div>

                            <div data-role="fieldcontain">
                                <label for="referente2">Referente alternativo:</label>
                                <input type="text" name="referente2" id="referente2" class="fullsize" />
                            </div>


                            <fieldset class="ui-grid-a">
                                    <label>&nbsp;</label>
                                    <div class="ui-block-b"><button rel="dati-referente" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>       
                            </fieldset>
                        </form>
                    </div><!-- /Dati referente -->     

                    <!-- caratteristiche -->
                    <div data-role="collapsible" data-content-theme="c" class="grid-scheda">
                        <h3>Caratteristiche</h3>

                            <div data-role="fieldcontain">
                                <label for="x">Consistenza attiva:</label>
                                <input type="text" name="x" id="x" class="small" />
                            </div>


                    </div><!-- /caratteristiche -->

                    <!-- registrazione -->
                    <div data-role="collapsible" data-content-theme="c" class="grid-scheda">
                        <h3>Registrazione 190</h3>
                        <form id="registrazione">
                            <div data-role="fieldcontain">
                                <label for="userid">User ID:</label>
                                <input type="text" name="userid" id="userid" class="small2" />
                                <input type="text" name="passw" id="passw" class="small2" placeholder="Password" />
                                <input type="date" name="dt_registrazione" id="dt_registrazione" class="small2" />
                            </div>

                            <?php for($i=1;$i<=2;$i++) { ?>
                            <div data-role="fieldcontain">
                                <label for="analisi_ft_num">Analisi Fattura:</label>
                                <input type="text" name="analisi_ft_num[]" id="analisi_ft_num" class="medium" placeholder="Nr. Fattura" />
                                <input type="date" name="dt_doc[]" class="medium" />
                            </div>
                            <?php } ?>

                            <div data-role="fieldcontain">
                                <label for="codice_cliente">Codice Cliente:</label>
                                <input type="text" name="codice_cliente" id="codice_cliente" class="medium" />
                                <input type="text" name="ciclo_fatturazione" id="ciclo_fatturazione" class="medium" placeholder="Ciclo Fatturazione" />
                            </div>



                            <fieldset class="ui-grid-a">
                                    <label>&nbsp;</label>
                                    <div class="ui-block-b"><button rel="registrazione" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>       
                            </fieldset>
                        </form>
                    </div><!-- /registrazione -->                        


                </div>  
                <!-- /anagrafica -->

感谢您的建议

【问题讨论】:

    标签: jquery-mobile collapsable


    【解决方案1】:

    界面到底应该是什么样子还不是很清楚。但是,请查看文档:http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible-set.html

    您粘贴的链接用于测试演示,但此后语法似乎发生了变化。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-12-01
      • 2012-11-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-01-14
      • 1970-01-01
      相关资源
      最近更新 更多