<ul data-dojo-type="dojox.mobile.IconMenu" id="menu"
style="width: 100%; height: 210px; margin: 20px; background-color: white;"
data-dojo-props="cols: 2">
<li data-dojo-type="dojox.mobile.IconMenuItem" id="iconDisable"
data-dojo-props="label: 'Item',icon:'images/thumbnail.png',moveTo:'Enview0',disabled:'true'"></li>
<li data-dojo-type="dojox.mobile.IconMenuItem"
data-dojo-props="label: 'Item',icon:'images/thumbnail.png'"></li>``
</ul>
I need to disable one icon in this.i have tried disabled:true but i didn't worked for me.Please anyone help me
Thanks
Related
I have buttons (to achieve ripple effect) which have an image, then text.
I want to the buttons full width, which they are and the images and text to start left, but they're center aligned as seen below:
This is what I'm trying but it's as if layout-align doesn't apply to buttons but surely it should?
<md-list role="list">
<md-item ng-repeat="x in courses" layout="column">
<a href="#" layout="column">
<md-button layout="row" layout-align="start center">
<img ng-src="/assets/course_images/{{x.image_name}}" class="course--image" fallback-src="/assets/img/intro-bg-lite.jpg">
{{x.course_name}}, {{x.course_address}}
</md-button>
</a>
</md-item>
</md-list>
CSS for image:
.course--image {
border-radius: 60px;
border: 1px solid #ddd;
margin: 4px 16px;
vertical-align: middle;
width: 60px;
height: 60px;
}
Is there a better way to achieve this?
Material has md-list & md-cards which seem to be better options. You can choose one you like.
1.) md-list (seems to go with yr problem).
<md-list role="list">
<md-list-item ng-repeat="x in courses">
<img ng-src="/assets/course_images/{{x.image_name}}" class="md-avatar" fallback-src="/assets/img/intro-bg-lite.jpg" ng-click=''>
<div class="md-list-item-text">
<md-button class="md-primary" ng-click="">
{{x.course_name}}, {{x.course_address}}
</md-button>
</div>
<md-divider ng-hide='$last'></md-divider>
</md-list-item>
</md-list>
2.) md-cards
<md-content>
<md-card ng-repeat="x in courses">
<md-card-content layout="row" layout-align="start center" layout-padding>
<img ng-src="/assets/course_images/{{x.image_name}}"
class="md-avatar" alt=""
ng-click=''>
<md-button class="md-primary" ng-click=''>
{{x.course_name}}, {{x.course_address}}
</md-button>
</md-card-content>
</md-card>
</md-content>
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
Is it possible to set a checkbox instead of a split button in a split-button-list in jquery-mobile??
It seems to be easy to change it to be another button, but checkbox..
I want my checkbox to appear on a RIGHT side INSTEAD of a split button, not instead of a picture
Thanks for help..
Here is a DEMO FIDDLE
The UL does not use split icon, but instead an absolutely positioned DIV on the right with a checkbox inside. The CSS is used to position everything correctly:
<ul class="has-right-radio" data-role="listview" data-inset="true">
<li data-icon="false">
<a href="#">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg" />
<h3>Picture</h3>
<p>List item with thumbnail and right radio</p>
</a>
<div class="right-radio">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="" />
<label for="checkbox-1a"></label>
</div>
</li>
</ul>
.has-right-radio .ui-link-inherit {
margin-right: 48px !important;
}
.right-radio {
position: absolute;
top: 0px; bottom: 0px; right: 0px;
width: 48px;
border-left: 1px solid rgb(204, 204, 204);
}
.right-radio .ui-checkbox input {
visibility: hidden;
}
.right-radio .ui-checkbox, .right-radio .ui-checkbox label {
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px;
}
.right-radio .ui-checkbox label {
background-image: none;
background-color: transparent;
border: 0;
}
.right-radio .ui-checkbox label .ui-btn-inner {
position: absolute;
top: 50%;
margin-top: -10px;
}
If you do not need the thumbnail, just leave out the IMG tag like the second LI in the fiddle.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
.ui-btn-up-c{border:none;}
.ui-btn-hover-c{border:none;}
.ui-btn-hover-c:visited, .ui-btn-hover-c:hover, .ui-btn-hover-c a.ui-link-inherit { color:none;background:none;border:0px; }
</style>
</head>
<body>
<div data-role="page" id="myPage1">
<ul data-role="listview">
<li>
<div class="ui-grid-b">
<div class="ui-block-a" style="width: 30%;">
<div data-role="fieldcontain">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg">
</div>
</div>
<div class="ui-block-b" style="width: 60%;">
<div data-role="fieldcontain">
<h2>Phoenix</h2>
<p>Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix</p>
</div>
</div>
<div class="ui-block-c" style="width: 6%; padding-top: 55px; float: right;">
<div style="float: right;">
<label>
<input name="checkbox-0 " type="checkbox">
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Hello I am making a footer:
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
Chartered Physiotherapist<br>
BSc HONS MCSP<br>
Post Grad Dip (vet phys) ACPAT CAT A
</p>
</li>
<li id="logos">
<h4>head
</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div> <!---footer---->
I want the footer div to be 100% width so I can colour it. I want the ul to be 960px wide and the li elements to lign up next to on another in a inline-block. css:
#footer {
background-color:#666666;
#footer ul {
width:960px;
margin-left: auto ;
margin-right: auto ;
}
#footer li {
width: 320px;
display:inline-block;
}
But the li elements knock the last one underneath the first two and ther's odd spacing at the top.
Any help would be great!
reduce the number lines in professional qualification...
reduce the width of li...
and always use float left to solve the alignment problems
<!--<html>
<head>
<link rel="stylesheet" href="so.css"/>
</head><body>
<div id="header"></div>
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
</p>
</li>
<li id="logos">
<h4>head
</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div></body></html>-->
#header{
height:80%;
width:100%;
}
#footer {
background-color:#666666;
width:100%;
height:20%;
}
#footer ul {
width:960px;
margin-left: auto ;
margin-right: auto ;
height:100%;
}
#footer li {
width: 300px;
display: inline-block;
height: 100%;
float: left;
}
You can use this code
body {
margin: 0;
padding: 0;
}
#footer {
background-color: #666666;
clear: both;
width: 100%;
float: left;
margin: 0;
padding: 30px 0;
}
#footer ul {
width:960px;
margin: 0 auto;
padding: 0;
text-align: left;
}
#footer li {
width: 320px;
display:inline-block;
float: left;
}
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
Chartered Physiotherapist<br>
BSc HONS MCSP<br>
Post Grad Dip (vet phys) ACPAT CAT A
</p>
</li>
<li id="logos">
<h4>head</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div>
how can I use images in a jquery UI tab instead of text? when using text the selected tab has a different styling than a nonselected one. What css element(s) do I have to modify to make this useful for tabs that have images in them?
I tried something here but it is not very visible which tab is selected at the moment:
http://jsfiddle.net/8Cmuf/16/
html:
<div id="dgTabs" style="width: 500px;">
<ul>
<li><a id="a1" href="tab-1">
<img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
<li><a id="a2" href="tab-2">
<img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
<li><a id="a3" href="tab-1">
<img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
<li><a id="a4" href="tab-2">
<img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
<li><a id="a5" href="tab-1">
<img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
<li><a id="a6" href="tab-2">
<img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
<li><a id="a7" href="tab-1">
<img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
<li><a id="a8" href="tab-2">
<img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
</ul>
</div>
I recommend not to use image withing LI tag, instead try using different CSS class.
Try using default jQuery UI code given here http://jqueryui.com/tabs/#default
And then added few classes in CSS that will help you, see below code...
<style>
.ui-tabs .ui-tabs-nav li{ height: 35px; width: 42px; }
.ui-tabs .ui-tabs-nav li.ico1{ background:url(http://jqueryui.com/web-base-template/themes/jquery/i/jq-nav-icons.png) no-repeat;
background-position: -40px 1px; }
.ui-tabs .ui-tabs-nav li.ico2{ background:url(http://jqueryui.com/web-base-template/themes/jquery/i/jq-nav-icons.png) no-repeat; background-position: 8px 1px; }
.ui-tabs .ui-tabs-nav li.ico3{ background:url(http://jqueryui.com/web-base-template/themes/jquery/i/jq-nav-icons.png) no-repeat; background-position: -91px 1px; }
</style>