Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Demos: added faq section

  • Loading branch information...
commit a0ede519e7c9d8b547a8c6207b512854c4a88cfe 1 parent 0e140f9
@arschmitz authored
View
10 docs/_assets/css/jqm-docs.css
@@ -270,7 +270,15 @@ dd h4 { margin:15px 0 0 0; }
text-decoration: none;
}
-
+/* FAQ styles */
+.ui-bar-b.faq-question.ui-field-contain.ui-body.ui-br {
+ width: 100%;
+ padding: 10px;
+ padding-right: 20px;
+ margin-top: -15px;
+ margin-left: -15px;
+ font-size: 1.5em;
+}
/* docs site layout */
@media all and (min-width: 650px){
View
18 docs/demos/_assets/css/jqm-demos.css
@@ -109,6 +109,24 @@ div.jqm-demo-link {
margin: 0;
}
+/* FAQ styles */
+div.faq-question{
+ width: 100%;
+ padding: 10px;
+ padding-right: 20px;
+ margin-top: -15px;
+ margin-left: -15px;
+ font-size: 1.5em;
+}
+div.faq-answer{
+ width: 100%;
+ padding: 10px;
+ padding-right: 20px;
+ margin-left: -15px;
+ margin-bottom:15px;
+ font-size: 1.5em;
+}
+
/* Swatch F - bar & buttons */
.ui-bar-f {
border: 1px solid #56A00E;
View
53 docs/demos/faq/changing-css-on-form-element-does-not-work.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Frequently Asked Questions - jQuery Mobile Demos</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../../js/jquery.js"></script>
+ <script src="../_assets/js/jqm-demos.js"></script>
+ <script src="../../../js/"></script>
+</head>
+<body>
+<div data-role="page">
+
+ <div data-role="header" data-theme="f">
+ <h1>FAQ</h1>
+ <a href="../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <div class="content-primary">
+ <div class="ui-bar-g faq-question">
+ Q. I'm trying to change the styling on my enhanced form element but css has no effect?
+ </div>
+ <div class="ui-bar-b faq-answer">Answer: </div>
+ This is probably because the element you are seeing is not the actual element you added.
+ <pre><code>
+//Button before enhancement
+&#60;button&#62;Button element&#60;/button&#62;
+//after enhancment
+&#60;div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false"&#62;
+ &#60;span class="ui-btn-inner ui-btn-corner-all"&#62;
+ &#60;span class="ui-btn-text">Button element&#60;/span&#62;
+ &#60;/span&#62;
+ &#60;button class="ui-btn-hidden" aria-disabled="false">Button element&#60;/button&#62;
+&#60;/div&#62;
+ </code></pre>
+
+ As you can see from the code snippet above the markup has significantly changed after enhancment. The original button you added has ben wrapped in a div and had several spans added. The original button you added is now also hidden. To change the visual styling of the button you must target the new hanced markup not the button you added.
+ </div><!--/content-primary -->
+
+ </div><!-- /content -->
+
+ <div class="jqm-footer">
+ <p class="jqm-version"></p>
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+ </div><!-- /jqm-footer -->
+
+</div><!-- /page -->
+</body>
+</html>
View
75 docs/demos/faq/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Frequently Asked Questions - jQuery Mobile Demos</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../../js/jquery.js"></script>
+ <script src="../_assets/js/jqm-demos.js"></script>
+ <script src="../../../js/"></script>
+</head>
+<body>
+<div data-role="page">
+
+ <div data-role="header" data-theme="f">
+ <h1>FAQ</h1>
+ <a href="../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <div class="content-primary">
+ <ul data-role="listview" data-filter="true">
+ <li data-role="list-divider">Forms</li>
+ <li><a href="changing-css-on-form-element-does-not-work.html">I'm trying to change the styling on my enhanced form element but css has no effect?</a></li>
+ <li><a href="updateing-the-value-of-enhanced-form-elements-does-not-work.html">Updateing the value of enhanced form elements does not work.</a></li>
+ <li><a href="my-html-5-inputs-look-different-in-browsers.html">My HTML 5 inputs (date / color / number ) look different in differnet browsers.</a></li>
+ <li><a href="my-range-search-input-type-is-being-changed.html">My range / search input type is being change to number / text.</a></li>
+ <li><a href="sometimes-custom-select-shows-as-dialog-popup.html">Sometimes my custom select shows as a popup other times its a dialog.</a></li>
+ <li><a href="disabling-a-button-does-not-work.html">Disabling a button does not work.</a></li>
+ <li><a href="controls-in-header-footer.html">Contols in my fixed header or footer are not responding or behave erraticly.</a></li>
+
+ <li data-role="list-divider">Pages</li>
+ <li><a href="why-is-only-the-first-page-loaded.html">Why is only the first page of my multi page document loaded?</a></li>
+ <li><a href="pass-query-params-to-page.html">I'm trying to pass query params to a page but it's not working?</a></li>
+ <li><a href="pass-via-the-hash-to-page.html">I'm trying to pass information via the hash but it's not working?</a></li>
+ <li><a href="the-application-cache-is-not-working.html">I'm trying to the application cache but it's not working?</a></li>
+ <li><a href="injected-content-is-not-enhanced.html">Content injected into a page is not enhanced.</a></li>
+ <li><a href="triggering-create-on-injected-content-does-not-work.html">Triggering create on injected HTML does not work.</a></li>
+ <li><a href="how-can-i-stop-auto-enhancement-of-elements.html">How can i stop JQM from enhancing and element.</a></li>
+ <li><a href="how-can-i-stop-auto-enhancement-of-elements.html">How can i stop JQM from enhancing a block of elements.</a></li>
+
+ <li data-role="list-divider">Navigation</li>
+ <li><a href="nav-is-acting-erraticly.html">The nav is acting erraticly!</a></li>
+ <li><a href="deep-links-dont-work.html">Following a deep link ( a link to scroll to and id ) does not work.</a></li>
+ <li><a href="scripts-css-only-works-on-first-page-or-refresh.html">My script / css only works on first page or on refresh.</a></li>
+
+ <li data-role="list-divider">Widgets</li>
+ <li><a href="cloned-content-double-enhanced.html">Cloning a widget or enhanced for element and enhancing causes "double" enhancment</a></li>
+ <li><a href="cloned-content-does-not-update.html">Cloned widget or enhanced element does not update</a></li>
+ <li><a href="data-enhance-false-does-not-work.html">Setting data-enhance="false" does not work.</a></li>
+
+ <li data-role="list-divider">General</li>
+ <li><a href="selecting-element-by-id-not-working.html">Selecting elements by id only works sometimes or on first page!</a></li>
+ <li><a href="global-config-settings-ignored.html">The global configuration settings i set are being ignored.</a></li>
+ <li><a href="custom-css-is-ignored.html">My custom css is ignored.</a></li>
+ <li data-role="list-divider">Events</li>
+ <li><a href="swipe-triggered-when-scrolling.html">Swipe triggered when scrolling.</a></li>
+ <li><a href="document-ready-not-working.html">Document ready ignored after first page.</a></li>
+
+ </ul>
+
+ </div><!--/content-primary -->
+
+ </div><!-- /content -->
+
+ <div class="jqm-footer">
+ <p class="jqm-version"></p>
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+ </div><!-- /jqm-footer -->
+
+</div><!-- /page -->
+</body>
+</html>
View
1  docs/demos/index.html
@@ -24,6 +24,7 @@ <h1 id="jqm-logo"><img src="_assets/img/jquery-logo.png" alt="jQuery Mobile Fram
<div class="content-primary">
<ul data-role="listview" data-inset="true">
+ <li data-theme="e"><a href="faq/" data-ajax="false">FAQ</a></li>
<li data-role="list-divider">Forms</li>
<li><a href="forms/index.html" data-ajax="false">Form reference</a></li>
<li><a href="forms/form.html" data-ajax="false">Form</a></li>
Please sign in to comment.
Something went wrong with that request. Please try again.