I want to show my data like this https://dl.dropboxusercontent.com/u/12173475/sample.png ,
a bit like controlgroup, but controlgroup not seem to merge two labels,
how can I do?
This is my code (temporarily), but I hope there is a line between those(like controlgroup).
<ul data-role="listview" data-inset="true">
<li>
<div>name</div>
<div class="ui-li-aside">name1</div>
</li>
</ul>
You can do it by modifying CSS.
HTML
<ul class='my_list' data-role="listview" data-inset="true">
<li>
<div>name</div>
<div class="ui-li-aside">name1</div>
</li>
</ul>
CSS
.my_list li{
padding:0px !important;
}
.my_list li div{
padding:10px;
}
.my_list li div:nth-child(2){
width:10%;
border-right:1px solid #ccc;
}
.my_list li .ui-li-aside{
margin:0px;
}
here is Demo Fiddle
Related
I'm stuck trying to change the color of my expandable list after it's expanded. It only works for the default color "red" and after I expand it, it changes to grey instead of yellow like it should. Also, how would I change each list to a different color? For example A can be red, B can be Green, etc. Finally, I is there any way to change the count bubble color and its text color? Here is my code.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<style>
.ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle{
background:red;
}
.ui-collapsible-heading-toggle{
background:yellow;
}
</style>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Theming Collapsible Lists</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" >
<h4>A <span class="ui-li-count" id="red_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div data-role="collapsible" >
<h4>B<span class="ui-li-count" id="green_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
You can add some CSS classes to the markup as needed and then set the color rules. For example, to get different colors for different collapsibles, give each collapsible its own class (acol, bcol in my example). Then you can also assign classes to the count bubbles (redCount, greenCount in my example)
<div data-role="collapsible" class="acol">
<h4>A <span class="ui-li-count redCount" id="red_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div data-role="collapsible" class="bcol">
<h4>B<span class="ui-li-count greenCount" id="green_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
Then the CSS rules:
.acol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle {
background:red !important;
}
.acol .ui-collapsible-heading-toggle {
background:yellow !important;
}
.bcol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle {
background:green !important;
}
.bcol .ui-collapsible-heading-toggle {
background:orange !important;
}
.redCount {
color: red;
background-color: #333;
text-shadow: none;
}
.greenCount {
color: green;
background-color: #333;
text-shadow: none;
}
Here is a DEMO
NOTE: obviously you should tweak the colors to actually make it look good ;)
I've been trying to get my site which has a sidemenu to override the normal functionality for the top menu when mobile view is operated.
i.e. i want the menuitems to be full width.
<div class="col-md3 pull-left">
<div class="bs-sidebar hidden-print affix-top" id="sidemenu">
<ul class="nav bs-sidenav">
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Admincontainer" class=""><span>Admin</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Admincontainer" class="nav collapse ">
<li class="">
<a href="lnk" title="">
Manage Members
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Admin/Member/addnew" title="">
Add A New Member
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Publiccontainer" class=""><span>Committee</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Publiccontainer" class="nav collapse ">
<li>
<a href="/Public" title="">
Home
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Public/Contact" title="">
Contact Us
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
</div>
</div>
I've tried and failed with a few approaches so ive created a "vanilla" template of how my menu looks before i try and "fix" it. I basically want the sidemenu to become that fullwidth top menu when the viewport becomes too small to accommodate both sidemenu and main content side by side.
I've hacked an example from a default bootstrap template below.
jsbin example
Default template
Default template's in mobile with vertically stacked menu
Example showing the sidemenu i want to replace the vertically stacked menu in previous image.
You need two navbars (one at the top and one at the side) and then use JQuery to move the side navbar to the top of the page.
So if you have two navbars like so:
<div class="navbar navbar-inverse navbar-fixed-top ">
<div class="container ">
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
</button>
<a class="navbar-brand " href="/ ">Application name</a>
</div>
<div id="topmenu" class="navbar-collapse collapse ">
<ul class="nav navbar-nav ">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li>
Register
</li>
<li>
Log in
</li>
</ul>
</div>
</div>
</div>
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-stacked" id="menu-bar">
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseOne">
Admin
</a>
<ul id="collapseOne" class="panel-collapse collapse">
<li>Manage Members</li>
<li>Add a new Member</li>
</ul>
</li>
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseTwo">
Committee
</a>
<ul id="collapseTwo" class="panel-collapse collapse">
<li>Home</li>
<li>Contact Us</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div class="clearfix"></div>
<div class="content">
<div class="container bodycontent">
<div class="jumbotron">
<h1>Testing Responsive sidemenu</h1>
<p class="lead">Trying to get my side menu to replace the top menu when the size goes too small.
</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<article>
<h1>Content</h1>
<p>Content here</p>
</article>
</div>
</div>
</div>
</div>
</div>
The JQuery is as follows:
var $window = $(window),
$html = $('#menu-bar');
$window.resize(function resize(){
if ($window.width() < 768) {
// When the side bar is moved to the top, this stops it being fixed in place
$("#navbar").removeClass('navbar-fixed-top');
return $html.removeClass('nav-stacked');
}
$("#navbar").addClass('navbar-fixed-top');
$html.addClass('nav-stacked');
}).trigger('resize');
And CSS:
/* CSS used here will be applied after bootstrap.css */
#media (max-width: 767px) {
.content {
padding: 15px;
margin-top: 10px;
}
}
#media (min-width: 768px) {
#menu-bar .panel {
margin-bottom: 0;
background-color: rgba(0,0,0,0);
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu-bar li a {
color: #fff;
font-size: 16px;
font-weight: bold;
}
#navbar {
float: left;
width: 200px;
height: 100%;
}
.content {
margin-left: 200px;
min-height: 100%;
margin-top: 60px;
}
.container {
margin-left: 10px;
padding-right: 150px;
}
}
.navbar-brand > h3 {
margin-top: 0;
margin-bottom: 0;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
#navbar {
margin-top: 50px
}
If you want the left hand side bar to have certain CSS, you should specify the CSS like so:
#media (min-width: 768px) {
#menu-bar {
/* Put your CSS here. It will not apply to the menu-bar when it moves to the top */
}
}
Bootply here
I'm trying to create a Listview that contains a mix of buttons and links. Is there any additions/adjustments I can make to the markup to have buttons appear the same as links? At this stage, I'm trying to do as much as I can in markup and not custom CSS (or JS!)
The markup I'm using is:
<ul data-role="listview" data-inset="true">
<li>Edit</li>
<li>
<form action="#">
<button type="submit">Publish</button>
</form>
</li>
<li>
<form action="#">
<button type="submit">Delete</button>
</form>
</li>
</ul>
What I'd like is this:
(source: reb4.me)
I only seem able to get this:
(source: reb4.me)
Here is a way to do it.
jQM 1.4
To get the arrow icons on the right, add the classes ui-btn ui-btn-icon-right ui-icon-carat-r to the buttons:
<ul data-role="listview" data-inset="true">
<li>Edit
</li>
<li>
<form action="#">
<button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Publish</button>
</form>
</li>
<li>
<form action="#">
<button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Delete</button>
</form>
</li>
</ul>
Then to remove the extra padding, borders, shadows etc. add this CSS:
.ui-li-static {
padding: 0 !important;
}
.ui-li-static form button {
margin: 0;
box-shadow: none !important;
border: 0;
text-align: left;
}
Here is a DEMO
jQM 1.3
If you are stuck with jQM 1.3 it is a little more complicated:
<ul data-role="listview" data-inset="true">
<li>Edit
</li>
<li>
<form action="#">
<button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Publish</button>
</form>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon"> </span>
</li>
<li>
<form action="#">
<button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Delete</button>
</form>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon"> </span>
</li>
</ul>
.ui-li-static {
padding: 0 !important;
}
.fakeLinkIcon {
position: absolute;
right: 10px;
top: 50%;
margin-top: -9px;
}
.ui-li-static form div.ui-submit{
padding-right: 2.5em;
}
.ui-li-static form div.ui-submit {
margin: 0;
box-shadow: none !important;
border: 0;
text-align: left;
border-radius: 0;
}
.ui-li-static form div.ui-submit .ui-btn-inner{
padding-left: 15px;
}
.ui-last-child form div.ui-submit {
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
}
.ui-first-child form div.ui-submit {
border-top-right-radius: 16px;
border-top-left-radius: 16px;
}
DEMO
I am trying to load two instances of jQuery UI selectable, but there seems to be an issue with the second one. How can I solve this?
Here is my code: http://jsfiddle.net/3pKQf/1/
HTML
Div 1
<div id="div1">
<ul id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="ui-state-default">13</li>
<li class="ui-state-default">14</li>
<li class="ui-state-default">15</li>
</ul>
</div><br><br>
Div 2
<div id="div2">
<ul id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="ui-state-default">13</li>
<li class="ui-state-default">14</li>
<li class="ui-state-default">15</li>
</ul>
</div>
CSS
#selectable .ui-selecting {
background: #C41C7B;
}
#selectable .ui-selected {
background: #C41C7B;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#selectable li {
margin: 0px;
padding: 3px;
float: left;
width: 16px;
height: 16px;
font-size: 10px;
font-family: Arial;
text-align: center;
}
JavaScript
$(function() {
$("#selectable").bind('mousedown', function (e) {
e.metaKey = true;
}).selectable();
});
They need different id's. Both are #selectable.
Here's a working update using a class .selectable. http://jsfiddle.net/3pKQf/4/
Is it possible to have multiple split buttons in a jQuery mobile list?
I've tried doing this:
<ul data-role='listview'>
<li>
<a href='#' id='1'>1</a>
<a href='#' id='btn1'></a>
<a href='#' id='btn2'></a>
</li>
</ul>
But it doesn't work. Neither does wrapping the links in a <div data-role='controlgroup>. Am I doing something wrong, or is it just not possible without a hack?
UPDATE: The list is dynamically generated by doing $("#listid).append("<li>...</li>"). http://jsfiddle.net/nrpMN/3/ . As pointed out by mdmullinax below, the following does work:
<ul data-role='listview'>
<li>
<a href='#' id='1'>1</a>
<div data-role='controlgroup' data-type='horizontal'>
<a href='#' id='btn1'></a>
<a href='#' id='btn2'></a>
</div>
</li>
</ul>
Thanks
Sounds like what you want is a horizontal controlgroup nested in a listview.
http://jsfiddle.net/nrpMN/
<ul data-role='listview'>
<li>
<div data-role="controlgroup" data-type="horizontal">
Yes
No
Maybe
</div>
</li>
</ul>
Here is extension to the solution. Problem with above solution is that you cannot control the placement of buttons on the right side of the list item. One way to do it is add class='ui-li-aside' to the control. That will make the buttons come on right, but you will have to adjust the area which aside covers, by default it is 50%. You can modify it to reduce it so that it does not cover your list content on left
.ui-li-aside { float: right; width: 10%; text-align: right; margin: .3em 0; }
Or you can add another class
.ui-li-asideNew { float: right; width: 10%; text-align: right; margin: .3em 0; }
And change the div to adjust the
<ul data-role='listview'>
<li>
<div class='ui-li-aside' data-role="controlgroup" data-type="horizontal">
Yes
No
Maybe
</div>
</li>
</ul>
I think, Controlgroup not rendered well in dynamic listview. You should make complete html code for controlgroup in dynamic listview.
<li>
<a href='#popupItem' data-rel='popup'>List Text</a>
<div class='ui-controlgroup-controls' style='width: 110px;float: right;position: absolute;right: 0em;top: 0.5em;'><a href='#' id='tolistminus' data-role='button' data-icon='minus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-first-child' role='button'>-1</a><a href='#' id='tolistplus' data-role='button' data-icon='plus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-plus ui-btn-icon-notext ui-shadow ui-corner-all ui-last-child' role='button'>+1</a></div>
</li>