Browse files

Demos: Popup widget: Add arrow demo.

  • Loading branch information...
gabrielschulhof committed Jul 30, 2013
1 parent 2e33999 commit e77c720ba61604bf66eabc81588e7a93d5bf1a48
Showing with 25 additions and 76 deletions.
  1. +0 −76 demos/examples/popups/arrow.php
  2. +25 −0 demos/widgets/popup/index.php
@@ -1,76 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup with arrow - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" href=",400,700">
<script src="../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
$( document ).on( "click", function( e ) {
var el = $( );
if ( el.attr( "id" ) === "clickable-area" || el.parents( "#clickable-area" ).length > 0 ) {
$( ".click-tracker" ).css( { left: e.pageX, top: e.pageY } );
$( "#arrow-popup" ).popup( "open", { x: e.pageX, y: e.pageY } );
.really-tall {
height: 5000px;
.click-tracker {
position: absolute;
width: 1px;
height: 1px;
background: yellow;
left: -9999px;
top: -9999px;
border: 1px solid black;
margin-left: -1px;
margin-top: -1px;
pointer-events: none;
<div data-role="page" id="demo-intro" class="jqm-demos">
<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
<?php include( '../../search.php' ); ?>
</div><!-- /header -->
<div data-role="content" class="jqm-content" id="arrow-popup-demo-content">
<div class="click-tracker"></div>
<h1>Popup with arrow</h1>
<div data-demo-html="true" data-demo-js="true">
<h3>Click anywhere in the square below to show the arrowed popup.</h3>
<p>A dot will appear to show you where you have clicked.</p>
<div data-role="popup" data-arrow="true" id="arrow-popup">
<p>This is a popup containing several paragraphs of text.</p>
<p>The first paragraph is the one above. This is the second.</p>
<p>And here's another paragraph to help the popup achieve a decent height.</p>
<a id="clickable-area" href="#"><div class="ui-body-c really-tall"></div></a>
</div><!-- /content -->
<div data-role="footer" class="jqm-footer">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /jqm-footer -->
<?php include( '../../global-nav.php' ); ?>
</div><!-- /page -->
@@ -12,6 +12,20 @@
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
<style id="popup-arrow-css">
.clickable-area {
display: block;
width: 100%;
height: 300px;
background-color: #ffefef;
<script id="popup-arrow-script">
$.mobile.document.on( "click", "#open-popupArrow", function( evt ) {
$( "#popupArrow" ).popup( "open", { x: evt.pageX, y: evt.pageY } );
<div data-role="page" class="jqm-demos" data-quicklinks="true">
@@ -274,6 +288,17 @@
</div><!--/demo-html -->
<p>The popup can display an arrow along one of its edges when it opens if the <code>data-arrow</code> attribute is set. The attribute can take a value of <code>true</code>, <code>false</code>, or a string containing a comma-separated list of edge abbreviations ("l" for left, "t" for top, "r" for right, and "b" for bottom). For example, if you set <code>data-arrow="r,b"</code> then the arrow will only ever appear along the bottom or right edge of the popup. <code>true</code> is the same as <code>"l,t,r,b"</code> and <code>false</code> or <code>""</code> indicates that the popup should be displayed without an arrow.</p>
<p>Click in the pink area below to display a popup with an arrow.</p>
<div data-demo-html="true" data-demo-css="#popup-arrow-css" data-demo-js="#popup-arrow-script">
<div data-role="popup" id="popupArrow" data-arrow="true">
<p>A paragraph inside the popup with an arrow.</p>
<p>This second paragraph serves to increase the height of the popup</p>
<a href="#" id="open-popupArrow" class="clickable-area"></a>
<h2>Pre-rendered markup</h2>
<p>You can supply pre-rendered popup markup to save startup time. The page in the example below contains a popup with pre-rendered markup supplied as part of the original page markup.</p>
<div data-demo-html="#pre-rendered-page">

0 comments on commit e77c720

Please sign in to comment.