Here's my fiddle - http://jsfiddle.net/TTBzk/
I want to click the add tab button and have it automatically add a tab with prechosen content without a dialog window as seen on JQuery UI's manipulation example here - http://jqueryui.com/tabs/#manipulation
I don't know what I'm doing wrong. Any help would be greatly appreciated.
JQuery
$(function() {
var websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
var tabs = $("#tabs").tabs();
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
function addTab() {
var label = tabTitle.val() || "" + tabCounter,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div align='center' id='" + id + "'>" + websiteframe + "</div>");
tabs.tabs("refresh");
tabCounter++;
}
$("#add_tab").click(function() {
addTab();
});
});
HTML
<div id="tabs">
<ul>
<li>Home <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
<li style="float:right;"><a id="add_tab">+</a></li>
</ul>
<div id="tabs-1">
<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">
Your browser does not support IFRAME's
</iframe>
</div>
</div>
CSS
#tabs li .ui-icon-close {
float:left;
margin:0.4em 0.2em 0 0;
cursor:pointer;}
#add_tab {
cursor:pointer;}
div#tabs {
position:absolute;
top:0px;
left:50%;
width:98%;
height:98%;
margin-left:-49.5%;}
div#tabs div {
display:inline-block;
padding:0px;
width:100%;
height:90%;}
In your addTab function you use this line:
var label = tabTitle.val() || "" + tabCounter;
but you never declare a variable with the name tabTitle
Updated jsfiddle
Changes:
<li>
Home
...
var tabTitle = $('#tab_title');
Gave it an ID for testing purpose.
Declared variable.
Tabs get now added dynamically. You should of course change the tab headings name. For the <a href> value use .text() and e.g. add tabCounter to it so it becomes Home2 etc.
Related
I use jQuery mobile 1.4.5 in my project.
I create dynamically table with buttons by click. When table created the JQM style isn't apply.
Here is my HTML code:
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div data-role="content" class="ui-content">
<button onclick="CretaeTable()">Cretate table</button>
<div id="vectorLayerslist"></div>
</div>
Here is JavaScript code:
function CretaeTable(){
var vectorLayersList = $('#vectorLayerslist');
var arr = [{id:'124',Title:'qqq'},
{id:'589',Title:'www'},
{id:'45',Title:'eee'},
{id:'567',Title:'rrr'}]
var table = layersListTable(arr);
vectorLayersList.append(table);
}
function layersListTable(layers) {
// build the table
var frame = '<fieldset style="border: solid 1px #6b6b6b;">';
var smallHeader = '<legend>title</legend>';
var content = frame + smallHeader + '<table data-role="table" id="layersListEditable" data-mode="columntoggle:none" class="ui-responsive"><thead><tr></tr></thead>';
$.each($(layers), function () {
// we'll store the ID in HTML5 data-attribute for later
content += '<tr>';
// give classes to your buttons for later
content += '<td><button data-mini="true" data-inline="true" data-icon="edit" data-theme="b" type="button" class="edit">Edit</button></td>';
content += '<td><button data-mini="true" data-inline="true" data-icon="delete" data-theme="b" type="button" class="delete">Delete</button></td>';
content += '<td style="vertical-align: inherit;">' + this.Title + '</td>';
content += '</tr>';
});
content += '</table>';
content += '</fieldset>'
return content;
}
Here is JSFIDDLE.
Why JQM style isn't apply?
You jist only need to rebuild the table, and then maybe update the layout of the whole page content:
... your dynamic table creation
vectorLayersList.append(table);
// add this:
$("#layersListEditable").table().table("rebuild");
$(".ui-content").trigger("updatelayout");
Please, note: you may also adjust the button markup, something like this:
content += '<td><button class="ui-btn ui-mini ui-btn-inline ui-btn-icon-left ui-icon-edit">Edit</button></td>';
content += '<td><button class="ui-btn ui-mini ui-btn-inline ui-btn-icon-left ui-icon-delete">Delete</button></td>';
Here is your updated Fiddle: http://jsfiddle.net/aJUy8/105/
In my jQuery mobile app for android , I have a long list view inside a popup , I have used iscroll because overflow:auto is not working on android 2.3.6 , and scrolling now is working ok on all android devices after using iscroll , but the problem is that the scroll bar starts from the header of the popup to the end of the popup ( along the popup height) not the list view height "popup content" although i applied the iscroll to the div that contains the listview. How can I fix this problem and make the scroll appears a long the list height? please help me
This is the iscroll.js that i use jsfiddle
<head>
<script type="text/javascript" src="js/iscroll.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-theme="b">Main</div>
<div data-role="content">
Show Popup
</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data-corners="false" data- overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">
<div style="text-align:center;float:center;padding-top:11px;">
<font size="6px" color="white">Countries</font>
</div>
</div>
<div id="scrollContent" class="content" data-role="content" style="background-color: white;">
<ul data-role="listview" id="countrieslist" style="margin: 0 !important;">
</ul>
</div>
</div>
</div>
</body>
JS code
$(document).on( 'pagecreate', '#index',function(){
var scrollObj;
// to make the popup take the screen width ,height
var window_Width = $( window ).width();
var window_Height = $(window).height();
$('#MyPOPUP').css('width', window_Width-30 );
$('#scrollContent').css('width', window_Width-30 );
$('#MyPOPUP').css('height', window_Height-(window_Height/4) );
$('#scrollContent').css('height', window_Height-(window_Height/4)-87 );
scrollObj = new iScroll('scrollContent', { vScrollbar: true, hScrollbar:false,fixedScrollbar : true,momentum: true});
for(var i=1;i<=50;i++) {
$('#countrieslist').append('<li id="'+i+'"><font>Country' + i +'</font></li>');
}
$('#countrieslist').listview('refresh');
setTimeout(function () {
scrollObj.refresh();
}, 0);
$('#Btn1').on('click', function(){
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
selected_elem = $(this).attr('id');
console.log('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
});
CSS
#scrollContent{
padding: 0 !important;
}
I have a list view inside a popup , when the user select a list element I want to change this element "li" background color , I have tried the following code it was working on jQuery mobile 1.3.2 but it didn't work when i upgraded my app to 1.4.0 , How can I change the background color of the list element when the user click on it ? please help me
<div data-role="page" id="index">
<div data-role="header" data-theme="b">Main</div>
<div data-role="content">
Show Popup
</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data-corners="false" data- overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">
<div style="text-align:center;float:center;padding-top:11px;">
<font size="6px" color="white">Countries</font>
</div>
</div>
<div id="scrollContent" class="content" data-role="content" style="background-color: white;">
<ul data-role="listview" id="countrieslist" style="margin: 0 !important;">
</ul>
</div>
</div>
</div>
Java script code
$('#index').on( 'pageinit',function(){
for(var i=1;i<=50;i++)
{
$('#countrieslist').append('<li id="'+i+'">'+''+'<font>'+Country+i+'</font>' +'</li>');
}
$('#countrieslist').listview('refresh');
});
$('#Btn1').on('touchstart', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
You have a little typo in your loop that creates the countries, but other than that the code seems to work,
Here is a working DEMO
Because pageinit is deprecated n 1.4, I have used pagecreate; and in the for loop the word country after the font tag should be within the single quotes as it is not a variable. Also, in the li click, I reset all other countries to transparent background before setting the newly selected one:
$(document).on( 'pagecreate', '#index',function(){
for(var i=1;i<=50;i++) {
$('#countrieslist').append('<li id="'+i+'"><font>Country' + i +'</font></li>');
}
$('#countrieslist').listview('refresh');
$('#Btn1').on('click', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$('#countrieslist li').css({background: 'transparent'});
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
});
I've a problem with Jquery Mobile. Buttons that I add from JS are not displayed properly, and lacks CSS. On the other hand, hitting a button calls that function, but if another button is clicked, because of on off tap, problem occurs. "addExerciseButton" lacks CSS, and the problem occurs within addExerciseButton
<div data-role="page" id="addprogram">
<div data-role="header" data-position="fixed">
<h1>Add Program</h1>
Back
Save
</div><!-- /header -->
<div data-role="content" class='addprogramcontent'>
<div data-role="fieldcontain" class='addprogramlist'>
</div>
</div>
</div><!-- /page -->
JS:
$(document).off("tap").on('tap', '.addExerciseButton', function(event){
//alert(1);
var container = $(this).attr('id');
alert(container);
});
JS page:
eArray.sort();
var container = $("#addprogram").find(".addprogramlist");
container.empty();
// alert(eArray);
for(var i = 1; i <=7; i++)
{
var day = getDay(i);
container.append("<label for='day-" + i + "' class='select'>" + day + "</label>");
var select = $("<select name='day-" + i + "' id='day-" + i + "'></select>");
for (var j = 0; j < eArray.length; j++)
{
select.append("<option value='" + eArray[j] + "'>" + eArray[j] + "</option>");
}
container.append(select);
var addExerciseButton = "<input type='button' value='Add Exercise' class='addExerciseButton' data-role='button' data-theme='b' id='day-" + i + "'/>"
container.append(addExerciseButton);
}
$("select").selectmenu();
$("#day-1").change(function() {
// alert(value);
$("#day-1 option:selected").each(function () {
// alert(1);
var value = $(this).val();
$(this).parent().selectmenu('disable');
alert(value);
});
});
});
you have to refresh buttons after you append em to the dom:
working example: http://jsfiddle.net/PG2bV/55/
CODE
$(":button").button();
Using
container.trigger('create');
solved my problem with no CSS on buttons.
I'm building JQM app using Font Awesome icons and all is fine if I add into HTML <i class=icon-XXX></i>. The problem appears if I create it through javascript. It never appears!
This icon is into a <ul /><li />and I've tried triggering "refresh", "create", ... but nothing happens.
Is there anyway to solve this? Thanks in advance.
Regards,
PS. I'm using bootstrap also and I load first bootstrap and then FA as says in FA webpage...
UPDATE (Easy code...)
JS
var elemHtml = "" +
"<div data-type=\"tlf\" id=\"XXX\">
<ul data-role=\"listview\" data-inset=\"true\" data-theme=\""+selectedTheme+"\">
<li data-icon=\"false\">
<i class=\"icon-phone\"></i>600123456
</li>
</ul>
</div>";
$("#screen").contents().find("#screenBody").append(elemHtml);
JSP
<link rel="stylesheet" href="resources/css/bootstrap.min.css" />
<link rel="stylesheet" href="resources/css/font-awesome.min.css" />
<div id="screen">
<div id="screenBody"></div>
</div>
I did test the below code and it works normally, using Font-Awesome (without Bootstrap.js). I also gave the listview an ID (#listviewtest).
$(document).on('pagebeforeshow', function(){
var elemHtml =
"<div data-type='tlf'>"
+ "<ul data-role='listview' data-inset='true' data-theme='' id='listviewtest'>"
+ "<li data-icon='false'><a href='tel:600123456'>"
+ "<i class='icon-phone'></i>600123456</a>"
+ "</li>"
+ "<li data-icon='false'><a href='tel:600123456'>"
+ "<i class='icon-remove-sign'></i>600123456</a>"
+ "</li>"
+ "</ul>"
+ "</div>";
$("div[data-role='content']").append(elemHtml); // append to data-role='content'
$('#listviewtest').listview();
});