Demo description
This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. In theory, browsers that don't support the custom controls will still get a usable experience.
diff --git a/css/jquery.mobile.collapsible.css b/css/jquery.mobile.collapsible.css
index 49b6245e..ee134aa3 100644
--- a/css/jquery.mobile.collapsible.css
+++ b/css/jquery.mobile.collapsible.css
@@ -3,10 +3,13 @@
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
-.ui-collapsible-contain { margin: 0 0 -1px; border-left-width: 0; border-right-width: 0; overflow: hidden; }
+.ui-collapsible-contain { }
.ui-collapsible-heading { font-size: 16px; display: block; margin: 0; padding: 0; border-width: 0 0 1px 0; position: relative; }
-.ui-collapsible-heading a { padding: .7em 15px; text-align: left; margin: 0; text-decoration: none; outline: 0; border: 0; display: block; }
-.ui-collapsible-heading .ui-icon { position: absolute; right: 5px; top: 50%; margin-top: -9px; }
+.ui-collapsible-heading a { text-align: left; margin: 1em 0 0; }
+.ui-collapsible-heading a .ui-btn-inner { padding-left: 40px; }
+.ui-collapsible-heading a span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
+.ui-collapsible-heading a span.ui-btn .ui-btn-inner { padding: 0; }
+.ui-collapsible-heading a span.ui-btn .ui-icon { left: 2px; }
.ui-collapsible-heading-status { position:absolute; left:-99999px; }
-.ui-collapsible-content { overflow:hidden; display: block; }
+.ui-collapsible-content { overflow:hidden; display: block; padding: 15px 0; }
.ui-collapsible-content-collapsed { display: none; }
\ No newline at end of file
diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js
index 8fb76adb..0d902c59 100644
--- a/js/jquery.mobile.collapsible.js
+++ b/js/jquery.mobile.collapsible.js
@@ -8,17 +8,18 @@
$.fn.collapsible = function(options){
return $(this).each(function(){
var o = $.extend({
- containerTheme: 'ui-body-c',
expandCueText: ' click to expand contents',
collapseCueText: ' click to collapse contents',
collapsed: $(this).is('[data-state="collapsed"]'),
- heading: '>h1,>h2,>h3,>h4,>h5,>h6,>legend'
+ heading: '>h1,>h2,>h3,>h4,>h5,>h6,>legend',
+ theme: $(this).data('theme'),
+ iconTheme: $(this).data('icontheme') || 'c'
},options);
//define
- var collapsibleContain = $(this).addClass('ui-collapsible-contain '+o.containerTheme),
+ var collapsibleContain = $(this).addClass('ui-collapsible-contain'),
collapsibleHeading = $(this).find(o.heading).eq(0),
- collapsibleContent = collapsibleContain.wrapInner('
').find('.ui-collapsible-content');
+ collapsibleContent = collapsibleContain.wrapInner('
').find('.ui-collapsible-content');
//replace collapsibleHeading if it's a legend
if(collapsibleHeading.is('legend')){
@@ -30,11 +31,26 @@ $.fn.collapsible = function(options){
collapsibleHeading.insertBefore(collapsibleContent);
//modify markup & attributes
- collapsibleHeading.addClass('ui-collapsible-heading ui-bar-c') //NOTE - THIS SHOULD USE A BODY CLASS
+ collapsibleHeading.addClass('ui-collapsible-heading')
.append('
')
- .wrapInner('
');
-
- collapsibleHeading.find('a:eq(0)').prepend('
').addClass('ui-link');
+ .wrapInner('
')
+ .find('a:eq(0)')
+ .buttonMarkup({
+ shadow: true,
+ corners:true,
+ iconPos: 'left',
+ icon: 'plus',
+ theme: o.theme
+ })
+ .find('.ui-icon')
+ .removeAttr('class')
+ .buttonMarkup({
+ shadow: true,
+ corners:true,
+ iconPos: 'notext',
+ icon: 'plus',
+ theme: o.iconTheme
+ });
//events
collapsibleContain