![jQuery Syntax Voorbeelden
Basic syntax is: $(selector).action()
• Dollar Sign is de jQuery aanroep
• Selector: "query" HTML elementen
• action() die op het element uitgevoerd wordt
Voorbeelden:
• $("p.test").hide() - alle paragraphs met class="test“ verbergen
• $("#test").hide() - element met id="test" verbergen
• $("p").css("background-color","yellow"); - CSS selector
• $("[href!='#']") – alle elemente met href attribuut die != “#” zijn
• $("div#intro .head") – alle elem. met class = intro binnen het DIV elem. met id
= head
9](https://image.slidesharecdn.com/oghapexdag2012-120509020439-phpapp01/85/Oracle-Application-Express-jQuery-Mobile-OGh-Apex-Dag-2012-9-320.jpg)
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
- 1. Oracle Application Express & Christian Rokitta .nl OGh APEX Dag 26 Maart 2012 1
- 2. 2
- 3. Over mij 17 jaar 17 jaar 2 jaar 1 week
- 4. Agenda
- 5. Waarom • Waarom mobile website (vs native App)? – HTML APEX – Kosten voor mobile we applicatie lager dan platform specifieke Apps • Waarom jQuery Mobile? – jQuery Framework – Makkelijk in APEX in/toe te passen – Makkelijk – Makkelijker in 4.2
- 6. Te vroeg?
- 7. APEX Templates Definitie Referentie SQL; #Position# PL/SQL; <HTML/> #Substitution# Render {CSS} PAGE <HTML/> JavaScript(); JavaScript(); Actie
- 8. jQuery Quick Intro • JavaScript Library • Vereenvoudigd JavaScript programmeren • Makkelijk te leren • Principe: select actie • Build-in: event en effect methods, AJAX 8
- 9. jQuery Syntax Voorbeelden Basic syntax is: $(selector).action() • Dollar Sign is de jQuery aanroep • Selector: "query" HTML elementen • action() die op het element uitgevoerd wordt Voorbeelden: • $("p.test").hide() - alle paragraphs met class="test“ verbergen • $("#test").hide() - element met id="test" verbergen • $("p").css("background-color","yellow"); - CSS selector • $("[href!='#']") – alle elemente met href attribuut die != “#” zijn • $("div#intro .head") – alle elem. met class = intro binnen het DIV elem. met id = head 9
- 10. • Alles mbt webontwikkeling – HTML(5), CSS(3), jQuery, XML, AJAX, JSON, Webse rvices, ... • Tutorials • Examples • References • "Try it yourself" 10
- 11. “A unified user interface system that works seamlessly across all popular mobile device platforms, built on the jQuery and jQuery UI foundation. Focused on a lightweight codebase built on progressive enhancement with a flexible, easily themeable design.”
- 13. 13
- 14. Basic jQuery Mobile "page" structure <!DOCTYPE html> <html> <head> <title>Page Title</title> Header <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquer <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc </head> <body> Body <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> Footer </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
- 15. <!DOCTYPE html> <html lang="&BROWSER_LANGUAGE."> <head> <title>#TITLE#</title> In APEX: <meta name="viewport" content="width=device-width, initial-scale=1"> Page Template #HEAD# <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.m </head> <body #ONLOAD#> #FORM_OPEN# <div data-role="page"> <div data-role="header"> <h1>#TITLE#</h1> </div><!-- /header --> #GLOBAL_NOTIFICATION##SUCCESS_MESSAGE##NOTIFICATION_MESSAGE# #REGION_POSITION_01# ... #REGION_POSITION_07# #BOX_BODY# <div data-role="footer"> #REGION_POSITION_08# </div><!-- /footer --> </div><!-- /page --> #FORM_CLOSE# </body> </html>
- 17. jQM Customization <div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check" data-theme="b">Save</a> </div>
- 18. data- attribute Gespecialiseerde (gespecificeerd in) Templates vs opgeven als region/element attribute <a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a> 18
- 19. jQM Buttons • Styling links as buttons <a href="index.html" data-role="button">Link button</a> • Form Buttons automatically in jQM styled buttons: button of input elementen van type submit, reset, button, of image. Geen data-role="button" attribute nodig.
- 20. Links in jQuery Mobile • Default link behavior: Ajax – Automagically (normal link code: href=“...”, Hijax ) – handle page requests in a single-page model • Linking without Ajax – data-rel="external", data-ajax="false" of target attrib. • “Back” Button (data-rel="back") – Back in history (ignoring href) – data-direction="reverse" • end 20
- 21. jQM Lists Basic List <ul data-role="listview" data-theme="g"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul>
- 22. in APEX Named Column (row template) <ul data-role="listview"> <li> <strong>#RANK#. #NAME#</strong> <span class="ui-li-count">#POINTS#</span> </li> </ul> <li> <strong>#1#. #2#</strong> <span class="ui-li-count">#3#</span> </li>
- 24. HTML5 Input Item Types www.apex-plugin.com 24
- 25. 25
- 26. jQM Support in 4.2 (may or may not be a feature in ...) • HTML5 form input support (email, url, date, ...) als sub-type • Multiple UI Themes per applicatie • data- attributes “declaratief” • jQM List-View Support 26
- 27. jQM support in 4.1 apex_040100.wwv_flow_platform.set_preference ('MOBILE_DEVELOPMENT_ENABLED','Y'); (uitvoeren als SYS, Blogpost Marc Sewtz: http://marcsewtz.blogspot.com/2011/11/getting-started-with-mobile-in-apex.html) 27
- 29. Vragen 29
- 30. Contact Blog: http://rokitta.blogspot.com LinkedIn: http://nl.linkedin.com/in/rokit Website: http://www.rokit.nl themes4apex: http://www.themes4apex.nl Twitter: @crokitta Email: [email protected]