Giter VIP home page Giter VIP logo

mobiscroll's Introduction

Mobiscroll

What is Mobiscroll?

Mobiscroll is a UI library for progressive webapps and hybrid development. Created with a lot of attention to usability and performance. Mobiscroll Forms ships with 15 customizable controls that you can use for free that are included in this repository. For advanced functionality use Forms with:

Where can I use Mobiscroll?

You can use the controls in web and hybrid/native cross-platform apps. At its core Mobiscroll is framework agnostic, but API variants for jQuery/jQuery Mobile, Angular/Ionic, Angular JS/Ionic 1 and React is available.

Elements

Single and multiline text (live example)

Text fields are the backbone of every form. Use them to capture a wide range of properties from plain text to passwords.

Use labels, icons, placeholders or a combination of them to help users get meaning at a glance. Show/hide functionality built in for password fields.

Select styling (live example)

Similar to the single line input styling, it features a chevron/dropdown arrow to clearly signal the difference between select and text input.

Buttons (live example)

Buttons with different states, styles and alignments. Inline or raised, left aligned, right aligned, centered or justified. Full-width buttons supported as well.

Use it with or without icons.

Segmented control (live example)

Easily lay out two to five options for single and multiple select. Making all options instantly visible lets users make selections with a single interaction instead of at least 3 (tap to open select, do the select, hit set - like for the traditional dropdown).

Checkbox and checklist (live example)

Similar to the native checkbox in functionality, but with a look and feel that fits with the overall user experience and theme. Features description text, checkbox list and disabled styling.

Excellent choice for inline multi-select lists.

Radio button list (live example)

Single select for a list of options. Use it instead of the segmented control if there are more items that would fit in a single line.

Usually a good choice for five options and above. Features disabled styling and optional description.

Switch (live example)

Just like the checkbox, the switch lets users turn options on/off. Can be rendered as a list of fields, like the checkbox list or as a stand-alone control.

Features optional description and disabled styling.

Stepper (live example)

When users need to make small adjustments to values by increasing or decreasing it avoid free-form input and dropdowns. Steppers help in minimizing mistakes, and reduce the number of taps for getting the values right.

Page and typography (live example)

Takes care of setting the background colors, spacing and typographic styling. It makes sure that the content you add shows up nicely on any screen-size.

Slider (live example)

Work your way from a monotone, dropdown heavy form to an easily scannable page by switching controls. Consider using sliders for selecting one or multiple values from a range.

Continuous ranges, steps, floating value display, disabled styling and usage with icons is supported out of the box.

Progress (live example)

Provide visual feedback to the user. Reduce anxiety and help people understand progress with the control. You can also use it as a completness meter to show how the user does on completing a purchase.

With a powerful API control the state, value programtically and restart, pause it if you need to.

Alert, confirm and prompt (live example)

Show alert messages, confirmation dialogs and prompt for focused value entry. With a platform-specific look and feel, you can make your users feel at home and communicate what they actually need to see.

These controls cannot be dismissed by pressing the overlay, avoiding closing it by mistake.

Toast and snackbar (live example)

Keep your users up to date with notifications. Either in form of a toast or a snackbar.

You can optionally provide an action with the message - such as UNDO or RETRY - which will help the user make progress faster towards their goal.

Commercial Components

Date & time pickers

Event calendar

Pickers & dropdowns

Pickers & dropdowns

Gesture enabled responsive list

Documentation

For the complete documentation of Mobiscroll Forms and all products, please visit https://docs.mobiscroll.com

Demos and examples

Getting help

The Mobiscroll team does not provide technical support for Mobiscroll Lite. To get support from the team purchase a license or join the community forums

Release notes

For the complete release history and changelog, visit https://mobiscroll.com/releases

Get in touch

Contact https://mobiscroll.com/contact

Twitter http://twitter.com/mobiscroll

Facebook https://www.facebook.com/mobiscroll

License Information

This project has been released under the Apache License, version 2.0, the text of which is included below. This license applies ONLY to the source of this repository and does not extend to any other Mobiscroll distribution or variant, or any other 3rd party libraries used in a repository. For licensing information about Mobiscroll, see the License Agreements page at mobiscroll.com.

Copyright © 2021 Mobiscroll

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

mobiscroll's People

Contributors

amelon avatar andrasz avatar barbeque avatar dahool avatar davidlibrera avatar dioslaska avatar elodkee9 avatar feketegy avatar johnnyshields avatar jonixj avatar jorgefsimoes avatar kaligabriella avatar kovlex avatar lebbe avatar mciparelli avatar miquellaboria avatar paulguo avatar puyt avatar rshadow avatar szily20 avatar yetty avatar zewt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mobiscroll's Issues

Set option on calender instance

Hi,

Maybe I'm not using the method correct, but if I try to set an option on a calendar instance I get the following error: "Maximum call stack size exceeded"


$('input#test', activePage).mobiscroll().calendar();

var maxDate = new Date();
maxDate.setDate( maxDate.getDate() + 14 );
$("input#test").mobiscroll('option', 'maxDate', maxDate);


I'm using:

  1. Jquery + Jquery mobile.
  2. A combined download of Date Time & Calendar

Setting the maxDate does work when using .date() instead of .calendar().
It seems the error occurs on all options set after init.

This example doesn't work either on .calendar();
$("input#valid_until").mobiscroll('option', 'firstDay', 2);

"Maximum call stack size exceeded" when including multiple jqMobi scrollers

I am testing mobiscroll in a jqMobi environment. When I attempt to load more than one scroller (jqMobi version) library I get the following javascript error: "Uncaught RangeError: Maximum call stack size exceeded"

This issue can be reproduced as follows: Download the Datetime scroller and the Select scroller. Copy the select scroller js file into the Datetime sample code js folder. Edit the index file to include the select js file. I am using chrome - open index.html & you will see the error - too many 'a.extend' calls break the stack.

onLoad formatted value?

Hi, I have a permanently displayed date scroller. I'm trying to capture the initial formatted date (i.e. today). There doesn't appear to be a way to retrieve this; at least, I can't find it.

The place I would expect to find it is onShow. But here, the first parameter returns the scroller's div container html, and the instance has val set to null, although values does contain an array of the appropriate values.

Is the formatted value available somewhere?

Work with jQmobi

Thanks a lot for that great tool.
it would be awsome that this plugin support jQMobi.
how?

2.3 bugs

the bugs only exist in mobile phone, not in desktop. my phone is galaxy s2 android 4.0.4 stock browser.
bug 1
the scrolling will stop at middle of two numbers, happened randomly.
bug 2
the changes to the day and month are moved to after animation, but the changes will not happened everytime. I remain using 2.2 as this bug is not there. please allow website to choose download various version.

Feature request: Title on modals

On desktop when a user pressed tab on a mobiscroll (date time scroller) input a MODAL show on their screen with dates without them knowing what is it for. I suggest we put a modal title on modals to make it more user friendly.

Tap ahead

If 3 rows are visible in the scroller, and the user tries to tap on the top or bottom value, the row should scroll into view.

Work with anchors and buttons

First I would also like to thank the authors for building, releasing, and supporting this project. I am actually using a native DatePicker plugin with Cordova/PhoneGap but it will not work with a web version for testing so I hereby use mobiscroll for the web test version.

In my app design, I would rather use JQuery Mobile anchor buttons instead of input fields to show the selected date. The user simply clicks the anchor button to open the date picker. This is working very well with the native DatePicker plugin but unfortunately mobiscroll is always binding to the focus event and never binding to the click event. I tried a quick modification to bind to the click event and it is working. I think some others may find it useful also to bind to anchors and/or buttons, so I raise this enhancement request to make this idea working by configuration.

2.4 fails to set date if wheels in motion

I just tried upgrading from 2.0.3 to 2.4, and noticed that the datetime scroller would occasionally not set the new date after I clicked Set. I eventually figured out when it happens: if the wheel is still moving. To repro, give it a good spin, and click Set while it's spinning. In 2.0.3 it would catch whatever date it was at in its spin. In 2.4, it keeps its original value, as if you had not changed the date.

Feature request : Option to display descending numbers

Hi there,

First of all, thanks for the really good work on mobiscroll.

I was wondering if it could be possible to add a display: 'desc' option, that would display numbers in a descending order ? Seems like my Android 2.1 phone does it this way, I don't really know about other devices and their way of handling wheels. Maybe it could be disturb some users, so the option would be nice !

Thanks !

2.4.1 packaging wp_icons unconditionally

When I go to download 2.4.1 date & time scroller, it lets me pick which platforms and I omit Windows phone. But the zip file contains two .png files which I assume are specific to Windows Phone, wp_icons.png and wp_icons_light.png. I checked the js and css and don't see them referenced so I think I'm safe. Just thought you should know in case you can set these to be conditionally ignored.

Mode bug: clickpick / mixed

Hi all,

1 - If I use mixed mode in adroid and after I click arrow, the value is changing two times. for example if the current value is 24 and after one click on arrow, the value jumps to 26 and it is not possible to select 25 afterwords without scrolling.

2- in clickpick mode if you click arrows on mobiscroll the value is decreasing, but if you do the same on native pickers value is increasing. Is there any way to configure this.

Thanks,
Have a nice weekend

Default theme minified CSS invalid - 2.3

On rails when compiling with SASS, this css fails.

This part is defined like this
li.dw-hl{background #fff;background:rgba(255,255,255,.3)
instead of
li.dw-hl{background:#fff;background:rgba(255,255,255,.3)

It is missing " : " after background and before #fff

Thanks

Incorrect horizontal posiotioning

In the position function all calls that used outerWidth() and outerHeight() without the true parameter returns an object rather than an integer value.

IOS form navigation awareness

Hi guys,

I'm facing a huge UX issue: A have a form with selects field (not handled by mobiscroll) and with some mobiscroll fields based on fields and some simple input fields (not "mibiscrolled"). I'm looking to make mobiscroll more userfriendly. So I added button3 (with float left) and changed the labels of button3 & cancel button (+ the right handlers). But I can't find a transparent way to jump from native previous/next button to a mobiscroll instance.
I always get the keyboard shown for some hundreds milliseconds before to get the mobiscroll shown.

FYI, my mobiscroll instances are some custom "double" wheels.

Any ideas?

onChange event is fired before the animation is completed

This affects directly the user experience because most browsers have a single process that is shared between JavaScript execution and user interface updates and only one operation can be performed at a time.

If I have an onChange event handler that makes a lot of calculations the UI becomes locked.

Cannot set or show 00:30 (for example) in Time Scroller

Hello,

In version 2.4 i am not able to show or set time between 00:00 and 01:00, in time scroller, in clickpick mode.

the scroll passes the hour from 23 to 01,

i tested with demo code and with following options:

theme: 'jqm',
lang: 'pt-BR',
display: 'modal',
headerText: "Fim: {value}",
animate: 'fade',
ampm: 'false',
timeFormat: 'HH:ii',
mode: 'clickpick'

in online documentation i wasn't able to find any solution for this issue.

Thanks in advance

Feature request: CSS3 acceleration.

Hi,

This is a great plugin, but it's kind of small to use on an android/iOS device and there's noticeable lag.
Perhaps adding CSS3 acceleration for compatible mobile/desktop browsers?

Thanks.

infinite wheel

I wonder if it is possible to have an infinite wheel, eg. with an image scroller. So that after the last list entry the first one will show up and vice versa. If it is not possible yet, this should be a feature request

input fields are disabled still onClose…?

I'm probably not in position to say this is really a bug, but I need to be able to have a callback triggered when a date is selected using mobiscroll. The callback serializes the form and posts it. I think it's a bit weird that all input fields are still disabled when onClose is called…?

I posted a question on SO: http://stackoverflow.com/questions/10537411/jquery-form-doesnt-serialize-my-date-field-when-triggered-from-mobiscroll

Sorry to open a issue if this is not a bug. I might just have missed something in the API. Please close this and point me in a direction how I can better achieve what I need!

Thanks,
Viktor

Work independently of JQuery elements

In issue #8 I suggested an enhancement to work with anchors and buttons by making a flexible or intelligent selection of which event(s) to bind to. However, since my project is tied very closely to the native DatePicker from Cordova/PhoneGap, I would like a date/time picker that is very similar for my web test version.

The native DatePicker from PhoneGap provides a function to open the date picker, taking a callback to receive the date that has been selected. This can be an excellent interface for certain other situations, such as GWT which normally does not even deal with JQuery elements.

So far, I have made a version of demo.html in my fork to show some functions that can be used to open the date/time picker, and report by a callback function which date is selected. In this demo, there is a trick where the form elements are kept in a hidden JQuery Mobile page div and the desired behavior with the anchor buttons is shown on the first page div.

This is enough for me to use the mobiscroll in my own project, but I would like to see some enhancements in the future to work better with projects that are not using the default JQuery elements. When I get some spare time, I would like to make some enhancements in my fork that I will propose to the mobiscroll project.

Select preset options are not aligned to the center on Android 2.3.4 LG

System: Android 2.3.4
Device: LG
Model number: LG-P990
Kernel version: 2.6.32.9
LGE Version: LGP990-V20q

Select preset options are not aligned to the center:

I have a select preset with 20 options; the option number 3 has a “very long item text!!!!!!!!!!!!!!”, this cause the other items to be not aligned to the center.

timeWheels order is not honored

The string passed for the timeWheels option does affect which elements are shown, but mobiscroll disregards the order of those elements.

From a user perspective, if mobiscroll shows 11am, and I'd like to select 1pm, I would expect to be able to scroll down on the hours field and see the ampm automatically adjust. Mobiscroll doesn't work that way. The inverse, however, does work... changing the ampm field will affect the hours field. Since this is true, the hierarchy of information seems to be backwards. For me, this gave me the desire to place the ampm field FIRST. The timeWheels option does not allow one to change the order of these elements.

Modernizr and var mod

It seems that there is an error in line 474 of mobiscroll core:

mod = document.createElement('modernizr').style,

argument mod should be replaced by 'mondernizr'.

We discovered this when trying to use stealJS to compress scripts.
For a reason I don't explain, it works when using mobiscroll alone.

Thanks,

Internet explorer 9

There is a visual problem in IE9 that selection of a predefined value control can not round as in iPhone. On the other hand its is okey with firefox and IE10 Beta. It is difficult to round control in touch screens. We have tried in many different computers. It can be easily seen with IE9 environment at http://demo.mobiscroll.com/select/rtlsupport

Thank you

[Android-ICS] Native form element events not prevented

Hi guys,

Here I'm facing a sticky bug for which I can't find a workaround.

I have a form that use some inputs, select and mobiscrolls.

Repro:

  • Zepto
  • on ICS
  • with ICS theme
  • display: bottom
  • some select visible behind the .dwo element.
  • mobiscroll instance show

bug:

  • the select options are disabled but the select still open on tap (even with the dwo (overlay)).

I tried to stop propagation or prevent default on tap on select but it seems to not be applied.

Feature request: arrow and tab key (accessibility)

Hi Mobiscroll, let me start by saying I LOVE your datepicker control.

One request for accessibility purposes, it would be nice if:

  1. Mobiscroll appeared in the standard tab order

  2. You can use TAB or LEFT ARROW to jump to the next dial (e.g. year -> date -> month), or SHIFT+TAB or RIGHT ARROW to jump to previous dial.

  3. You can use DOWN/UP ARROW to increment/decrement by one tick. May want to include an option whether to reverse the y-axis as well.

  4. Bubbles/pop-ups/pop-downs should also be accessible by tab order as well

Cheers!

Can not init datetime for mobiscroll.

  1. First , please set a datetime for a input text,
    For example :
    input id="dateTest" name="dateTest" value="2013-01-03 17:29:28"
  2. Second :
    $("#dateTest").mobiscroll().datetime({
    theme: 'default',
    display: 'modal',
    mode: 'mixed',
    dateOrder:'yyyymmdd',
    dateFormat:'yyyy-mm-dd',
    timeWheels:'HHiiss',
    timeFormat:'HH:ii:ss',
    startYear: new Date().getFullYear() - 10,
    endYear:new Date().getFullYear() + 10,
    showNow:true
    });
    });
  3. When you open the page on your browser and click the input, The Mobiscroll
    will show a time 2003-01-03 17:29:28; It is a error time , because the year is not 2013, but is 2003.

Custom position of the scroller

This is more of an enhancement...

Right now the position of the scroller is set by default to the center of the viewport.

It would be nice to have an additional option for positioning the scroller at the bottom, as it would be on a native iOS app.

Thanks,
Ioana

Button overlap in Kindle Fire HD

The + and - scroll buttons are not hiding the values beneath them on the kindle fire HD.

Appears to only be in a webview.

Settings used:
$(element).scroller({
preset: 'date',
setText: 'Accept',
headerText: headerText,
showLabel: true,
theme: 'default',
display: 'bottom',
mode: 'mixed',
animate: 'slideup',
dateOrder: 'mmddyy',
dateFormat: 'yyyy/mm/dd',
maxDate: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
minDate: new Date(1999, 0, 1)
});

First selected value does not work correctly with just one wheel

Hi,

To reproduce the problem from the subject line:

  1. change the demo example to use just one wheel:

    var group = {};
    var wheels = [group];
    var wheel = {};
    for (var j = 0; j < 100; j++) {
    wheel[j] = j;
    }
    group['Fruit'] = wheel;

    $('#custom').scroller({
    width: 400,
    wheels: wheels
    });

2: for the input field set the default value to empty:

<div data-role="fieldcontain">
    <label for="custom">Custom (Fruits :D)</label>
    <input type="text" name="custom" id="custom" class="mobiscroll" value="" />
</div>

Click on the input (do not scroll), and then just click set. In the input, the value -1 will be set. If you repeat the process, you will get -2, -3, etc.

I'm expecting it to be 0, the first and also selected element from the wheel.

Thanks,
Ioana

work with iscroll

When these two connect the plug-in, because the document is hinged to move the event, there is a bug with the overall scrolls the page (it starts scrolling jerky)

there is bug code:
line 619: $(document).bind(MOVE_EVENT, function (e) { //..

Disable "button" elements on bubble pop-up

I'd like to suggest to disable "button" elements, and possibly "a" elements when the bubble/pop-up mode of Mobiscroll is showing.

The reason is that I have a modal form with a "Cancel" button, and currently a user can click it while Mobiscroll bubble is showing, causing the modal form to close but the Mobiscroll lingers there. I imagine there are many other cases of using Mobiscroll with ajax that yield similar awkward effects.

As a hack, I simply replaced the string "input,select" with "input,select,button" in mobiscroll-2.3.js and it seems to be working as I'd like it.

setDate is not updating the associated input field when set from code

After upgrading from 2.1 to 2.2 the following code is not updating the associated input field.

$('#StartTime').scroller('setDate', d, true);

The associated input field does get updated after the date is selected in the control. But trying to set it from the code using the above command doesn't work.

Work with HTML5 input types

Thanks a lot for that great tool. It would be great that this plugin could use some of the new HTML5 form features (time related input types). It has been a headache to try and see that mobile devices never update the input value, something that desktop browsers did.

Select preset options are not aligned on Android 2.3.4 LG

System: Android 2.3.4
Device: LG
Model number: LG-P990
Kernel version: 2.6.32.9
LGE Version: LGP990-V20q

Select preset options are not aligned:

I have a select preset with 20 options; one option has a “very long item text!!!!!!!!!!!!!!”, this causes the other items to not be aligned.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.