xui
A tiny javascript framework for mobile web apps.
xui/xui · GitHub xui - a tiny javascript framework for mobile web apps.
I'm developing with PhoneGap for a month already. In my first app, I used JQuery and the results were horrible. I learned about zepto.js and xuijs being two of the most recommended libraries for cross-platform development. What do you think of these two? which one should I use? Any other things to consider? Any other tips to improve the performance of my apps?
Source: (StackOverflow)
I don't understand how to use the XUI xhr (ajax) call. Consider the following code:
x$('#left-panel').xhr('/panel', {
async: true,
callback: function() {
alert("The response is " + this.responseText);
},
headers:{
'Mobile':'true'
}
});
So does this mean that when a user HOVERs over the left-panel, xui will make an ajax call to the url /panel, and give an alert statement on success? But what if I wnat the ajax call to be execute ONBLUR instead?
Source: (StackOverflow)
I seem to have a huge issue with the BlackBerry Torch 9800 webkit browser. That browser support HTML5 and javascript. The look of a web page developed for mobile device in HTML 5 looks the same for the iPhone, Android, and the Torch. But functionality wise, the Torch really sucks when it comes to the javascript events that cross-fire for some reason. All the other mobile browsers and desktop browsers that support HTML5 seem to work without any issues. At first, I thought it was the jQuery javascript framework I was using. So, I switched to a much ligher version with XUI and I still get the same event cross-firing. Here's what I mean (using jQuery 1.4.x or jQuery 1.5 or XUI 2.0):
(The following is using both jQuery 1.5 (for document ready) and XUI objects and event models)
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8">
<meta name=”HandheldFriendly” content=”true” />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="user-scalable=no, width=device-width" />
...
<script type="text/javascript" src="../Scripts/jquery-1.5.min.js"></script>
<script type="text/javascript" src="../Scripts/xui-bb-2.0.0.min.js"></script>
</head>
<body>
<form ... >
<div style="width: 100%;">
<label>Dropdown List 1</label><br />
<select id="m_ddl1" style="width: 100%;">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
<br />
<div style="width: 100%;">
<label>Dropdown List 2</label><br />
<select id="m_ddl2" style="width: 100%;">
<option value="a">Option A</option>
<option value="b">Option B</option>
<option value="c">Option C</option>
<option value="d">Option D</option>
</select>
</div>
<br />
<asp:LinkButton runat="server" id="m_goButton" CssClass="button disabled" Enabled="false" ClientIDMode="Static">Go</asp:LinkButton>
<script type="text/javascript">
$(document).ready(function()
{ var pageRun = new PageFunctionality();
pageRun.Initialize();
});
function PageFunctionality()
{ this.Option1 = x$("#m_ddl1");
this.Option2 = x$("#m_ddl2");
this.Button = x$("#m_goButton");
this.Link = x$("#m_link");
}
PageFunctionality.prototype.Initialize = function()
{ var me = this;
me.Option2.attr("disabled", "disabled");
me.Option1.on("change", function()
{ me.EnableButton(me.Button, false);
me.Option2.attr("disabled", "");
alert("DD1 Changed");
});
me.Option2.on("change", function()
{ me.EnableButton(me.Button, true);
alert("DD2 Tapped");
});
}
PageFunctionality.prototype.EnableButton = function(objButton, isEnable)
{ var me = this;
if(isEnable)
{ x$(objButton)
.on("click", function()
{ me.Option2.attr("disabled", "disabled");
me.EnableButton(me.Button, false);
alert("Button Tapped");
})
.removeClass("disabled");
}
else
{ x$(objButton)
.un("click")
.addClass("disabled");
}
}
</script>
</form>
</body>
</html>
What happens in that code in the BlackBerry Torch is that once the dropdown list 1 is selected and a change is made, clicking anywhere on the screen or button will result in the onchange event of dropdown list event firing again. This goes for all other objects with events tied to it. Also, on the BlackBerry, it seems that when the dropdown list is disabled, the list can be clicked to show the list.
I finally decided to use the jQuery Mobile version 1.0 alpha 2 framework. It resolves a lot of the javascript and dropdown issues for the BlackBerry, but then it introduced a tonne of other issues with embedded scripts and page redirections. So, I'd like to try and resolve this issue with the event cross-firing with jQuery or XUI for use on the BlackBerry. Much appreciate anyone's help on this.
Source: (StackOverflow)
What JavaScript Mobile development tool would you use based on momentum, existing documentation and functionality, and ability to get passed the App Stores strict policies?
Source: (StackOverflow)
I am trying to get javascript framework XUI working, but having trouble getting it to work on any desktop browser. More on XUI here... http://xuijs.com/documentation
<script type='text/javascript' src='xui-more-1.0.0.min.js'></script>
<!-- <script type='text/javascript' src='xui-bb-1.0.0.min.js'></script> -->
<script>
x$('button').click(function(e){
alert('tee hee!');
});
x$('a.navigation').css({ background:'yellow' });
alert("at least this works!");
</script>
<a rel='nofollow' href='http://google.com' class='navigation' >this is a link</a>
<br><br>
<input type='button' id='button' value='click me!'>
Source: (StackOverflow)
Just a quick question about JQuery, I've been using phonegap and made a few apps with JQuery. One in particularly runs really slowly so I've been trying to slim it down as much as possible.
One change I've been considering is replacing JQuery with something smaller. What would be the most painless replacement, ie what could I use that would need the least code change and have as much of JQuerys features as possible?
As far as I can tell xui is the winner, but maybe theres something else out there I'm not aware of?
Also am I right in saying JQuery Mobile goes on top of JQuery, so the footprint is actually larger?
Please share your advice on this, it would be a great help.
Thanks
Source: (StackOverflow)
I'm trying to build a phonegap application that I hope to work on blackberry OS6+, iOS 4+ and android 2.2+ devices. I'm taking a look at XUI.JS as the javascript library. Does XUI offer me the tools to easily create swiping, sliding and fading effects? If so, can someone show me functional code as an example? I don't see full examples on the XUI website.
Source: (StackOverflow)
I have a website that is using xui.js
When turning on Private Browsing mode on an iPhone iOS5+, the xui.ready function does not get called. Is there a fix for it?
<script>
alert('test');
xui.ready(function (e) {
alert('test2');
});
</script>
No Private mode you see both 'test' and 'test2'
In Private mode you see only 'test'
When browsing with a safari desktop it works fine with private mode on, seems to only happen on iOS devices such as iphones and ipods.
Source: (StackOverflow)
I'm in a way to make compat between XUI & Backbone but I met a problem in my design. I guess.
There it is. I want to extend XUI with a method call attr which would be able to deal with a hash of attributes/values. jQuery does, and Backbone exploits it. It's why I want to do this.
Unlucky, there already is an attr method in XUI. So, when I do:
xui.extend({
attr: function (attributes) {
if (typeof attributes == "object") {
for (var attr in attributes) {
this.attr(attr, attributes[attr]);
}
};
}
});
Of course, the proto of XUI have just one attr method. Mine. How can I have two?
Something doing following available:
xui(element).attr('attr', 'value');
xui(element).attr({'attr': 'value', 'foo': 'bar'});
Thanks for reading and helping :)
Source: (StackOverflow)
I am trying to submit an xhr using phonegap on the blackberry. Currently when I make the request it fails silently. I have tried using jQuery jQuery.getJSON(url , callback),
an xhr object
var xmlhttp = new XMLHttpRequest();
//callback function when XMLHttpRequest is ready
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttpForTGT.status==200){
response = xmlhttpForTGT.getResponseText()
}
else{
alert("Request Failed")
}
}
}
xmlhttp.open("GET", url , true)
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xmlhttp.send()
, and xui
x$('#home').xhr(url,
{method: 'get',
callback: function(){ alert('made request') }});
and so far I can't get any of them to work. Has anyone else been able to get xhr's to work? I'm using JRE4.6.1 & using eclipse for the development environment. No errors are thrown when I attempt to make the requests, any advice??
Source: (StackOverflow)
I want to use xui.js in a mobile web project that needs to work on iOS, Android and Windows Phone 7. The documentation (http://xuijs.com/) is a little unclear as what the different versions include. Does the "ie & ie mobile" version also include the "webkit / firefox / opera" version?
If not, what is the recommended way of delivering the library? I was considering using conditional comments to include the different versions if that is necessary. e.g.
<!--[if IE]>
<script src="xui-ie.js"></script>
<!-- <![endif]-->
<!--[if !IE]>
<script src="xui.js"></script>
<!-- <![endif]-->
Source: (StackOverflow)
I have web service asmx has method GetDataBySystemUser(SystsemUser systemUser) takes object parameter.
I can use Ajax to call this method passing object as JSON and working fine, but how to do that using xui and xhr like below code?
var url = "WebServiceTest.asmx/GetDataBySystemUser";
var SystemUser = new Object();
SystemUser.Name = "Web";
SystemUser.Status = "AWeb";
var FormData = JSON.stringify({ systemUser: SystemUser });
x$('#bodyMain').xhr(url, {
method: 'post',
data: FormData,
callback: function () {
alert(this.responseText.d);
}
});
Source: (StackOverflow)
I am a beginner in Phonegap and I made a simple web service in Microsoft Visual studio 2010 with two simple method. I want to call a method from that service from my Phonegap application for android platform. I am using xui library which method xhr is pretty much incomprehensible for me. I have read a lot of posts in that topic but I could not figure out how to do that.
My link to the web service looks like this: http://localhost/testservice/Service1.asmx.
This is my web service code:
[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public int Calculate(int firsNumber, int secundNumber)
{
return firsNumber + secundNumber;
}
}
This is my method which should test that service:
function checkWebService() {
var url = new "http://localhost/testservice/Service1.asmx?op=HelloWorld";
x$('#test').xhr(url, {error: function(){alert("failed "+this.responseText)},
callback: function(){
alert("Success " + this.responseText);
}
});
I call this method on button click and I am always getting alert with the text "Success", without "response text".
Probably my url is wrong, but I do not know which url I suppose to type.
This is for "HelloWorld" method without parameters, and I also do not know how to call method with parameters.
Any help or explanation please.
Source: (StackOverflow)
I need a dead simple jq alternative, as tiny as possible and more or less with only requirements:
- slideUp/down.
- json get
- basic DOM
The iPhone-look alike-frameworks doesn't do it for me (overdone and heavy for the purpose) which, to my knowledge, leaves me with xui.js, http://xuijs.com/.
Unfortunately, the slideUp / accordeon - functions seems buggy or at least not working as expected.
Thankful for any input if there's other minimal libraries around. Or if anyone has got the slideup to work with xui in an accordeon-fashion.
(Things has changed since previous post request: minimal framework for web-apps, valuable information from Gaby aka G. Petrioli over there)
To clarify my issues with xui, upon using:
x$('#box').tween({ height:'0px', color:'#00ff00', backgroundColor:'blue' }, function()
{
alert('done!');
});
The content of the #box (div) is still visible, even though the div with it's bg-color slides up nicely. Am I using it correctly?
Regards,
//t
Source: (StackOverflow)