Titanium Studio JavaScript - adding buttons to table views - javascript

Is it possible to add buttons to table views? I am trying to create a screen that resembles a settings screen on the iPhone.
I know you are able to add the little arrow that represents that the list has a child but what I'm specifically looking for is how to add a plus button to the right side of my table view.

You need to add a button to the row. That means you need to create a custom row. It's much simpler. Try the following
function createRow(){
var tableRow = Ti.UI.createTableViewRow({
hasChild : false,
width : '100%',
height : 55,
});
var addButton = Ti.UI.createButton({
title : '+',
width : 40,
height : 40,
right : '3%'
});
addButton.addEventListener('click', function(){
alert("Hey, you clicked + button");
});
tableRow.add(addButton);
return tableRow;
}
The above code creates a customized row. Hope it helps you.
Let me know if you have any questions.

Related

Kendo Grid jumps to top after onSave

I have a grid that i need to set:
scrollable: {
virtual: true
},
When users edit a cell then updates (or onSave(e)) their changes. The grid resets back to the top of the page. I don't know why. Users lose their place every time they try to change a cells contents.
When i make
scrollable: false,
it stays put. I think this is a huge bug in Telerik Kendo. Has anyone figured out how to stay in place on the grid after saving changes?
UPDATE
This problem only occurs in IE 11. Unfortunately my client can only use IE11.
I think this works for you:
Use GridViewRowInfo to get row info of selected row and set scroll to your custom row and column.
if (this.radGridView1.SelectedCells.Count > 0)
{
GridViewRowInfo row = this.radGridView1.SelectedCells[0].RowInfo;
radGridView1.TableElement.ScrollTo(row.Index, 0);
}
The answer is to save your current location before you bind.
in
onGridBinding(){
_currentLeftPosition = $(".k-virtual-scrollable-wrap").scrollLeft();
}
in onGridBound(){
//Go Back to previous position
var vs = mainGrid.wrapper.find('.k-grid-content').data('kendoVirtualScrollable');
var scrollGridContentOffsetTop = mainGrid.wrapper.find('.k-grid-content').offset().top;
var selectContentOffsetTop = mainGrid.content.offset().top;
var distanceTop = selectContentOffsetTop - scrollGridContentOffsetTop;
var scrollTop = vs.verticalScrollbar.scrollTop();
$("#mainGrid div.k-virtual-scrollable-wrap").animate({scrollTop: distanceTop + scrollTop,scrollLeft: _currentLeftPosition}, 0);
$("#mainGrid div.k-scrollbar-vertical").animate({scrollTop: distanceTop + scrollTop}, 0);
}

Dynamic view in ScrollView

this question is related to smartface.io. I having some problem while implementing the slider drawer.
This is the slider drawer that I used. When I touch on 3, there is a container will be shown.
After I clicked, the slider drawer is closed. I tried to check slider drawer hide through onHide. However, the function not being called.
I need to reopen the slider drawer. Then it only show me what I want.
This is the structure of the elements
Here is the sample code:
var list = ["1","2","3","4","5","6","7"];
var catList = ["a","b","c","d","e","f","g","h","i","j","k","l"]
for(var item in list) {
var label = new SMF.UI.Label({
text : list[item],
width: "100%",
height: "100px",
horizontalGap: "10dp"
});
if(list[item] === "3"){
container = new SMF.UI.Container({
width: "100%",
height: (100 * catList.length) + "px",
enabled: false,
orientation: 1,
layoutType: SMF.UI.LayoutType.linear
});
for(var catItem in catList){
var catLabel = new SMF.UI.Label({
text : catList[catItem],
width: "100%",
height: "100px",
horizontalGap: "60dp"
});
container.add(catLabel);
}
label.onTouchEnded = function(e){
container.visible = !container.visible;
}
Pages.HomePage.sdMenu.svMenu.ctnMenu.add(label);
Pages.HomePage.sdMenu.svMenu.ctnMenu.add(container);
}else{
Pages.HomePage.sdMenu.svMenu.ctnMenu.add(label);
}
The question is, How can I achieve that without closing the slider drawer? Thank you.
I tried this with your code, at the opening I got the exact screenshot3 that you get. I could see the catList open.
Then I pressed 3, the catList was closed but the sliderDrawer was still open. I tried this a couple of times.
As I understood your problem is this; when you press 3, the sliderDrawer closes at the first time, after that when you open it again, it shows the screenshot3.
If this is right, then can you please give the name of the device you use?
If not, can you please describe again what you are trying to do?

buttons persist when launching dialog

I am using jQueryUI and I have a web page with a few links that when clicked will display a modal window. The issue i am having is that when i click one of the links that has a button then close it and click another link that doesnt have buttons the modal launches but the buttons are still there. Despite the fact that no buttons are being specified. I have tried to use the close property when creating the dialog calling $(this).dialog("close") doesnt solve the issue. Calling $(this).dialog("destroy") solves the issue except that the contents of the modal are then shown on the webpage.
This is the function I call to launch the modal.
General.modal = function(options)
{
if(!options.hasOwnProperty(modal))
{
options.modal = true;
}
$('#modal').dialog(options);
};
This is the call without buttons.
myApp.General.modal({
title : groupTitle + " Documentation",
height : 500,
width : 600,
});
This is the call to that function with buttons:
myApp.General.modal({
title : "Upload Documentation (" + groupTitle + ")",
height : 500,
close: function(){$(this).dialog("close");},
width : 600,
buttons : {
"Upload" : jQuery.proxy(directoryView.uploadClicked, directoryView, model.get("gid"))
}
});
I presume that the dialog is not being destroyed so the last button definition is staying around. You probably need to ensure the buttons attribute is null on subsequent calls:
myApp.General.modal({
title : groupTitle + " Documentation",
height : 500,
width : 600,
buttons : null,
});

Showing a div onmouseover for table row, and setting text and URL dynamically using row attributes

I'm working on a pricing comparison table, and wanted to display more information on each option in a different way.
When a user hovers their mouse over a row, I want the row to show more information on that feature. I now have this working using jQuery and a div.
$(document).ready(function() {
$('#row').mouseover(function() {
var $divOverlay = $('#divOverlay');
var bottomWidth = $(this).css('width');
var bottomHeight = $(this).css('height');
var rowPos = $(this).position();
bottomTop = rowPos.top;
bottomLeft = rowPos.left;
$divOverlay.css({
position: 'absolute',
top: bottomTop,
left: bottomLeft,
width: bottomWidth,
height: bottomHeight
});
$divOverlay.text($(this).closest('tr').attr('desc'));
$divOverlay.delay('100').fadeIn();
$(this).closest('tr').css({ opacity: 0.01 });
});
$('#divOverlay').mouseleave(function() {
var $divOverlay = $('#divOverlay');
$('#row').css({ opacity: 1 });
$divOverlay.fadeOut();
});
});
My problem now lies in that in some cases I want to include a link to a video, or another page (that opens in a new tab) - to provide the user with more information if needed. But the way I have this working, the link isn't rendered as html but shown as text instead. Would anyone know how else I could do this?
Full functional example:
http://jsfiddle.net/rMXAp/1/
Another idea I had was setting an onclick for the div, where the href is taken from the "desc_link" attribute (see non-header row in jsfiddle example), but I'm not sure yet on how I can set this with jQuery.
I think it was somthing similar to the following that I tried:
$divOverlay.setAttribute('onclick',$(this).closest('tr').attr('desc_link'));
Suggestions are appreciated!
Try using .html instead of .text - should do the trick :)

How to refactor from using window.open(...) to an unobtrusive modal dhtml window?

I have a function which launches a javascript window, like this
function genericPop(strLink, strName, iWidth, iHeight) {
var parameterList = "location=0,directories=0,status=0,menubar=0,resizable=no, scrollbars=no,toolbar=0,maximize=0,width=" + iWidth + ", height=" + iHeight;
var new_window="";
new_window = open(strLink, strName, parameterList);
window.self.name = "main";
new_window.moveTo(((screen.availWidth/2)-(iWidth/2)),((screen.availHeight/2)-(iHeight/2)));
new_window.focus();
}
This function is called about 52 times from different places in my web application.
I want to re-factor this code to use a DHTML modal pop-up window. The change should be as unobtrusive as possible.
To keep this solution at par with the old solution, I think would also need to do the following
Provide a handle to "Close" the window.
Ensure the window cannot be moved, and is positioned at the center of the screen.
Blur the background as an option.
I thought this solution is the closest to what I want, but I could not understand how to incorporate it.
Edit: A couple of you have given me a good lead. Thank you. But let me re-state my problem here. I am re-factoring existing code. I should avoid any change to the present HTML or CSS. Ideally I would like to achieve this effect by keeping the function signature of the genericPop(...) same as well.
Here is my solution using jQuery and jQuery UI libraries. Your API is not changed , but parameter 'name' is ignored. I use iframe to load content from given strLink and then display that iframe as a child to generated div, which is then converted to modal pop-up using jQuery:
function genericPop(strLink, strName, iWidth, iHeight) {
var dialog = $('#dialog');
if (dialog.length > 0) {
dialog.parents('div.ui-dialog').eq(0).remove();
}
dialog = $(document.createElement('div'))
.attr('id', 'dialog')
.css('display', 'none')
.appendTo('body');
$(document.createElement('iframe'))
.attr('src', strLink)
.css('width', '100%')
.css('height', '100%')
.appendTo(dialog);
dialog.dialog({
draggable: false,
modal: true,
width: iWidth,
height: iHeight,
title: strName,
overlay: {
opacity: 0.5,
background: "black"
}
});
dialog.css('display', 'block');
}
// example of use
$(document).ready(function() {
$('#google').click(function() {
genericPop('http://www.google.com/', 'Google', 640, 480);
return false;
});
$('#yahoo').click(function() {
genericPop('http://www.yahoo.com/', 'Yahoo', 640, 480);
return false;
});
});
Documentation for jQuery UI/Dialog.
I use this dialog code to do pretty much the same thing.
If i remember correctly the default implementation does not support resizing the dialog. If you cant make with just one size you can modify the code or css to display multiple widths.
usage is easy:
showDialog('title','content (can be html if encoded)','dialog_style/*4 predefined styles to choose from*/');
Modifying the js to support multiple widths:
Add width and height as attributes to show dialog function and the set them to the dialog and dialog-content elements on line 68
Try Control.Window, which requires Prototype
Here's how I use it:
New Message
And in my Javascript file:
$(document).observe("dom:loaded", function() {
$$("a.popup_window").each(function(element) {
new Control.Modal(element, { overlayOpacity: 0.75,
className: 'modal',
method: 'get',
position: 'center' });
});
});
Now if you want to close the currently open popup do:
Control.Modal.current.close()

Categories

Resources