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>
Related
<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
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
I've come across some strange behaviour when I want to view a page in my ASP.NET MVC app.
I've created a small HTML helper that should generate a specific layout to display one of my classes.
It is invoked as such:
<div id="tabs-3" style="display:block; float:left;width:95%;">
#foreach (Trade trade in ViewBag.Trades)
{
#Html.Trade(trade, userLanguage)
}
</div>
The expected HTML that is generated looks like this:
<div id="tabs-3" style="display:block; float:left;width:95%;">
<div style="display:block; margin-top:0px; margin-left:auto; margin-right:auto; text-align:center;">
<a href="/en/Trade/Details/1" class="blocklink">
<div style="display:inline-block; margin-top:0px; margin-left:auto; margin-right:auto; border:2px solid black;">
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style='height:50px; width:50px; vertical-align:middle;' alt="User" src="http://localhost:50254/Images/Avatars/01.png">
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold;">
User
</span>
<span style="font-size:8pt; display:block;">
<br/>0 Trades (100%)
</span>
</div>
</div>
<div style="display:inline-block; padding-left:50px; padding-right:50px; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">Sat 19 Apr 2014 20:00</span>
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto; padding-top:5px; padding-bottom:5px; ">
<img alt="" src="/Images/Blank.png" style="background: url(/Images/Icons.png) -465px 0; display: block; width: 20px;height: 20px; text-indent: -9999px; margin-left:auto; margin-right:auto;" />
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">3 Trades</span>
</div>
</div>
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold; text-align:right;">
User2
</span>
<span style="font-size:8pt; display:block; text-align:right;">
<br/>0 Trades (100%)
</span>
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style='height:50px; width:50px; vertical-align:middle;' alt="User2" src="http://localhost:50254/Images/Avatars/09.png">
</div>
</div>
</div>
</a>
</div>
<!-- Other records-->
</div>
I've used breakpoints to look at the generated string and it does look like it should. When I look at the source in a browser it also looks like the above.
However the rendered HTML differs from it (I've checked it with the debugging tools of IE 11, FF 28 and Chrome 34), it looks like this:
<div id="tabs-3" style="display:block; float:left;width:95%;">
<div style="display:block; margin-top:0px; margin-left:auto; margin-right:auto; text-align:center;">
<div style="display:inline-block; margin-top:0px; margin-left:auto; margin-right:auto; border:2px solid black;">
<div style="display:inline-block; vertical-align:middle;">
<a href="/en/Trade/Details/1" class="blocklink">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style="height:50px; width:50px; vertical-align:middle;" alt="User" src="http://localhost:50254/Images/Avatars/01.png">
</div>
</a>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<a href="/en/Trade/Details/1" class="blocklink">
<span style="font-size:16pt; display:block; font-weight:bold;"></span>
</a>
User
<span style="font-size:8pt; display:block;">
<br>0 Trades (100%)
</span>
</div>
</div>
<div style="display:inline-block; padding-left:50px; padding-right:50px; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">Sat 19 Apr 2014 20:00</span>
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto; padding-top:5px; padding-bottom:5px; ">
<img alt="" src="/Images/Blank.png" style="background: url(/Images/Icons.png) -465px 0; display: block; width: 20px;height: 20px; text-indent: -9999px; margin-left:auto; margin-right:auto;">
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">3 Trades</span>
</div>
</div>
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold; text-align:right;">
User2
</span>
<span style="font-size:8pt; display:block; text-align:right;">
<br>0 Trades (100%)
</span>
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style="height:50px; width:50px; vertical-align:middle;" alt="User2" src="http://localhost:50254/Images/Avatars/09.png">
</div>
</div>
</div>
</div>
<!--Other records-->
</div>
In case it isn't clear at first sight the Hyperlink (with class="blocklink" on the 3rd row of the good HTML) is not rendered as a single tag around the div, but is rendered several times within the code either with nothing in between or around a <span> tag, breaking what should be in that tag.
The blocklink style class is something I found looking for a way to add a link around a div:
.blockLink
{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
z-index: 1;
background-color:#ffffff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}
Has anyone come across such an issue? I'm really in the dark on why the rendered HTML looks different.
All is done on the build-in IIS Express directly from within VS 2012.4. I can't try it on an external server, since the app is still being developed and no server has been assigned yet.
That's because your html contains nested <a> elements, which is not standards compliant HTML. From the W3C spec for <a>:
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
You also have related discussions on SO, like in this question. The way the browsers render this scenario is discussed here which explains why you see a different rendered html.
I have created this fiddle with a simplified html code that reproduces this issue:
<a class="blockLink" href="#">
<div class="blockLinkContent">
<h1>Link with inner link</h1>
<a class="innerLink" href="#">inner link</a>
</div>
</a>
The rendered html looks like this on Chrome:
<a class="blockLink" href="#">
</a>
<div class="blockLinkContent"><a class="blockLink" href="#">
<h1>Link with inner link</h1>
</a><a class="innerLink" href="#">inner link</a>
</div>
In order to fix this, you can get rid of one of the links. Then use Javascript\CSS to handle the click event and add any styling you might need like active/hover states or text underline.
For example, you could get rid of the inner link, replacing it with a span and use Javascript to handle clicking on the new inner span:
<a class="blockLink" href="#">
<div class="blockLinkContent">
<h1>Outer link only</h1>
<span class="innerLink">inner link</span>
</div>
</a>
$(function(){
$(".innerLink").click(function(){ alert("inner clicked"); return false; });
});
You can play around with this code in this other fiddler.
Hope this helps!
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>