Modify Collapsible of jQuery mobile

Recently, the company needs to use jQuery mobile to build a mobile application. In this case, a collapsed control is required. When you click the right of the control header, the content is expanded; the left side is not clickable, just some descriptive text or images. As shown in:

 

When I see this requirement, the first thing I feel is to use the Collapsible control in jQuery mobile. However, after research, I found that the control itself cannot be partially clicked to expand it. So I want to see if I can move the right part of the header to the top of the header, and change the Click Event of the header to bind it to the left side of the header to achieve the goal.
Now that you have a solution, let's get started.
1. First of all, it is easy to use CSS to control the position of the right part of the header. The Code is as follows:
<H3>
<Div class = "handler">
Search Options
</Div>
<Div style = "float: right; margin-top:-20px;">
<Div style = "float: right; margin: 0; padding: 0;">
ColumnN
</Div>
......
<Div style = "float: right; margin: 0 5px 0 0; padding: 0;">
Column3
</Div>
<Div style = "float: right; margin: 0 5px 0 0; padding: 0;">
Column2
</Div>
<Div style = "float: right; margin: 0 5px 0 0; padding: 0;">
Column1
</Div>
</Div>
</H3>
Note: columns in the middle part can be added multiple times as needed
 
2. Move the Click Event on h3 to handler.
1) Find the Click Event of the header in the jQuery mobile source code. The Code is as follows:
CollapsibleHeading
. Bind ("click", function (event ){

Var type = collapsibleHeading. is (". ui-collapsible-heading-collapsed ")?
"Expand": "collapse ";

Collapsible. trigger (type );

Event. preventDefault ();
});
 
2) according to the source code analysis, you only need to bind the click event to <div class = "handler">. After the modification, the Code is as follows:
Var expandHandler = collapsibleHeading. find (o. handler). length> 0? CollapsibleHeading. find (". handler,. ui-icon"): collapsibleHeading;
ExpandHandler. bind ("click", function (event ){

Var type = collapsibleHeading. is (". ui-collapsible-heading-collapsed ")?
"Expand": "collapse ";

Collapsible. trigger (type );

Event. preventDefault ();
});
 
So far, the modification to the Collapsible control has been completed. However, after using the header for a period of time, I found the following problem: the details of the header on the front end are exposed too much, which is too troublesome to use. Therefore, through simple encapsulation and adjustment, the front-end header is simplified:
<H3>
<Div class = "handler">
Search Options
</Div>
<Div> column1 </div> <div> column2 </div>
<Div> column3 </div> ...... <Div> columnN </div>
</H3>
The adjusted js source code is as follows:
1. Add a member to the options object:
$. Widget ("mobile. collapsible", $. mobile. widget ,{
Options :{
......
Handler: ". handler"
}
2. Code for controlling div styles
Var cols = collapsibleHeading. find ("div"). not (". handler"). remove ();
For (var I = cols. length-1; I> = 0; I --){
Var style = "float: right; margin: 0 5px 0 0; padding: 0 ;";
If (I = cols. length-1 ){
Style = "float: right; margin: 0; padding: 0 ;";
}
CollapsibleHeading. find (". ui-btn-text"). append ($ (cols. get (I). attr ("style", style ));
}
CollapsibleHeading. find ("div "). not (". handler "). wrapAll ("<div style = 'float: right; margin-top:-20px; '> </div> ");
3. Event code:
Var expandHandler = collapsibleHeading. find (o. handler). length> 0? CollapsibleHeading. find (". handler,. ui-icon"): collapsibleHeading;
ExpandHandler. bind ("click", function (event ){

Var type = collapsibleHeading. is (". ui-collapsible-heading-collapsed ")?
"Expand": "collapse ";

Collapsible. trigger (type );

Event. preventDefault ();
});
The problem is finally solved. For the final code, see the attachment.
JQuery mobile for Collapsiblehttp: // files.cnblogs.com/champoin/jquery.mobile-1.0.1.js
Do the right things!

From Xavier Zhang