Scribd
Upload
166 views

How To Implement A JQuery Dialog With An Iframe in The Sensation App

This document provides instructions for implementing a jQuery dialog with an iframe in the Sensation app. It involves adding jQuery, jQuery UI, and a menu item for the dialog page. Then it describes creating a dialog.html page and DialogController to open the dialog, which contains an iframe, on button click. Styles are added to make the iframe responsive.

Uploaded by

Tiago Reis Porto Porto
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
166 views

How To Implement A JQuery Dialog With An Iframe in The Sensation App

This document provides instructions for implementing a jQuery dialog with an iframe in the Sensation app. It involves adding jQuery, jQuery UI, and a menu item for the dialog page. Then it describes creating a dialog.html page and DialogController to open the dialog, which contains an iframe, on button click. Styles are added to make the iframe responsive.

Uploaded by

Tiago Reis Porto Porto
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

How to implement a jQuery 

Dialog with an iframe in the 


Sensation App 
 

Envato MarketPlace 
http://codecanyon.net/item/sensation-phonegapcordova-full-hybrid-app/8004904  
 
Twitter 
Mobile Hybrid Apps 
@AppsHybrid 
https://twitter.com/AppsHybrid 
 

Tutorial 
Sensation App​ gives you the bootstrap you need in order to build your next ​PhoneGap/Cordova 
application based on Onsen UI ​http://onsenui.io/​. In addition, it gives you many examples on how 
to access the native mobile functionality using the Cordova library. 
 
Regarding the ​jQuery Dialog ​implementation, please follow the steps below. This is also a 
specific example on how to add an ​iframe​ into the​ jQuery Dialog​. 
 
1. Add jQuery and jQuery UI 
Please edit the ​index.html​ file at the ​www​ folder (​www/index.html​) and place the following 
entries (you have always the option to download them locally). 
 
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.m
in.js"></script>
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smo
othness/jquery-ui.css" />
 
 
 
2. Add a new Menu entry for your Dialog page 
Please edit the ​data.js​ file at the ​www/js​ folder (​www/js/data.js​) and add the following menu 
entry in the MenuData Factory. 
 
{
title: 'jQuery Dialog',
icon: 'square-o',
page: 'dialog.html'
},

 
3. Create the dialog.html 
Please create the dialog.html file into the ​www ​folder (​www/dialog.html​) with the following 
content: 
 
<ons-page class="center" ng-controller="DialogController">

<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="ons.slidingMenu.toggleMenu()">
<ons-icon icon="bars">
</ons-toolbar-button>
</div>
<div class="center">jQuery Dialog</div>
</ons-toolbar>

<section style="padding: 10px;">

<ons-button modifier="large" ng-click="show()"


style="margin:20px 0 0 0;">Open Dialog</ons-button>

</section>

</ons-page>
 
3. Create the Dialog Controller 
Please edit the ​app.js​ file at the ​www/js​ folder (​www/js/app.js​) and create the Dialog Controller. 
Finally your new Controller will be the following one: 
 
// jQuery Dialog: Dialog Controller
app.controller('DialogController', function($scope) {

var iframe = $('<iframe frameborder="0" marginwidth="0"


marginheight="0" allowfullscreen></iframe>');

var w = $(window).width();
var h = $(window).height();

var dialog = $('<div


class="iframe-container"></div>').append(iframe).appendTo('body').dia
log({
autoOpen: false,
modal: true,
resizable: false,
width: w,
height: h
});

$scope.show = function () {
var title = 'Dialog Title';
iframe.attr({
src: 'http://onsenui.io/'
});
dialog.dialog('option', 'title', title).dialog('open');
}

});

 
4. Place the following style rules to your style.css 
Please edit your ​style.css​ at the w
​ ww/css​ folder (​www/css/style.css​) and add the following style 
rules at the bottom of this file: 
 
/* jQuery Dialog */
.iframe-container {
-webkit-overflow-scrolling:touch !important;
}
iframe {
width: 100%;
height:100%;
} 
 
 
6. Check the result 
 

 
 
 
 
Hope this was helpful for you :-) For any extra question, please use the contact form under my 
profile ​http://codecanyon.net/user/gtsopour?WT.ac=item_profile_text&WT.z_author=gtsopour 
 
Thanks 
George 
 
 

You might also like