I am using jquery UI tabs to create tabbed content. When a tab title is selected, I want it to link to the original location.
$(function() {
$("div.tabs").tabs("div.items > div");
});
<div id="items">
<div class="tabs">
<div class="tab">Tab title 1</div>
<div class="tab">Tab Title 2</div>
<div class="tab">Tab title 3</div>
</div>
</div>
When not-selected clicking on tab title 1 shows the tab content.
After being selected, the tab title 1 would link to http//www.example1.com.
I added a class if the tab had been clicked once already, and then used mouse down to trigger the link.
$(".tabs").tabs(".items > div");
$(".tabs .tab:first a").addClass("lasttab");
$(".tabs .tab").mousedown(function() {
if ($(this).find('a').hasClass("lasttab")) {
window.location.href = $(this).find('a').attr('href');
}
$(".tabs .lasttab").removeClass("lasttab");
$(this).find("a").addClass("lasttab");
});
Related
I make a short app, using Angular Material. I have an array of md-buttons, each with different caption. How to get what buttons was clicked or how do I get the caption of the button when is clicked ?
Here you go - CodePen
Markup
<div ng-controller="AppCtrl as ctrl" ng-cloak="" ng-app="MyApp">
<div layout="column" layout-align="start start">
<md-button ng-repeat="button in ctrl.buttons"
class="md-raised md-primary"
ng-click="ctrl.click($index)">{{button}}</md-button>
Button caption: {{ctrl.selectedButton}}
</div>
</div>
JS
angular.module('MyApp',['ngMaterial'])
.controller('AppCtrl', function() {
this.buttons = ["Car", "Train", "Plane", "Rocket"];
this.click = function (index) {
this.selectedButton = this.buttons[index];
}
});
JQM AJAX navigation doesn't work well when navigating to a page with an in-page dialog?
page1.aspx:
<div data-role="page">
<div data-role="header">Page 1</div>
<div data-role="content">
<a href='page2.aspx'>Click here</a>
</div>
</div>
page2.aspx:
<div data-role="page">
<div data-role="header">Page 2</div>
<div data-role="content">
Popup
</div>
</div>
<div data-role="dialog" id='popup'> <!-- This is not loaded on AJAX navigation -->
<div data-role="header">Page 2 Popup</div>
<div data-role="content">
Popup content
</div>
</div>
When you click the link from Page 1, it doesn't load the <div data-role='dialog'> of Page 2.
How do you get around this issue?
There is a workaround here. I modified it a little:
$(document).bind('pagecontainerload', function (event, ui) {
// Find all dialogs in the DOM
var response = ui.xhr.responseText;
var data = $(response).find("div[data-role='dialog'],div[data-role='popup']");
for (var i = 0; i < data.length; i++) {
var node = data.eq(i);
if (node.attr('id') && document.getElementById(node.attr('id')))
$('#' + node.attr('id')).remove(); // Delete existing one
node.addClass('cache').appendTo('#form1'); // or appendTo('body')
}
});
I added the class cache for cleanup purpose.
JQM 1.3 Iscrollview 1.3.1
I have a list of links to events using data-iscroll. Each event is also a list (title/date-location/description).
Each time I click on the event list, the event is displayed. If I scroll down the content, when I go back to the event list and then click on another event, the view scrolls to where the previous view was stopped.
I've successfully stopped this by launching an empty() on the event content and then calling updatelayout on the back button of the event content :
$("#bhome").on('vclick', function(e) {
$('#econt').empty().trigger('updatelayout');
$.mobile.loading('show');
e.preventDefault();
$.mobile.changePage("#page1");
});
But, of course, android users don't use a back button and use the back key instead.
I've tried to empty() and updatelayout on the pagebeforehide event but apparently, the position is saved before that event happens :
$('#event').on('pagebeforehide', function(event, data) {
$('#econt').empty();
$('#econt').trigger('updatelayout');
$('#escroll').trigger('updatelayout');
});
I've also tried to use the silentscroll function but it's not working either :
$(document).on('pageshow', '#event', function(){
$.mobile.silentScroll(0);
});
How can I make sure that on viewing a new event, the position is back to the top ?
Here is a snippet of my index.html file :
<div id='container'>
<div data-role='page' id='page1' data-theme="c" style="background: black;">
</div>
<div data-iscroll style='background-color:#ddd;'>
<ul id="el"></ul>
</div>
<div data-role='footer' data-position='fixed' data-theme="a" data-tap-toggle="false">
</div>
</div>
<div data-role="page" id="event" data-theme="c" style="background:black;">
<div data-role='header' data-position='fixed' data-theme="a" style="height:42px;">
<a id="bhome" class="ui-btn-left ret" data-icon="arrow-l" href="#" data-iconshadow="false">Back</a>
<h1 id='eh1'></h1>
</div>
<!-- data-role='content' entraine un scroll horizontal -->
<div data-iscroll style='background-color:white;' id='escroll'>
<ul id='econt'></ul>
</div>
</div>
The answer was given by the iscrollview author (works perfectly) :
$("#escroll").iscrollview("scrollTo", 0, 0, 0, false);
I am new to this forum so first let me say a big hello and thanks for providing such a great website!
I am new to JQuery but I love it, I have some JQuery tabs doing the usual List/Edit/Create stuff in a backend.
I have managed to set the edit tab to deisabled when viewing the list tab (as you need to slect a list item to edit) and it is enabled when a list item edit icon is clicked.
The question I have is if I then click the third tab how do I disable the second tab onlick?
This is my standard tab code...
$(function()
{
$("#tabs").tabs({disabled: [2]});
$("#tabs").tabs();
}
);
HTML:
<div class="demo">
<div id="tabs">
<ul>
<li><wont let me post 3 links>Jobs</a></li>
<li>Create Job</li>
<li>Edit Job</li>
</ul>
<div id="tabs-1" style="background-color: #fff">
Include...
</div>
<div id="tabs-2" style="background-color: #fff">
Include...
</div>
<div id="tabs-3" style="background-color: #fff">
Include...
</div>
</div>
Thanks
First you HTML is no correct so the plugin does not initialiaze well. The first tab button link is incorrect:
<li><wont let me post 3 links>Jobs</a></li>
Should be
<li>Jobs</li>
Then you are initializing two times the plugin, only do it once.
In the show event handler, enable/disable the tabs according to the actual tab shown:
$(function()
{
$("#tabs").tabs({
//disabled: [2],
show: function(event, ui) {
if (ui.index === 0) {
$('#tabs').tabs('enable', 1);
$('#tabs').tabs('enable', 2);
} else {
$('#tabs').tabs('disable', ui.index === 1 ? 2 : ui.index === 2 ? 1 : -1);
}
}
});
/*$("#tabs").tabs();
}*/
);
Here is a live working example on jsfiddle
How to disable the button in coding using jquery mobile?
<div data-role="button" id="val">Value</div>
[Note : I want to disable the button in the coding, not in the design time]
Live Example: http://jsfiddle.net/LHG4L/5/
HTML:
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
JS:
$('#theButton').attr('disabled',true);
UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.
You can and should disable it using both jquery and jquerymobile:
$('#theButton').attr('disabled', true);
if ($('#theButton').button) $('#theButton').button('disable')
You can disable button using the attribute class="ui-disabled" as follows:
Link button