framework7io / framework7 Goto Github PK
View Code? Open in Web Editor NEWFull featured HTML framework for building iOS & Android apps
Home Page: http://framework7.io
License: MIT License
Full featured HTML framework for building iOS & Android apps
Home Page: http://framework7.io
License: MIT License
I don't know if this is a considered scenario... I tried to put a view
inside a popup
. For now, everything seems all good, except the navbar. At the very beginning, the navbar is invisible, unless any window resize happens (or showNavbar
manually called). What part do you think made the difference?
Нет ли у вас такого по стандарту? Планируется? Или самому искать решение?
I notice from the v0.7.2 commit of dist_rails that the icon image urls are all coming out as
url(../img/*.png)
for the rails builds it should be:
url(../images/*.png)
This can only happen if you're running a version of grunt-contrib-less older than 0.11.0.
My own grunt rails
run against 0.7.2 built correctly.
Hi,
Is there a way to go back to the first page in the navigation history? Kind of similar to the goBack() function?
Hey, I found that there is no switch for slider auto play, should you add this?
Could please give me an example of external linking?
I tried to remove the "link" class thinking that would allow me to link to an outside page. But, this did not work.
First of all, great framework! I'm impressed.
I would like to propose a change in the behavior of pull to refresh. In newer apps made by Apple, you don't have to actually let go to start loading. When you drag down enough it will automatically start the loading, and then you can let go whenever you want.
I think that it's better because it starts the loading earlier and thus makes the app feel more responsive.
This is a killer feature of iOS 7 ui, so we definitely need it:)
Any thoughts on how realize it, perfectly with CSS only.
I discovered pure CSS solution using CSS regions, it works perfect on desktop Safari, but super slow and buggy on iOS, so we need something different.
It is also possible do it with JS by duplicating content, but it is not an option because we will have a lot problems when we need to update content there (in duplicated layers)
Currently in F7, if the user click on a modal-overlay
, the modal would be closed. This is true for almost all modals except alerts, confirms, and prompts.
However, sometimes it's necessary to control whether this happens. Like when you popup a login form to require the user to login.
I think this may be achieved by adding a class like click-to-close
to those modals that need to be closed when clicked. Even just adding a global toggle would be useful.
P.S.
I'm currently trying to use it with AngularJS in a mobile app project. If it's possible, I would like to release some Angular directives and services to accompany F7 in the near future.
Again, thank you for your great job!
I reimplemented the messages component using SVG and inlined the SVG code in CSS. If you're interested in moving in this direction, I could put together a pull request, if not, I won't bother.
I have Settings > General > Accessibility > Bold Text turned on on my iOS devices, so the boldness might not match the typical. I could fix that.
Also, some of the flexbox code isn't correct. I've documented every option of shipping browser's implementation of flexbox (including links to the sources) here: http://ptb2.me/flexbox/ I could help with that, too.
Hey, I found this problem and I don't know how to resolve it.
when I add a phone anchor ''Call Us'' in my page, it caused an XMLHttpRequest error and says cross domain request support only for http.
Hello all. I apologize for bothering you guys, I really do feel like kind of a jackass that I can't seem to figure this out on my own and if it's not too much trouble I have just two questions that I am confident are RTFM answers.
In the readme it is indicated that a server needs to be running in order to use the application to support the ajax calls the app makes. Must this server remain the node.js server, or can I use my existing rails application to power this application? If I am able to use my existing rails app (which would, of course, be highly preferred), how best do I query the application using the Framework7 ajax library?
Regarding deployment, is it safe to consider this framework a non-native web application that is simply amazingly responsive, beautiful, and exactly matches the iOS 7 style? Or is this a framework in the spirit of PhoneGap or Cordova that runs natively on the device?
Again, I am very sorry that these questions seem so inept. It's been a really long few weeks at work and I'm burnt out. I just felt the compelling need to ask because I needed only look at the website for 30 seconds before I realized just how many things I can use this for in my day-to-day that would make my life so much better.
I really appreciate any assistance you can provide! Thank you!
Pierce
It would be really awesome if one can swipe between tabs. An inspiration would be http://ionicframework.com/tutorials/intro-tutorial/.
Here is a possible bug:
If I am viewing a tab and then navigate to another tab and I open a item content-link to another page then go back and visit another tab. Now, if I go back to the tab that has the item-content link then the link doesn't work.
That is a lot to follow so here it is again:
Viewing tab --> Navigate to another tab --> open an item-content link to another page within the tab --> navigate back --> the link doesn't work any more
<li><a href="ios4.html" class="item-link item-content link"> <div class="item-media"><img src="images/icon.png" width="44"/></div> <div class="item-inner"> <div class="item-title-row"> <div class="item-title">Title</div> </div> <div class="item-subtitle">subtitle</div> </div></a></li>
Hey
First of all I have to say this is simply amazing. its basically the best HTML5 framework for building iOS apps. simply brilliant.
I was wondering if it was possible to do scroll bounce and pull to refresh like the native apps have?
Hi, I was confused by this problem when I use framework7, in your kitchen-sink kitchen-sink.js, I tried to added this:
// test page initial on the starter page
if (page.name === 'index') {
console.log("You enter index page");
}
but I never see anything from my console, anyone can help?
It'd be good if we pass xhr
when calling onAjaxStart
so that one could set custom headers for each ajax request.
i try to use todo7 sample app to gingerbread and it is not working?
Please make it pluggable, focus on its strenghts and integrate it with AngularJS and Cordova-iOS, document iPad functionality a bit better and you will see exploding user numbers. Right now, it is an (although very solid) island, because its UI paradigms cannot be easily decoupled from the business logic, e.g. in a databinding-based Angular app.
Cheers,
Sidney
P.S.: Thanks for your great work, your attention to detail in HTML5/CSS3 integration of native UI attributes is inspiring!
cant create connection in mysql db.
The example code needs a div wrapped around panel and view and then some css to take care of x scroll
.app {
width: 100%;
height: 100%;
overflow-x: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="app">
<!-- Views-->
<div class="views">
<!-- Your main view, should have "view-main" class-->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<div class="left">Menu</a></div>
<div class="center sliding">Title</div>
</div>
</div>
<!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through toolbar-through">
<!-- Page, data-page contains page name-->
<div data-page="index" class="page">
<!-- Scrollable page content-->
<div class="page-content">
</div>
</div>
</div>
</div>
</div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
<div class="list-block">
</div>
</div>
</div>
As discussed in #29, here is my tour of what I found slow in the Kitchen Sink. It’s running on an iPhone 3GS, in an “app” pinned to the homescreen, so no Nitro JS engine, really putting Framework7 to stress.
Again, I haven’t looked into the source code. A recurring theme is that elements that need to track touch are the slowest to respond. Those perform better in Safari.
Sorted by descending slugishness, more or less:
Those are really slow when they’re under your fingers: https://www.youtube.com/watch?v=bb15tIcZ_rY
Once released, the animation is okay though: https://www.youtube.com/watch?v=sNUHA_h3YYM
Really slow, and the fact that this element is pretty easily missed by your finger doesn’t help: https://www.youtube.com/watch?v=4N-umyLUQxo
Pretty slow: https://www.youtube.com/watch?v=6_3reKI-Dkc
It looks like it’s a bit less slow when they’re tiny, might just be an illusion though: https://www.youtube.com/watch?v=WKD7snR0vVA
For some reasons, the first one or two pulls are pretty laggy, after that they’re acceptable: https://www.youtube.com/watch?v=JHG7SJEGFiU
I guess you’re aware of this one: https://www.youtube.com/watch?v=qbsCjiilC9g
The known solution is https://github.com/ftlabs/fastclick; but it’s probably not worth it to merge FastClick into Framework7.
The switch feels a bit slow to respond without the nice iOS 7 effects : https://www.youtube.com/watch?v=Nxdz4R71byE
I think setting the border to green (or grey if it’s already checked) on touchstart might do the trick.
Scroll is a bit less responsive than normally, for some reason this is the thing from this list that bothers me the less: https://www.youtube.com/watch?v=WS06O3JoNGo
Regular scrolling in Safari on a simple website, for comparison: https://www.youtube.com/watch?v=M9W3howFo2Q
Hi All,
I'm loading a page called ticket.html?id=101 (ticket.html an F7 sub page/view )
I would like to use the id of 101 to make an API call and load content into the sub page.
But I'm intermediate with javascript and having trouble understanding if can detect the sub page has loaded.
I assume this type of js should go in my my-app.js file. I have been trying to use the sample code but guessing I'm using it for the wrong reasons.
How do is a sub view intercepted so it can manipulated?
Below is my attempt.
// Events for specific pages when it initialized
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// Handle Modals Page event when it is init
if (page.name === 'ticket') {
$$('.page-content').append('----- HERE ------'); // not working
// Get parameters
// API call
// gen dynamic contnet
}
Hey, I found that on my android web browser, the switch form element toggled back when I click it, it seems click fired twice, Is there a way to fixed this?
on ios emulator,i just copy dist code into cordova ios project,and i click the page1 or page2 tab,it does not show the linked page.
but on chrome,it worked.
Hey, I catch this problem. In the kitchen-sink,I include the jquery lib and I add an input with id="txt" in list-view.html, and in kitchen-sink.js, I add the code below
'''
if (page.name === 'list-view') {
console.log("hellow");
$("#txt").blur(function(e){
console.log("hellow");
if($(this).val().trim()===''){
$(this).focus();
myApp.alert("You should input something");
}
});
}
'''
something bad happen, it run into an infinite loop!!
Чтоб на эту страницу можно было дать ссылку другу. Возможно включить такую опцию у вас?
We're trying out a sample integration with this interesting framework -- and we've had to rename all the 'view' and 'view-main' class usages to 'view-f7' and 'view-f7-main'.
The 'view' class is already a frequently used one and was conflicting -- you might consider using a more specific name or allowing the class to be customized on app init.
When I embed F7 into UIWebView it detects device.status bar and adds with-statusbar-overlay class to body and looks like;
But I think I can detect UIWebView and iOS version 7 then change .navbar height
from 44px to 64px and set padding-top:20px;
to navbar-inner then it should be seen like this,
Btw, device.webview = !!navigator.standalone;
returns false in UIWebView. But I able to detect UIWebView by checking User Agent. What do you think?
I tried this framework for memory leak inside pageinit events i use this
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
alert('init');
$$('#test').on('click', function () {
alert("n times")
});
});
the good thing is #test click only trigger once.
Q. where does the garbage collection has beed processed? is it on page change?
The slider pagination when nesting a horizontal slider inside a vertical slider appears as a vertical pagination instead of a horizontal.
The CSS selector for the vertical navigation also targets nested horizontal navigation.
The problematic selector: (slider.less)
.slider-container-vertical .slider-pagination {
}
This will also target .slider-container-vertical .slider-container-horizontal .slider-pagination
Suggestions:
Also: awesome framework :-)
Edit: The problem is not only limited to the navigation posititon, but also to .slider-container-vertical .slider-wrapper and .slider-container-vertical.slider-pagination-bullet
Hey, not really an issue, but I'm wondering if it's possible to open a Popup/Modal by passing a HTML string instead of passing a HTML/DOM object?
Basically, the problem that I'm having is that I'd like to open different popups on different subpages loaded via AJAX, but as far as I can see I can only insert .popup markup into the main page, but not pages that load asynchronically?
Thank you!
Hello all,
Iv been trying to get my head wrapped round this piece of gold for a couple days and its slowly coming together.
I am stuck with one thing though, and even after a blatant copy/paste from kitchen-sink, its not working. I feel kindof bad asking such a simple question here after seeing what you guys talk about but, theres no manual yet and I have to learn this...
Im looking to basically copy kitchen-sink's right panel. Have a item-list which, when clicked, opens the page within the panel...
Here is my code, of just the right-panel obviously:
<div class="pages navbar-through">
<div data-page="panel-right1" class="page">
<div class="page-content">
<div class="content-block">
<p>Right side panel</p>
</div>
<div class="list-block">
<ul>
<li><a href="panel-right2.html" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Right panel page 2</div>
</div>
</div></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END OF PANEL RIGHT -->
This is a well done framework (in the very early stages). However, I decided to use framework7 for one of my projects and I wanted to integrate it with angularJS. The difficulty I faced is combining page transitioning/changing from both frameworks. Angular uses ng-view and Framework7 similarly (with partial html) changes pages except for top navbar and bottom navbar.
Help/Advice on how to control the navigation of pages in Framework7 with AngularJS routes, templates would be very useful.
Thank you.
Hi,
When doing the “swipe from the left of the screen” gesture on my iPhone 3GS, the text looks bad.
I haven’t looked at the source code, but it seems you are using transforms, and translate
transforms work with subpixels value, no rounding. I guess this is the root of the problem.
Looks good: http://image.noelshack.com/fichiers/2014/14/1396356309-image-1.png
Looks bad, blurry: http://image.noelshack.com/fichiers/2014/14/1396356305-image.png
I’m not sure that’s worth fixing though, I guess most users won’t stare at all the animations like I do. :) And non-retina iPhones apparently aren’t really that popular these days anyway and it’s only going to go down from there. But I thought I’d let you know, in case you weren’t aware of this.
In case you’d like to fix that, I think the solution would be to round translateX
to the nearest integer when devicePixelRatio
is 1.
By the way, mandatory congratulations: I’m very impressed with how faithful this is to iOS 7. I didn’t thought this level of fidelity was possible. And I’m on an iPhone 3GS, I thought it would be slow as shit but it’s actually very correct, Kitchen Sink is more responsive than some native apps on this 2009 phone. (If that would be useful, I could open another issue specifying every things that are slow in the kitchen sink on the 3GS).
We need to get closer to iOS animation curves and durations, especially on transitions between pages. Anybody know where can we get correct values or how can we track it?
Just donwloaded, placed files in project directory and from there ran "npm install" and "grunt build". It failed on "grunt build". Here is the error:
----------------------------------------------------------------------->
Running "concat:js" (concat) task
File "build/js/framework7.js" created.
Running "less:build" (less) task
File build/css/framework7.css created.
Running "concat:css_build" (concat) task
File "build/css/framework7.css" created.
Running "jshint:gruntfile" (jshint) task
Gruntfile.js
line 87 col 112 Expected '{' and instead saw 'addIndent'.
line 93 col 26 Expected '{' and instead saw 'return'.
line 117 col 0 Identifier 'css_build' is not in camel case.
line 121 col 0 Identifier 'css_dist' is not in camel case.
build/js/framework7.js
line 30 col 47 Expected '{' and instead saw 'window'.
line 31 col 58 Expected '{' and instead saw 'window'.
line 32 col 55 Expected '{' and instead saw 'window'.
line 88 col 44 Expected '{' and instead saw 'window'.
line 95 col 32 Expected '{' and instead saw 'return'.
line 144 col 44 Expected '{' and instead saw 'return'.
line 166 col 71 Expected '{' and instead saw 'return'.
line 176 col 33 Expected '{' and instead saw 'return'.
line 194 col 108 Expected '{' and instead saw 'cancel'.
line 195 col 79 Expected '{' and instead saw 'cancel'.
line 211 col 38 Expected '{' and instead saw 'touchesDiff'.
line 216 col 56 Expected '{' and instead saw 'activePage'.
line 299 col 38 Expected '{' and instead saw 'app'.
line 388 col 47 Expected '{' and instead saw 'index'.
line 390 col 34 Expected '{' and instead saw 'app'.
line 438 col 50 Expected '{' and instead saw 'return'.
line 524 col 39 Expected '{' and instead saw 'return'.
line 525 col 35 Expected '{' and instead saw 'return'.
line 641 col 39 Expected '{' and instead saw 'return'.
line 699 col 52 Expected '{' and instead saw 'url'.
line 871 col 64 Expected '{' and instead saw 'app'.
line 872 col 56 Expected '{' and instead saw 'params'.
line 902 col 45 Expected '{' and instead saw 'callbackCancel'.
line 905 col 41 Expected '{' and instead saw 'callbackOk'.
line 950 col 34 Expected '{' and instead saw 'buttonsHTML'.
line 953 col 38 Expected '{' and instead saw 'buttonClass'.
line 954 col 37 Expected '{' and instead saw 'buttonClass'.
line 956 col 53 Expected '{' and instead saw 'buttonsHTML'.
line 972 col 59 Expected '{' and instead saw 'app'.
line 973 col 51 Expected '{' and instead saw 'buttonParams'.
line 983 col 60 Expected '{' and instead saw 'return'.
line 1038 col 40 Expected '{' and instead saw 'modalLeft'.
line 1039 col 63 Expected '{' and instead saw 'modalLeft'.
line 1040 col 50 Expected '{' and instead saw 'modalAngle'.
line 1041 col 53 Expected '{' and instead saw 'modalAngle'.
line 1074 col 37 Expected '{' and instead saw 'return'.
line 1091 col 41 Expected '{' and instead saw 'modal'.
line 1113 col 35 Expected '{' and instead saw 'modal'.
line 1114 col 34 Expected '{' and instead saw 'modal'.
line 1128 col 38 Expected '{' and instead saw 'return'.
line 1130 col 65 Expected '{' and instead saw 'return'.
line 1145 col 43 Expected '{' and instead saw 'panel'.
line 1150 col 39 Expected '{' and instead saw 'panel'.
line 1158 col 43 Expected '{' and instead saw 'return'.
line 1177 col 40 Expected '{' and instead saw 'return'.
line 1193 col 52 Expected '{' and instead saw 'return'.
line 1195 col 47 Expected '{' and instead saw 'return'.
line 1215 col 22 Expected '{' and instead saw 'message'.
line 1222 col 22 Expected '{' and instead saw 'message'.
line 1227 col 47 Expected '{' and instead saw 'return'.
line 1227 col 47 Too many errors. (60% scanned).
✖ 55 problems
Warning: Task "jshint:gruntfile" failed. Use --force to continue.
Aborted due to warnings.
Execution Time (2014-03-18 02:09:35 UTC)
loading tasks 417ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 38%
concat:js 12ms ▇ 1%
less:build 302ms ▇▇▇▇▇▇▇▇▇▇▇▇▇ 28%
jshint:gruntfile 355ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 33%
Total 1.1s
Hi, I find that bootstrap scrollspy is very impressive, but I'm not able to move it on f7 apps, I think it is because of scrollspy use id links, say, <a href="#link1". Is there a way to resolve this?
Hello,
I would like to offer you to change viewport scaling. Right now, using 1 as scale moves the sidebar gestures to more 2px at a time. Safari has a bug, in iOS, in retina displays. It doubles the pixel count. Therefore using 0.5 as a scaling will solve this problem, and it will make the swipe gestures and effects run more smoothly.
Proposed replacement is:
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no, minimal-ui">
Also, CSS should change.
Hi, is it possible to change the title of the alert using the basic alert syntax?
app.alert('This is the body.', 'This is the title');
or something like this?
$.getJSON(page, function(data) {
$.each(data, function(key, val) {
if(val==1){
myApp.alert("Success");
window.location.replace("");
}else if(val==0){
myApp.alert('Wrong username and password combination!','Login Failed');
}else{
myApp.alert("System Error");
}
});
i wish to redirect to specific page if return value is 1, i tried to do this window.location.replace("url") and window.location.href but failed
Animations on Nexus5 (Chrome) look very bad (incredibly slow).
Is there a plan to bring back button support to Framework7 (similar to how jQuery Mobile works), as I invariably hit the browser back button and end up on a previous web site?
e.g. I browse as follows:
http://www.google.com
http://localhost:3000/kitchen-sink/ (and click a few links)
No matter what I click on within 'kitchen sink', I remain at URL "http://localhost:3000/kitchen-sink/". When I hit the back button I'm taken to Google.
Would be nice if it acted as follows:
http://www.google.com
http://localhost:3000/kitchen-sink/
http://localhost:3000/kitchen-sink/#/modals.html
(Navigate 'back')
http://localhost:3000/kitchen-sink/
http://localhost:3000/kitchen-sink/#/list-views.html
http://localhost:3000/kitchen-sink/#/list-views/ceo.html
Checkbox looks like a regular checkbox in IE11 and latest version of Firefox. It should look similar like in Chrome and Safari.
Hey,
Is there a specific search bar element I can add? If so, am I able to search a tableview like I can in iOS?
Я выложил версию где такой проблемы нет(там методом тыка я как-то это решил): http://taxi-lite.ru/file/ - этот пример не подходит для решения? У пользователя хочу полностью отобрать возможность заметить что это не нативное приложение)
И не могли бы вы объяснить как всё-таки решается проблема со скроллингом? Искренне благодарен за ваше творение)) Ещё не понятно как сайт iDangero.us связан с вами? Я давно его заметил и поражался возможностями javascript глядя на все представленные модули. Никогда не видел такого применения.
i write a page show messages,in the pageinit method i want ajax call the data service and add message to the page,but it not work,it seem only when the page change the pageinit method will call.
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="center sliding">Message Board</div>
<div class="right"></div>
</div>
</div>
<div class="pages navbar-through">
<div data-page="messages" class="page no-toolbar toolbar-fixed">
<div class="page-content messages-content">
<div class="messages">
<div class="messages-date">
Sunday, Feb 9, <span>12:58</span></div>
<div class="message message-sent">
Message</div>
</div>
</div>
</div>
</div>
</div>
Hey, I add phone call in anchor href link , say href="tel:123456" it causes a XMLHttpRequest problem, how to resolve this ?
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.