Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

rafactored the buttons in collapsibles. uses an inner button for styling the icons.

Browse source
This commit is contained in:
scottjehl 2010-10-12 16:36:32 -04:00
parent 759adbf675
commit fd6d7b52f2
3 changed files with 32 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_form-controls.html
View file

@ -20,7 +20,7 @@
<form action="#" method="get">
<div data-role="collapsible" data-state="collapsed">
<div data-role="collapsible" data-state="collapsed" data-theme="b" data-icontheme="a">
<h1>Demo description</h1>
<p>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.</p>

11
css/jquery.mobile.collapsible.css
View file

@ -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; }

32
js/jquery.mobile.collapsible.js
View file

@ -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('<div class="ui-collapsible-content ui-body"></div>').find('.ui-collapsible-content');
collapsibleContent = collapsibleContain.wrapInner('<div class="ui-collapsible-content"></div>').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('<span class="ui-collapsible-heading-status"></span>')
.wrapInner('<a href="#" class="ui-collapsible-heading-toggle"></a>');
collapsibleHeading.find('a:eq(0)').prepend('<span class="ui-icon ui-icon-shadow"></span>').addClass('ui-link');
.wrapInner('<a href="#" class="ui-collapsible-heading-toggle"></a>')
.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