rbiggs / chocolatechip-ui Goto Github PK
View Code? Open in Web Editor NEWMobile Web App Framework for Webkit Browsers
Home Page: https://chocolatechip-ui.github.io
License: MIT License
Mobile Web App Framework for Webkit Browsers
Home Page: https://chocolatechip-ui.github.io
License: MIT License
If you use Tab key on your keyboard with Safari/Chrome and similarly use " Previous | Next " found on the ios keypad, one would be able to tab into "upcoming" layouts thereby revealing them and putting them entire app in an inconsistent state.
When implementing a deletion table, I found that if I want the clicking of the table cells to navigate away from the page, that it still does so even after you have hit the "edit" button and are trying to choose which table cells you want to delete. After digging in your code I came up with some simple fixes if you would like to see them. Basically I found that if you save where the href attribute is going and remove it from the table cell immediately after you have clicked the "edit" button, and add the href attribute back tot he table cell after you have clicked done, then it keeps the page from navigating away to somewhere you do not want to go yet. Another fix in my code that you may notice with the comment blocks around it is that when you are trying to choose which table cell you want to delete you have to click right on the small circle that appears. To fix this I bound the click to the "parentNode" which is the entire table cell. This way when you click edit, you can touch anywhere inside the table cell to make the red check mark appear or disappear. Here is my code and please let me know if this is something that you are working on currently or there is anything else you wish to know about my code.
var UIEditExecution = function() {
$(toolbar + " > uibutton[ui-implements=edit]").bind("click", function() {
if ($("label", this).text() === "Edit") {
/****************************EDITED***************************/
// The href tag needs to be deactivated in order to ensure that
// when the table cell is clicked in edit mode to put a check next
// to the item, that it does not go to another page. BUG FIX
$$("tablecell", listEl).forEach(function(tbc) {
var location = tbc.getAttribute("href");
tbc.removeAttribute("href");
});
/*************************************************************/
this.UIToggleButtonLabel("Edit", "Done");
this.setAttribute("ui-implements", "done");
listEl.addClass("ui-show-delete-disclosures");
this.parentNode.firstElementChild.style.display = "-webkit-inline-box";
if (/uibutton/i.test(toolbarEl.children[1].nodeName)) {
toolbarEl.children[1].css("display", "none;");
}
$$("tablecell > img", listEl).forEach(function(img) {
img.css("{-webkit-transform: translate3d(40px, 0, 0)}");
});
} else {
/****************************EDITED***************************/
// This re-enables the href tags on all of the table cells
// so that after edit mode is complete, you can still navigate
// to another page.
$$("tablecell", listEl).forEach(function(tbc) {
tbc.setAttribute("href", location);
});
/*************************************************************/
this.UIToggleButtonLabel("Edit", "Done");
this.removeAttribute("ui-implements");
this.parentNode.firstElementChild.style.display = "none";
listEl.removeClass("ui-show-delete-disclosures");
$$("deletedisclosure").forEach(function(disclosure) {
disclosure.removeClass("checked");
disclosure.ancestorByTag("tablecell").removeClass("deletable");
});
if (/uibutton/i.test(toolbarEl.children[1].nodeName)) {
toolbarEl.children[1].css("display", "-webkit-inline-box;");
}
$("uibutton[ui-implements=delete]").addClass("disabled");
$$("tablecell > img", listEl).forEach(function(img) {
img.css("{-webkit-transform: translate3d(0, 0, 0)}");
});
}
});
};
var UIDeleteDisclosureSelection = function() {
$$("deletedisclosure").forEach(function(disclosure) {
/****************************EDITED***************************/
// Changed the bind to the parent node instead of the disclosure because the
// parent node is the table cell. This enables us to click anywhere in the
// table cell and it activate the check box next to the item that may be deleted.
// the if-statement is to check to make sure that we are actually in edit mode.
// if not in edit mode then there is a bug that will remember the touches to the
// table cell and will bring up the box checked as soon as the edit button is pressed.
// It is checking the button to say "done" because that is the text of the button when
// in edit mode.
disclosure.parentNode.bind("click", function() {
if( $("uibutton[ui-implements=done]").getAttribute("ui-implements") == "done" ) {
/*************************************************************/
disclosure.toggleClass("checked");
disclosure.ancestorByTag("tablecell").toggleClass("deletable");
$("uibutton[ui-implements=delete]").removeClass("disabled");
if (!disclosure.ancestorByTag("tablecell").hasClass("deletable")) {
listEl.setAttribute("data-deletable-items", parseInt(listEl.data("deletable-items"), 10) - 1);
if (parseInt(listEl.data("deletable-items"), 10) === 0) {
toolbarEl.firstElementChild.addClass("disabled");
}
} else {
listEl.data("deletable-items", parseInt(listEl.data("deletable-items"), 10) + 1);
}
}
});
});
};
Hi Robert, I was playing with the examples when evaluating CHUI, and ran across a problem when running this example:
/examples-android-zepto/templates/app-handlebars.html
The $.getJSON call throws a syntax error exception because of the semicolons in data.json. I removed the two semicolons and the example worked fine.
Cheers.
I have been playing with chui for a few weeks and it is a slick tool. I ran into a somewhat odd issue with the UIPaging control that may be me missing something so I am throwing it out. I have a bunch of pages created (150 or so) but it happens with less. What seems to happen is that if you swipe too quickly the card content changes on the fly. In watching the web inspector, it seems that it goes back to the first card prior to going to the next card.
Is there a way to slow down the swipe so it controls someone trying to swipe at mach speed, or is there a way to get it to not move the class to the first card prior to going to the next card?
Thanks again for a great framework and I am hoping to get to use it soon.
Jeff
Please provide a date picket widget as in iOS.
That would be really helpful
$.UIEnableScrolling used to check if a scroller was already on a scrollpanel and if so refresh it... otherwise it would create one.
Because of this, calling $.UIEnableScrolling() doesn't refresh the scroll after dynamically adding content... now it just adds moar scrollers :)
I am using https://github.com/rbiggs/chocolatechip-ui latest.
In the screenshot below you can see the second scrollbar on the demo that has had some content added then had $.UIEnableScrolling() run on it...
Our project has four levels of navigation.
When clicking on the "back button" in the fourth level, you can see how it goes two plane back - two animations.
This effect occurs under the iPad, iPhone and IOS simulator. Safari works as fine.
Here is an example implementation that follows the spec a bit more:
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys#Compatiblity
Your main issue is Object.keys
should throw an error if not passed an object.
when there is more than one stack the scrolling is not going to work, current solution is to remove any previous stack before running this function.
Problem: I needed a tablecell to have details and be deleteable. So I used both and when you try to click the animation is fired taking it to the the href.
Fix:
chui.ios.js v2.1.1 line 1555:
e.stopPropagation();
The simplest app page from the tutorial (nothing but an empty view with a navbar and a toolbar) fails to work on my iPhone3GS (latest iOS5), because the toolbar is not sitting at the bottom of the screen, but right under the navbar, on top. No content added to the scrollview shows.
ChUI has very good IOS and Android CSS. I would like to see more themes based on Native styling(Windows 8/Blackberry/Android Settings). I would like to do help out with the production.
And due to the fact that my name is not Tom and that I'm not running Mac OS X, the build fails.
A good solution would be to build in a folder inside the repository directory.
This is more of a look and feel issue, but UIButtons when touched do not revert to their unselected state after being touched without another element being touched on. I imagine this is a focus issue (button having focus, being highlighted by Safari).
Consequently, this also applies to similar items like UISwitches.
While the SplitView has support for the navigation list popover in portrait orientation for the iPad, is there any way to implement a custom popover or popovers in an app?
If I try to add cordova-1.9.0.js in my html file, i have "Uncaught TypeError: object is not a function at file chocolatechip.js:352" .
I am on Android 2.3.6 emulator
Tested on multiple devices, physical and otherwise, across multiple popular versions of the mobile operating system and the scrolling simply doesn't happen. The scroll bar itself renders, but touch scrolling simply doesn't happen.
Edit: Using the newest version of ChUI and have tested on physical devices ranging from 2.3 to 4.1 for Android.
Hi,
My name is Vickey and I am working on a simple app. I made this app using chocolate chip ui and phonegap. In ios it is working very good but in android i am having some difficulty in fixing scroller. In my app, I have a view for form and it contains a lot of input element.s with type number. When I am coming to this view than scroller is working perfectly but when I enter some value in my last element at that moment scroller just stopped working and it is not allowing me to move up. I am not using WAML here I am sending you my code and css for the testing
<style> html, body { background:url(../images/bg.png); } * { -webkit-user-select: none; } input, textarea { -webkit-user-select:text; } .titleAd { margin-top:6%; margin-left:8%; } .inText { margin:23% 0 0 5%; font-size:17px; font-weight:bold; } .btnAd { border:1px solid #CCC; border-radius:8px; background:#FFF; width:95%; margin:0 auto; height:45px; } /*.btnAd:hover { border:1px solid rgba(0,0,0,0.1); background:-webkit-linear-gradient(top, #e80606 0%,#8c3310 50%,#752201 51%,#960000 100%); color:#fff; }*/ .btnAd:active { border:1px solid rgba(0,0,0,0.1); background:-webkit-linear-gradient(top, #e80606 0%,#8c3310 50%,#752201 51%,#960000 100%); color:#fff; } .btnAd:active .arrAdTxt2 { background:url(../images/home_arrow_white.png); } .fst{margin-top:9%;} .snd{margin-top:9%; border-radius:8px 8px 0 0;} .trd{border-radius:0 0 8px 8px;} .fth{margin-top:9%;border-radius:8px;} .arrAd{ float:right; margin-top:10px; margin-right:10px;} .iconAd{ float:left; margin-top:10px; margin-left:10px;} .txtAd { float:left; margin-left:10px; font-size:17px; line-height:18px; margin:14px 0 12px 10px; font-weight:bold; /*font-family:DevanagariSangamMN-Bold;*/ } .btxt { font-size:13px; font-family:Arial; line-height:15px; color:#575757; margin:4% 4% 4% 4%; text-align:center; color:#666; } .boxRadiusAd { border:1px solid #999; border-radius:8px; min-height:50px; background:#FFF; width:95%; margin:3% auto; } .titleAdTxt { margin:4% 0 0 5%; font-size:16px; font-weight:bold; color:#602D32; ; } .rowAd { border-bottom:1px solid #999; height:36px; padding-top:12px; padding-left:10px; font-size:14px; cursor:none; } .rowCl:active,.rowSl:active{ background:-webkit-linear-gradient(top, #e80606 0%,#8c3310 50%,#752201 51%,#960000 100%); color:#fff; } .rowCl:active .selTxt { color:#FFF;} .rowCl:active .selectedVal { color:#FFF;} .rowCl:active .arrAdTxt { background:url(../images/home_arrow_white.png); } .txts { float:right; width:100px; height:30px; margin-top:-5px; margin-right:5px; border:2px inset #CCC; font-size:16px; color:#ccc; border-radius:8px; position:relative; } .txts_tx { /* float:left; */ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); border:none; width:62px; height:18px; padding:0px; background:none; font-size:14px; position:absolute; top:6px; left:4px; } input:focus { outline: 1px solid #fff; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .arrAdTxt{ float:right; margin-top:4px; margin-right:10px; background:url(../images/home_arrow_grey.png); width:10px; height:15px;} .arrAdTxt2{ float:right; margin-top:14px; margin-right:10px; background:url(../images/home_arrow_grey.png); width:10px; height:15px;} .arrAdTxt3{ float:right; margin-top:0px; margin-right:10px;} div.arrAdTxt4,div.arrAdTxt5,div.arrAdTxt6,div.arrAdTxt7,div.arrAdTxt8{ float:right; margin-top:0px; margin-right:10px; background:url(../images/check.png); width:23px; height:23px; display:none;} div.arrAdTxt4[ui-state=active],div.arrAdTxt5[ui-state=active],div.arrAdTxt6[ui-state=active],div.arrAdTxt7[ui-state=active],div.arrAdTxt8[ui-state=active]{ float:right; margin-top:0px; margin-right:10px; background:url(../images/check.png); width:23px; height:23px; display:block;} .rowSl:active .arrAdTxt4,.rowSl:active .arrAdTxt5,.rowSl:active .arrAdTxt6,.rowSl:active .arrAdTxt7,.rowSl:active .arrAdTxt8{ background:url(../images/check-white.png); display:block; } .sltAD { width:90%; height:30px; position:absolute; } .selTxt { float:left; width:65%; padding-top:2px; } .selectedVal { float:right; color:#460000; margin-right:10px; color:#82382F; padding-top:2px; } .backButton { border-radius:8px; width:80%; margin:0 auto; background:#CCC; border:2px solid #999; text-align:center; padding-top:10px;padding-bottom:10px; font-size:18px; color:#666; font-weight:bold; } .backButton .calactive:active{ /*background:-webkit-linear-gradient(top, #e03400 0%,#aa1903 44%,#c61700 100%);*/ background:#fff; } div[ui-state=calactive].touched:before { /*background-image: -webkit-linear-gradient(left top, #7d88a5 10%, #58698c 30%, #3a4e78 51%, #253c6a 51%, #273f6d 75%, #273f6d); */ background:-webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); } div[ui-state=calactive]:active { background:-webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); } div[ui-state=calactive]{ background:-webkit-linear-gradient(top, #e03400 0%,#aa1903 44%,#c61700 100%); color:#fff; border:2px solid #333; } .backButtonTrue { background: -webkit-linear-gradient(top, #e03400 0%,#aa1903 44%,#c61700 100%); border:2px solid #333; } .backButtonFalse { background:#CCC; border:2px solid #999; } .backButtonClicked { background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); } .txtBox { display:none; /*float:right; margin-top:3px; margin-right:1px;*/ position:absolute; top:5px; right:2px; } .redAd { color:#A20400; margin-top:0px; } .rowRl { font-size:14px; background:#FFF; } #headerId { width:100%; height:40px; background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); } #toastAd { position:absolute; bottom:15%; left:3%; width:95%; font-size:14px; z-index:1000; text-align:center; border:1px solid #fff; background: #000; padding:2% 0 2% 0; -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; color:#fff; display:none; background: -webkit-linear-gradient(top, #e80606 0%,#8c3310 50%,#752201 51%,#960000 100%); border:2px solid #333; border-radius:8px; } #toastAd.fade-out { opacity:0; } #toastAd.fade-in { opacity:1; } div.bar { position: relative; height: 42px; border: 1px solid #cad6e2; border-bottom-color: #22374a; border-right: 0; border-left: 0; text-align: center; background: -webkit-gradient(linear, left top,left bottom, from(#afbbcb), to(#6e86a4), color-stop(0.48, #8b9db5), color-stop(0.5, #8195af)); -webkit-border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; } div.body { position: relative; margin: 6px 0 0 12px; height: 26px; width: 60px; border: 1px solid rgba(0,0,0, 0.4); -webkit-border-radius: 5px; background: -webkit-gradient(linear, left top, left bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa)); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2); background: #c03; float:left; z-index:100; } div.body div { position: absolute; z-index: 1; top: 4px; left: -7px; -webkit-transform: rotate(51deg); } div.body span { -webkit-transform: skew(15deg); display: block; width: 15px; height: 16px; background: -webkit-gradient(linear, left top, right bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa)); -webkit-border-radius: 1px; border: 1px solid rgba(0,0,0, 0.4); border-right: 0; border-top: 0; -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25); background: #c03; } div.body p { position: absolute; z-index: 2; top: 3px; left: 8px; margin: 0; padding: 0; font-size: 13px; font-weight: bold; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0, 0.4); padding:4px 0 0 12px; width: 60px; } .backAdBtn { background:url(../images/bck.png); margin-top:7px; line-height:36px; margin-left:2px; padding:0px 12px 0px 10px; width:70px; height:32px; } .backlabel{padding-left:9px; line-height:30px;} /*.rowAd:hover{background:#c03} .rowAd:active{background:#c03}*/ </style> <div class="txts">
<input type="number" id="txt_ft" class="txts_tx" placeholder="°C" placeholder2="°C" cid="delFt">
<img src="images/delete.png" width="20" style="" cid="txt_ft" id="delFt" class="txtBox" onclick="txtBoxAd($(this))" val="°C"/>
</div>
<!--<input type="number" id="txt_ft" class="txts" onkeyup="txtsAd($(this).attr('id'),event)" placeholder="°C" cid="delFt">-->
</div>
<div class="rowAd">
Dewpoint, Dp
<div class="txts">
<input type="number" id="txt_dp" class="txts_tx" onkeyup="txtsAd($(this).attr('id'),event)" placeholder="°C" placeholder2="°C" cid="delDp">
<img src="images/delete.png" width="20" style="" cid="txt_dp" id="delDp" class="txtBox" onclick="txtBoxAd($(this))" val="°C"/>
</div>
</div>
<div class="rowAd rowCl" style="border-bottom-left-radius:8px;border-bottom-right-radius:8px; border-bottom:none;" page="atmSel" hover='1' onclick="rowClAd($(this),'atmSel')">
<div class="selTxt">Atmosphere</div>
<div class="arrAdTxt"></div>
<div id="atmVal" class="selectedVal"></div>
</div>
</div>
<div class='titleAdTxt'>Element data input</div>
<div class="boxRadiusAd" style="margin-top:3px;">
<div class="rowAd rowCl" style="border-top-left-radius:8px;border-top-right-radius:8px;" page="gradeSel" hover='1' onclick="rowClAd($(this),'gradeSel')">
<div class="selTxt">Grade</div>
<div class="arrAdTxt"></div>
<div id="gradeVal" class="selectedVal"></div>
</div>
<div class="rowAd rowCl" style="" page="hzdSel" hover='1' onclick="rowClAd($(this),'hzdSel')">
<div class="selTxt">Hot zone diameter, d</div>
<div class="arrAdTxt"></div>
<div id="hzdVal" class="selectedVal"></div>
</div>
<div class="rowAd rowCl" style="" page="tdSel" hover='1' onclick="rowClAd($(this),'tdSel')">
<div class="selTxt">Terminal diameter, D</div>
<div class="arrAdTxt"></div>
<div id="tdVal" class="selectedVal"></div>
</div>
<div class="rowAd">
Shanks
<div class="txts">
<input type="number" id="txt_shanks" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delShank" value="" >
<img src="images/delete.png" width="20" style="" cid="txt_shanks" id="delShank" class="txtBox" onclick="txtBoxAd($(this))" val="" />
</div>
</div>
<div class="rowAd">
Terminal length, Lu
<div class="txts">
<input type="number" id="txt_tl" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delTl" placeholder="mm" placeholder2="mm">
<img src="images/delete.png" width="20" style="" cid="txt_tl" id="delTl" class="txtBox" onclick="txtBoxAd($(this))" val="mm"/>
</div>
</div>
<div class="rowAd">
Hot zone length, Le
<!--<div class="txts"><img src="images/delete.png" width="20" style="" cid="txt_hzl" id="delHzl" class="txtBox" onclick="txtBoxAd($(this))" val="mm"/>-->
<div class="txts">
<input type="number" id="txt_hzl" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delHzl" placeholder="mm" placeholder2="mm">
<img src="images/delete.png" width="20" style="" cid="txt_hzl" id="delHzl" class="txtBox" onclick="txtBoxAd($(this))" val="mm"/>
</div>
</div>
<div class="rowAd">
Shank distance (c-c), a
<div class="txts">
<input type="number" id="txt_sd" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delSd" placeholder="mm" placeholder2="mm">
<img src="images/delete.png" width="20" style="" cid="txt_sd" id="delSd" class="txtBox" onclick="txtBoxAd($(this))" val="mm"/>
</div>
</div>
<div class="rowAd">
Intermediate shank length, B
<div class="txts">
<input type="number" id="txt_isl" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delIsl" placeholder="mm" placeholder2="mm">
<img src="images/delete.png" width="20" style="" cid="txt_isl" id="delIsl" class="txtBox" onclick="txtBoxAd($(this))" val="mm"/>
</div>
</div>
<div class="rowAd">
Surface load
<div class="txts">
<input type="number" id="txt_sl" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"placeholder="w/m2" placeholder2="w/m2" cid="delSl">
<img src="images/delete.png" width="20" style="" cid="txt_sl" id="delSl" class="txtBox" onclick="txtBoxAd($(this))" val="w/m2"/>
</div>
</div>
<div class="rowAd">
No. of elements in series
<div class="txts">
<input type="number" id="txt_noeis" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"placeholder="pcs" placeholder2="pcs" cid="delNoeis">
<img src="images/delete.png" width="20" style="" cid="txt_noeis" id="delNoeis" class="txtBox" onclick="txtBoxAd($(this))" val="pcs"/>
</div>
</div>
<div class="rowAd rowCl" style="" page="ecSel" hover='1' onclick="rowClAd($(this),'ecSel')">
<div class="selTxt">Element connection</div>
<div class="arrAdTxt"></div>
<div id="ecVal" class="selectedVal"></div>
</div>
<div class="rowAd">
Number of groups
<div class="txts">
<input type="number" id="txt_nog" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"placeholder="pcs" placeholder2="pcs" cid="delNog">
<img src="images/delete.png" width="20" style="" cid="txt_nog" id="delNog" class="txtBox" onclick="txtBoxAd($(this))" val="pcs"/>
</div>
</div>
<div class="rowAd" style="border-bottom:none;">
Total no. of elements/group
<div class="txts">
<input type="number" id="txt_tnoeg" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delTnoeg">
<img src="images/delete.png" width="20" style=" " cid="txt_tnoeg" id="delTnoeg" class="txtBox" onclick="txtBoxAd($(this))" val=""/>
</div>
</div>
</div>
<div style="clear:both; height:2px;"></div>
<div class="backButton" id="calcBtn" ui-state="">Calculate</div>
<div style="clear:both; height:33px;"></div>
</panel>
</scrollpanel>
</subview>
</view>
Placing a UIButton in the navbar in a root view prevents other elements from being selected. Once the button has been used, the other buttons become pressable.
Hi Robert
In your latest version there is s problem with the carousel code. The following error occurs:
TypeError: 'null' is not an object (evaluating 'that.wrapper.style')
I started getting this error in my app when I updated to the latest version of chui where I was using the carousel stack. When I tried running your examples I got the same errors.
Stefan
Our project has two levels of navigation. The content should be displayed on the right side.
When you call some of the content inexplicable things happen:
PS: "chocolate chip UI" is realy great.
Hi, first many thanks for your awesome framework.
I encountered a problem about input box in a form. The input box will be moved up if focused. (Please see the captured image.) It seems if no chui.x.js is included, the input box don't float.
I tested it in the browser in Android 2.3.6(Huawei U8806). The test file is examples-android-chocolatechip/forms/login.html.
I supposed to use Chui as the web framework to work with PhoneGap, because Chui is lighter and smoother than Sench Touch!
This is my first time to use chui, and a strange exception occured. Here is the main code.
js code:
<script type="text/javascript">
// Waiting for PhoneGap
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap Done
function onDeviceReady() {
// show all the contacts
function onSuccess(contacts) {
//alert(contacts.length);
var html = "";
for (var i=0; i<contacts.length; i++) {
html += '<tablecell><celltitle>' + contacts[i].displayName + '</celltitle></tablecell>';
}
$('#list').append(html);
};
function onError(contactError) {
alert('onError!');
};
// find all contacts
var options = new ContactFindOptions();
options.filter="";
options.multiple=true;
var filter = ["displayName","nickname"];
navigator.contacts.find(filter, onSuccess, onError, options);
}
</script>
html partial code:
I chose the zepto-ios version right now. and the problems are:
So sorry to interrupt you and thanks for your 'listening'.
I tested CHUI's Popup Control on my Android device such errors appear below:
CHUI GL ERROR - after deleteUnusedTextures () glError (0x502)
I'm not a fan of extending DOM prototypes because of the issues it has caused libs like PrototypeJS.
See http://perfectionkills.com/whats-wrong-with-extending-the-dom/.
WebKit now has DOM4 mutation method support for append()
, prepend()
, before()
, after()
, replace()
, and remove()
. See https://plus.google.com/u/0/113127438179392830442/posts/KLfpJKLDEsv.
ChocolateChip's added methods conflict and introduce inconsistencies in behavior.
When using tabbar with views the $.UINavigationList array is not updated when the user switch to any view using tabs, this behavior prevents the back button from working correctly.
I think that an example index linked also online it would be wonderful.
An XML microformat setup for ChUI would be wonderful, this is because I am working on producing a Chui app generator(HTMLJS/CSS in a .ZIP), written PHP, taking XML input files. This would work with a Java/Python app which would enable visual app production. This would enable Mass app production complete with native style GUIs, written with the speed of Zepto.
Here is an Example XML App Markup at:
https://raw.github.com/gist/4141100/e7649af12a6b34018f1b35bc94499e40ab4417cc/app.xml
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.