I am trying to create rounded style checkbox using Jquery mobile. In the below link, under multiple selects, choose option select menu i saw this type of checkbox. Is it possible to create that type of checkbox in listview of JQM?
http://jquerymobile.com/test/docs/forms/selects/custom.html#&ui-state=dialog
Thanks...
<ul data-role="listview" id="options">
<li data-icon="checkbox-off"><a>test</a></li>
<li data-icon="checkbox-on"><a>test</a></li>
</ul>
This code snippet makes round edges for listview, you can have any element inside it:
<ol data-role="listview">
<li class="ui-corner-bottom ui-corner-top" data-theme="a" >List Item 1</li>
<li class="ui-corner-bottom ui-corner-top" data-theme="a">List Item 2</li>
<li class="ui-corner-bottom ui-corner-top" data-theme="a">List Item 3</li>
</ol>
See the Demo here
http://jsfiddle.net/qXr79/5/
Related
AngularJS supports a ng-repeat-start and ng-repeat-end directive to have the ng-repeat repeat with several elements that are siblings. Is there a similar feature in Angular Dart or a different method to accomplish this?
I am trying to loop through a menu object and display it in a Bootstrap dropdown menu. Every time I repeat the dropdown-header element I would like the divider to appear before it (except the first time, which I will deal with later).
<div class="btn-group open">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Category 1</li>
<li>Item 1</li>
<li>Item 2</li>
<li class="divider"></li>
<li class="dropdown-header">Category 2</li>
<li>Item 3</li>
<li>Item 4<a></a></li><a>
</a></ul><a>
</a></div>
Demo
Here's what I have but I'm not sure what to do with the divider:
<ul class="dropdown-menu" ng-if="menuItem.hasSubPages">
<li class="divider"></li><!-- not sure what to do with this -->
<li ng-class="{'dropdown-header': subMenuItem.isCategory}" ng-repeat="subMenuItem in menuItem.subMenuItems" ng-switch="subMenuItem.isCategory">
{{subMenuItem.name}}
<span ng-switch-when="true">{{subMenuItem.name}}</span>
</li>
</ul>
Thanks!
Actually AngularDart doesn't support the ng-repeat-start and ng-repeat-end directives.
As you can see in the AngularDart API, no reference is available for this kind of directive.
BUT you can accomplish what you want by encapsulating the elements into a new Component as explained here : Creating a Custom Component
I try to make "list-divider" item (Mail), it can clickable like other item (Inbox, Outbox)
But when i put a tag inside, it's a link like below
How to make "list-divider" item (Mail) to clickable item like (Inbox, Outbox) item thank
Here is my code
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
</ul>
Can try the simplest option
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider" id="lild">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
</ul>
$('#lild').click(function () {
alert('click on Mail');
});
DEMO
Try below code .Hope it will work for you.
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
</ul>
Can anyone please help me?
I'm trying to create a menu inside an external jquery mobile panel. This is JQM 1.4.0 that supports external panels.
I have a collapsible listview inside the external panel. There is some kind of inset applied that I don't seem to be able to get rid off for submenu3 and inside it as well.
Please check out my fiddle: http://jsfiddle.net/UHYz9/2/
Here's the html:
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="header">
<h1>External panels</h1>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth">
Open External Panel
</div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h3>Menu</h3>
<ul data-role="listview" style="padding-right: 8px">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li data-role="collapsible" data-iconpos="right" data-inset="false">
<h2>Submenu 3</h2>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Submenu 4</li>
<li>Submenu 5</li>
</ul>
</div>
Here's the js:
$(function() {
$("body>[data-role='panel']").panel();
$("#externalpanel ul").listview();
$("#externalpanel").trigger("create");
});
For this to work, please include the following css and js links:
http://demos.jquerymobile.com/1.4.0/css/themes/default/jquery.mobile-1.4.0.min.css
http://demos.jquerymobile.com/1.4.0/js/jquery.js
http://demos.jquerymobile.com/1.4.0/js/jquery.mobile-1.4.0.min.js
Thanks a lot!
You need to wrap contents on panel in <div data-role="content"> or `.
To enhance content of panel or any other div, use .enhanceWithin().
$(function () {
$("body>[data-role='panel']").panel().enhanceWithin();
});
Demo
I have problem of dynamically URL in a popup. Here my code:
<!-- content -->
<ul data-role="listview">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul><!-- /content -->
<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
<ul data-role="listview" style="min-width:210px;">
<li data-role="divider">Choose an action</li>
<li>View details</li>
<li>Share</li>
</ul>
</div><!-- /popup-menu -->
Basically, when I click link on my popup, I'll go to the page where the callee's url is.
So, if I click List 1a the popup shows, then I click View details the page direct me to URL person.php?id=1
How can I do that?
I could just create popup divs multiple times according to the number of the list, but I think it's a waste of DOM object (my last resort if I don't find any elegant solution)
Thanks
Since you actually need to pass only an id of a person to your popup you can achieve your goal this way:
First of all simplify your listview markup and store an id in data-id attribute of an anchor of a listview item
<ul data-role="listview" id="list">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul>
and add an id tag to 'View Details` anchor in your popup for easier access later on
<li><a id="details" href="#">View details</a></li>
Second on click() event store current id to a globally available variable (let's call it currentId) and programmatically open the popup.
var currentId = 0;
...
$('#page').on('pageinit', function(){
$('#list li a').click(function(e){
e.preventDefault();
currentId = $(this).attr("data-id");
$("#popup-menu").popup("open", {transition:"slideup"} );
});
});
Third in popupbeforeposition event construct your url and assign it to appropriate anchor.
var baseURL = "person.php?id=";
...
$('#popup-menu').on('popupbeforeposition', function(){
$("#details").attr("href", baseURL + currentId);
});
And finally here is working jsFiddle for you.
I have:
<div class="ui-widget">
<div class="ui-widget-header">
My Menu<span class="ui-icon ui-icon-circle-triangle-n"></span>
</div>
<ul class="ui-widget-content">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
Right now, the ui-icon is appearing below "My Menu"
Q: How can I get "My Menu" to appear on the same line as the UI widget?
add the style "display: inline-block;" to ui-icon,
or wrap My Menu in a span and use floats