How can I add data-role="collapsible" in every div container with class "make_me_collapsible"?
<div class="make_me_collapsible"><h2>Header</h2><p>Content....</p></div>
You can add it with the attr() method.
Like so: $(".make_me_collapsible").attr("data-role","collapsible");
Related
I want to animate a collapsible set in jquery mobile 1.4.2. Unfortunately I haven't found anything. All animated scripts use version 1.3.2 oder 1.4.0.
I'm still a newbie and don't know if I just can switch down to 1.4.0 or 1.3.2 keeping my design?
What can I do?
Here is a way to do it:
Instead of a collapsibleset, use a wrapper div with the class="ui-collapsible-set", this gives you the collapsible set styling, but then allows you to implement the logic:
<div class="ui-collapsible-set">
<div data-role="collapsible" class="animateMe">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible" class="animateMe">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible" class="animateMe">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
I have added a class of animateMe to each collapsible for convenience in adding a handler:
$(".animateMe .ui-collapsible-heading-toggle").on("click", function (e) {
var current = $(this).closest(".ui-collapsible");
if (current.hasClass("ui-collapsible-collapsed")) {
//collapse all others and then expand this one
$(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();
$(".ui-collapsible-content", current).slideDown(300);
} else {
$(".ui-collapsible-content", current).slideUp(300);
}
});
This code is a click handler on each collapsible header. It checks to see if the clicked collapsible is currently expanded or collapsed. If it is expanded, we simply collapse it with the slideUp animation. If it is collapsed, we first collapse any expanded items and then expand this one with the slideDown animation.
If you want to allow multiple items to be expanded at the same time, just remove this line:
$(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();
Here is a working DEMO
I have a listview with the count indicator, and I would like that the long text would enshort before the count.
It works fine without the "ui-li-count" property, the text get "cut" correctly with the "..." at the end, but with the count, it gets not cutted before.
Page JQM 1.4.2:
<div data-role="page" id="addresses" data-theme="b">
<div data-role="header" data-position="fixed"><h1>izigo.mobile</h1></div>
<div class="ui-content" role="main">
<li>Client name and very long description #1<span class="ui-li-count">3 km</span></li>
<li>Client name and very long description #2<span class="ui-li-count">3 km</span></li>
</div>
</div>
Any idea how to cut the text bedfore the count?
Thanks.
Looks like you can just increase the padding on the text container. Try something like this:
.ui-listview >.ui-li-has-count>.ui-btn-icon-right {
padding-right: 5.5em;
}
Here is a DEMO
The documentation says
The footer bar has the same basic structure as the header except it uses the data-role attribute value of footer.
But this fiddle shows that I can't put controls in the footer the same way as I can the header.
Q: How can I write a footer such that there is text followed by an h1 tag followed by text, and they are all on the same line?
You can use the same classes jQM applies to the header elements (ui-btn-left, ui-title, ui-btn-right):
<div data-role="footer">
<a href="JavaScript:;" class="ui-btn-left" >c</a>
<h3 class="ui-title">Footer</h3>
<a href="JavaScript:;" class="ui-btn-right" >d</a>
</div>
Here is your updated fiddle: http://jsfiddle.net/ezanker/mXjHJ/86/
can you please tell me how to how header label left side with button on right side .
i found like this
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
But i need like this
My case label on left side and button on right side
You can do like that, DEMO http://jsfiddle.net/yeyene/5kfnT/3/
JQM DOC: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/headers/
Custom header configurations
If you need to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in any container, such as div. The plugin won't apply the automatic button logic to the wrapped content inside the header container so you can write custom styles for laying out the content in your header.
It's also possible to create custom bars without using the header data-role at all. For example, start with any container and add the ui-bar class to apply standard bar padding and add the ui-bar-b class to assign the bar swatch styles from your theme. (The "b" can be any swatch letter.)
<div data-role="header" data-position="fixed">
<div class="ui-block-a"><h3>Header</h3></div>
<div class="ui-block-b"> </div>
<div class="ui-block-c"> </div>
<div class="ui-block-d">
A
B
C
</div>
</div>
You can do it this way, override ui-title and ui-btn-right styles. However, for the second button, give it a custom class in order not to override both button with ui-btn-right. I used custom class .second for the second button.
Demo
CSS - I used .ui-header in order not to change footer style.
.ui-header .ui-title {
margin-left: 2px !important;
text-align: left !important;
width: 150px !important;
}
.second.ui-btn-right {
right: 80px !important
}
HTML
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
</div>
I'm suing jquery ui draggable on a list of items that can be dropped on a .droppable list of other items. Here's a jsFiddle to show what I'm trying to do:
<div id="container">
<div id="left-pane" class="pane">
<div class="item">Item A</div>
<div class="item">Item B</div>
<div class="item">Item C</div>
<div class="item">Item D</div>
</div>
<div id="right-pane" class="pane">
<div class="item">Item E</div>
<div class="item">Item F</div>
<div class="item">Item G</div>
<div class="item">Item H</div>
</div>
$('.item').draggable({
helper: 'clone',
appendTo: '#contentpane',
cursor: 'move'
});
$('.item').droppable();
The panes have a fixed height, and overflow-y: auto so that we can scroll inside to see hidden elements.
When dragging an element from a list to the other, the lists do not scroll since I use appendTo and the dragged item is not in the list. Is there a way to make the list 'scrollable' when I drag an item over? otherwise it is not possible to drop the item at the bottom of the list, let's say drop 'Item A' on 'Item H' on the fiddle example
Be able to use the scroll features from different container is really not easy to do.
I opended a topic on this subject. You will find an edit of the question with a functionnal workaround.
Check this related question : JqueryUI, drag elements into cells of a scrolling dropable div containing large table
About your last remark, you could place your item at the boom of the list using the sortable property. http://jqueryui.com/sortable/
Well the only way I found to do it is to detect the position of the dragged element and scroll the droppable container, with a smooth effect so that it will scroll like doing it from the mouse wheel.