API tools faq
paste
Advertisement
Guest User

appframework demo

a guest
Aug 27th, 2014
11
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.88 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--HTML5 doctype-->
  3. <html>
  4.  
  5.     <head>
  6.         <script>
  7.         (function() {
  8.     if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
  9.        var msViewportStyle = document.createElement("style");
  10.         msViewportStyle.appendChild(
  11.             document.createTextNode("@-ms-viewport{width:auto!important}")
  12.         );
  13.         document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
  14.     }
  15. })();
  16. </script>
  17.  
  18.         <title>App Framework Kitchen Sink</title>
  19.         <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  20.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  21.         <meta name="apple-mobile-web-app-capable" content="yes" />
  22.         <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  23.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  24.         <link rel="stylesheet" type="text/css" href="css/icons.css" />    
  25.  
  26.        <!--  
  27.     <link rel="stylesheet" type="text/css" href="css/af.ui.css" title="default" />
  28.  -->
  29.       <link rel="stylesheet" type="text/css" href="css/main.css"  />
  30.       <link rel="stylesheet" type="text/css" href="css/appframework.css"  />
  31.       <link rel="stylesheet" type="text/css" href="css/lists.css"  />
  32.       <link rel="stylesheet" type="text/css" href="css/forms.css"  />
  33.       <link rel="stylesheet" type="text/css" href="css/buttons.css"  />        
  34.       <link rel="stylesheet" type="text/css" href="css/badges.css"  />        
  35.       <link rel="stylesheet" type="text/css" href="css/grid.css"  />
  36.  
  37.       <link rel="stylesheet" type="text/css" href="css/android.css"  />
  38.       <link rel="stylesheet" type="text/css" href="css/win8.css"  />
  39.       <link rel="stylesheet" type="text/css" href="css/bb.css"  />
  40.       <link rel="stylesheet" type="text/css" href="css/ios.css"  />
  41.       <link rel="stylesheet" type="text/css" href="css/ios7.css"  />
  42.       <link rel="stylesheet" type="text/css" href="css/tizen.css"  />
  43.       <link rel="stylesheet" type="text/css" href="css/firefox.css"  />
  44.        
  45.       <link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css"  />
  46.       <link rel="stylesheet" type="text/css" href="plugins/css/af.popup.css"  />
  47.       <link rel="stylesheet" type="text/css" href="plugins/css/af.scroller.css"  />
  48.       <link rel="stylesheet" type="text/css" href="plugins/css/af.selectBox.css"  />        
  49.        
  50.         <!-- uncomment for intel.xdk apps
  51.        <script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
  52.        <script type="text/javascript" charset="utf-8" src="xhr.js"></script>
  53.        -->
  54.         <script type="text/javascript" charset="utf-8" src="./appframework.js"></script>
  55.         <!-- include af.desktopBrowsers.js on desktop browsers only -->
  56.         <script>
  57.  
  58.             function loadedPanel(what) {
  59.                 //We are going to set the badge as the number of li elements inside the target
  60.                 $.ui.updateBadge("#aflink", $("#af").find("li").length);
  61.             }
  62.  
  63.  
  64.             function unloadedPanel(what) {
  65.                 console.log("unloaded " + what.id);
  66.             }
  67.  
  68.             if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
  69.                var script = document.createElement("script");
  70.                 script.src = "plugins/af.desktopBrowsers.js";
  71.                 var tag = $("head").append(script);
  72.                 //$.os.desktop=true;
  73.             }
  74.  
  75.           //  $.feat.nativeTouchScroll=true;
  76.          
  77.         </script>        
  78.         <script type="text/javascript" charset="utf-8" src="./plugins/af.actionsheet.js"></script>
  79.         <script type="text/javascript" charset="utf-8" src="./plugins/af.css3animate.js"></script>
  80.         <script type="text/javascript" charset="utf-8" src="./plugins/af.passwordBox.js"></script>          
  81.         <script type="text/javascript" charset="utf-8" src="./plugins/af.scroller.js"></script>
  82.         <script type="text/javascript" charset="utf-8" src="./plugins/af.selectBox.js"></script>
  83.         <script type="text/javascript" charset="utf-8" src="./plugins/af.touchEvents.js"></script>
  84.         <script type="text/javascript" charset="utf-8" src="./plugins/af.touchLayer.js"></script>
  85.         <script type="text/javascript" charset="utf-8" src="./plugins/af.popup.js"></script>
  86.  
  87.         <script type="text/javascript" charset="utf-8" src="./ui/appframework.ui.js"></script>
  88.         <!-- <script type="text/javascript" charset="utf-8" src="./ui/transitions/all.js"></script> -->
  89.         <script type="text/javascript" charset="utf-8" src="./ui/transitions/fade.js"></script>
  90.         <script type="text/javascript" charset="utf-8" src="./ui/transitions/flip.js"></script>
  91.         <script type="text/javascript" charset="utf-8" src="./ui/transitions/pop.js"></script>
  92.         <script type="text/javascript" charset="utf-8" src="./ui/transitions/slide.js"></script>
  93.         <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideDown.js"></script>
  94.         <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideUp.js"></script>
  95.         <script type="text/javascript" charset="utf-8" src="./plugins/af.slidemenu.js"></script>
  96.         <script type="text/javascript" charset="utf-8" src="./plugins/af.8tiles.js"></script>
  97.        
  98.  
  99.         <script type="text/javascript">
  100.             /* This function runs once the page is loaded, but intel.xdk is not yet active */
  101.             //$.ui.animateHeaders=false;
  102.              var search=document.location.search.toLowerCase().replace("?","");
  103.              //if(!search)
  104.             $.ui.useOSThemes=true;
  105.             $.ui.overlayStatusbar=true; // for ios7 only to add header padding to overlay the statusbar
  106.            // $.ui.resetScrollers=true;
  107.             if(search.length>0) //Android fix has too many buggy issues on iOS - can't preview with $.os.android
  108.             {
  109.  
  110.                $.ui.useOSThemes=true;
  111.                 if(search=="win8")
  112.                     $.os.ie=true;
  113.                 else if(search=="firefox")
  114.                     $.os.fennec="true"
  115.                 $.ui.ready(function(){
  116.                     $("#afui").get(0).className=search;
  117.                 });
  118.             }
  119.            
  120.             var webRoot = "./";
  121.             // $.os.android=true;
  122.             $.ui.autoLaunch = false;
  123.             $.ui.openLinksNewTab = false;
  124.             $.ui.splitview=false;
  125.            
  126.  
  127.             $(document).ready(function(){
  128.                 $.ui.launch();
  129.             });
  130.            
  131.             /* This code is used to run as soon as intel.xdk activates */
  132.             var onDeviceReady = function () {
  133.                 $.ui.launch();
  134.                 intel.xdk.device.setRotateOrientation("portrait");
  135.                 intel.xdk.device.setAutoRotate(false);
  136.                 webRoot = intel.xdk.webRoot + "";
  137.                 //hide splash screen
  138.                 intel.xdk.device.hideSplashScreen();
  139.                 $.ui.blockPageScroll(); //block the page from scrolling at the header/footer
  140.             };
  141.             document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
  142.            
  143.         </script>
  144.  
  145. </head>
  146.  
  147.     <body>
  148.         <div id="afui">
  149.             <!-- this is the splashscreen you see. -->
  150.             <div id="splashscreen" class='ui-loader heavy'>
  151.                 App Framework
  152.                 <br>
  153.                 <br>    <span class='ui-icon ui-icon-loading spin'></span>
  154.                 <h1>Starting app</h1>
  155.  
  156.             </div>
  157.             <div id="header">
  158.                 <a id='menubadge' onclick='af.ui.toggleSideMenu()' class='menuButton'></a>                
  159.             </div>
  160.             <div id="content">
  161.                 <div id="afforms" title="Form Styles" class="panel" data-footer='none' selected="true" >
  162.                 <div class="formGroupHead">Standard</div>
  163.                 <form>
  164.                     <input type="range" >
  165.                     <input type="text" placeholder="test">
  166.                     <input type="search" placeholder="search">
  167.                     <textarea rows="6" placeholder="Enter your address"></textarea>
  168.                 </form>
  169.  
  170.                 <div class="formGroupHead">Grouping</div>
  171.                 <form>
  172.                     <div class="input-group">
  173.                         <input type="text" placeholder="test">
  174.                         <input type="search" placeholder="search">
  175.                         <textarea rows="6" placeholder="Enter your address"></textarea>
  176.                     </div>
  177.                 </form>
  178.                 <a href="#transition7" class="button block">Modal Form</a>
  179.                 <form>
  180.                     <div class="input-group">
  181.                         <input type="text" placeholder="test">
  182.                         <input type="search" placeholder="search">
  183.                         <textarea rows="6" placeholder="Enter your address"></textarea>
  184.                     </div>
  185.                 </form>
  186.                 <form>
  187.                     <div class="input-group">
  188.                         <input type="text" placeholder="focus 1">
  189.                         <input type="search" placeholder="focus 2">
  190.                         <textarea rows="6" placeholder="focus 3"></textarea>
  191.                     </div>
  192.                 </form>
  193.                
  194.                 </div>
  195.                 <div title="Modal" id="transition7" class="panel" data-modal="true" data-unload="unloadedPanel">
  196.                      <form>
  197.                           <div class="input-group" >
  198.                               <div style="height:400px"></div>
  199.                               <textarea rows="6" placeholder="Enter some words here"></textarea>
  200.                           </div>
  201.                       </form>
  202.                  </div>
  203.         </div>
  204.     </body>
  205. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!