corresponding to a variety of effects, Framework7 inside the way to achieve more, here I just write one of my use, style some of their own modified, want to see the official detailed see http://framework7.cn
Accordion layout of the accordion
<Divclass= "Content-block accordion-list custom-accordion"> <Divclass= "Accordion-item"> <Divclass= "Accordion-item-toggle"> <Iclass= "icon Icon-plus">+</I> <Iclass= "icon Icon-minus">-</I> <span> <spanclass= "Accordion-item-toggle-span">Car</span> </span> <spanclass= "Accordion-item-toggle-s"> <Iclass= "icon Ion-navicon"></I> </span> </Div> <Divclass= "Accordion-item-content"> <P>Here is a detailed description .... Here is a detailed description .... Here is a detailed description .... Here is a detailed description .... Here is a detailed description .... Here is a detailed description .... Here is a detailed description ....</P> </Div> </Div></Div>
var $$ = dom7;$$ (function () { App.myApp.alert (' Accordion item opened ' );}); $$ (function (e) { app.myApp.alert (' Accordion item closed ');});
Two, check box
To include
<input type= "checkbox" Name= "Ks-checkbox" ><div class= "Item-media" > <i class= "icon Icon-form-checkbox "></i></div>
<Divclass= "List-block"> <ul> <Li> <labelclass= "Label-checkbox item-content"> <inputtype= "checkbox"name= "Ks-checkbox"> <Divclass= "Item-media"> <Iclass= "icon Icon-form-checkbox"></I> <Iclass= "icon Icon-zi Ion-tihuo">Mention</I> </Div> <ahref= "javascript:void (0)"class= "Item-link item-content"Ng-click= "Godischarge ();"> <Divclass= "Item-inner"> <Divclass= "Item-title">810-597889</Div> </Div> <Divclass= "Item-inner"> <Divclass= "Item-title">Ai qing</Div> </Div> <Divclass= "Item-inner"> <Divclass= "Item-title">09:00</Div> </Div> </a> </label> </Li> </ul> </Div>
Three, pop-up box Popover
Data-popover =. Pop-up box class name
<Divclass= "Right"ID= "Right"> <ahref=""Data-popover= ". Popover-links"class= "link Open-popover"><Iclass= "Glyphicon glyphicon-th-large"></I></a> </Div>
<Divclass= "PopOver popover-links"> <Divclass= "Popover-angle"></Div> <Divclass= "Popover-inner"> <Divclass= "List-block"> <ul> <Li><ahref=""class= "List-button item-link statisticslist-title Active">Normal order</a></Li> <Li><ahref=""class= "List-button item-link statisticslist-title">Unusual order</a></Li> </ul> </Div> </Div></Div>
Mobile Android and IOS development Framework FRAMEWORK7 Layout