Skip to main content

Search and Top Navigation

#7834 closed enhancement (notabug)

Opened November 04, 2011 08:07PM UTC

Closed November 07, 2011 01:24PM UTC

Last modified November 08, 2011 07:27AM UTC

Instead of using images for icons we should have alternative option of html symbols

Reported by: rahuljain1248 Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.tabs Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:
Description

Hi, Just check tab close button it does not work if image not loaded. We can use symbol x for close button for reference just check this example you can check https://sites.google.com/site/indianraildaytoday/indian-railway/rail-activity

similarly for arrows we can use symbols

Attachments (0)
Change History (2)

Changed November 07, 2011 01:24PM UTC by scottgonzalez comment:1

resolution: → invalid
status: newclosed

I don't know what you're referring to, the tabs widget doesn't have close buttons and I have no idea what I'm supposed to be looking at on the page you linked to, it doesn't even include jQuery.

Changed November 08, 2011 07:27AM UTC by rahuljain1248 comment:2

Hi,

Sorry for vague explanation. I am just sharing piece of code where I am using close functionality with out using image but that's temporary arrangements. I am concern about loose coupling with images so that if not available we can fulfill requirement with symbols. I dont know if here we can attach images also for better explanation

<code><style>

span.tab-close-class {

position: relative;

top: -7px;

right: -9px;

font-size: 8px;

margin: 0px;

paddin: 0px;

border-bottom: 1px solid black;

}

span.tab-close-class:hover {

position: relative;

top: -7px;

right: -9px;

font-size: 10px;

font-weight: bold;

margin: 0px;

paddin: 0px;

color: red;

curser: hand;

border-bottom: 1px solid black;

}

</style>

<script>

$(document).ready(function() {

$( "#tabsCoachType, #coachesTab").tabs({collapsible: true});

$( "#coachesTab" ).bind( "tabsselect", function(event, ui) {

var closeOption = $('.tab-close-class:hover').length;

alert(closeOption);

var coachesObjArray = $("#coachesTab li");

if(closeOption==1) {

var totalLayer = $("#coachPrint p");

var a = $(totalLayer[ui.index-1]).html()[1];

a = parseInt(a);

a = a--;

$(totalLayer[ui.index-1]).remove();

alert($($logFact).html());

$(coachesObjArray[ui.index]).hide("2000");

}

});

</script>

<div id="coachesTab">

<ul>

<li><a href="#loco-desc" ><span>Loco</span>'''<span class='tab-close-class'>X</span></p>'''</a></li>

<li style="display: none;"><a href="#loco-desc" ><span></span></a></li>

<li style="display: none;"><a href="#loco-desc" ><span></span></a></li>

<li style="display: none;"><a href="#loco-desc" ><span></span></a></li>

</ul>

</div>