zoukankan      html  css  js  c++  java
  • app-framework学习--pannel介绍

    每一个panel在智能设备上都显示为一个页面:

    <div id="content">内如果有多个panel,每次只能显示一个panel,关闭后才能显示另外一个panel。

      panel的属性:

    官方文档:

    1. css property - overflow:hidden - When set, this will disable auto-wiring of the scroller. Usefull for panels that need to auto expand, like carousels or google maps
    2. selected="true" - When set, this will make the panel the default panel that gets loaded.
    3. modal="true" - When set, this turns the panel into a modal window that takes up 100% of the screen (can be changed via CSS).
    4. data-header="id" - when set, it will load the custom <header> tag with that ID for that panel
    5. data-footer="id" - when set, it will load the custom <footer> tag with that ID for that panel
    6. data-nav="id" - when set, it will load the custom <nav> tag with that ID for that panel
    7. data-defer="filename.html" - This will load content into the panel from a remote page/url. This is useful for separating out content into different files. af.ui.ready is not available until all files are loaded asynchronously.
    8. data-tab="anchor_id" - This will set the selected tab in the bottom navbar to the id. Useful for when you update your panel via JS and not clicking a bottom tab.
    9. data-load="func_name" - This is the string name of a function to run when the panel is loaded. The div is passed in as a parameter so you can use a single function and act upon other attributes.
    10. data-unload="func_name" - This is the string name of a function to run when the panel is unloaded

      data-header="id"  自定义header

      data-footer="id"  自定义footer

      data-nav="id"     左侧的导航条

      data-defer="filename.html"  可以根据设置的地址给panel加载内容。

      data-tab="anchor_id"   在此panel显示时,将选中footer中id为anchor_id的选项。

      data-load="func_name"  在panel加载后,执行的方法。这个方法在panel每次正好在当前页面时都会执行。

      data-unload="func_name"  在panelunload后执行的方法,也就是离开本panel时执行

      title="home"   可以设定header的显示的内容。

      

       selected="true" 可以是这个panel变成默认的panel


    <divclass="panel"id="about"style="overflow:hidden"> </div><!-- no scrolling -->
     
    <divclass="panel"id="login"selected="true"> </div><!-- Default loaded panel -->
     
    <divclass="panel"id="login"modal="true"> </div><!-- Modal window -->
     
    <divclass="panel"id="about"data-header="default"> </div><!-- Change the header -->
     
    <divclass="panel"id="login"data-footer="none"> </div><!-- This removes the footer!-->
     
    <divclass="panel"id="login"data-nav="settings"> </div><!-- Change the side nav menu -->
     
    <divclass="panel"id="login"data-tab="settings"> </div><!-- Change the selected tab to settings -->
     
    <divclass="panel"id="login"data-defer="app/login"> </div><!-- Load the login content from the HTTP request of app/login -->
     
    <divclass="panel"id="login"data-load="showCount"data-counter='5'> </div><!-- execute showCount when the panel is loaded -->
    <script> function showCount(div){alert($(div).data('counter'));} </script>
     
    <divclass="panel"id="loggin"data-unload="showCount"data-counter='3'> </div><!-- execute showCount when the panel is unloaded -->


    欢迎加入学习交流群:333492644

  • 相关阅读:
    centos7.4 系统安装指导
    win10下硬盘安装CentOS7
    CentOs7.X下配置FTP
    pyspider 安装使用过程的一些坑
    .Net Core 商城微服务项目系列(十三):搭建Log4net+ELK+Kafka日志框架
    .Net Core自动化部署系列(二):使用Jenkins打造镜像发布流水线
    Kubernetes 系列(六):Kubernetes部署Prometheus监控
    Kubernetes 系列(五):Prometheus监控框架简介
    .Net Core 商城微服务项目系列(十二):使用k8s部署商城服务
    Kubernetes 系列(四):使用Traefik访问.net core api
  • 原文地址:https://www.cnblogs.com/mcdnf/p/5158299.html
Copyright © 2011-2022 走看看