Mobiscroll 2.0 RC1

Hi Everyone! This will be the first post on the mobiscroll blog, and we’re gonna start with the anticipated 2.0 release.

We were really busy working on the new version of mobiscroll which will be the most packed release yet!

After seeing how mobiscroll is being used, we’ve been thinking about how we can make it better, more useful and easier to set up.
Processing the feedback we got from the development community we realized we should break up mobiscroll a little bit to be more lightweight and more modular.
So we decided to to take the following approach…

Core

The scroller core is a standalone downloadable in 2.0.
It’s much more smaller and more compact. And the best thing it’s decoupled from the presets and configuration.

Presets

The core can manage one or more presets.
This plugin system enables us and community to expand on the mobiscroll core and build awesome presets ranging from different scroller pickers to dropdowns, image scrollers…. Whatever you can imagine.

Themes

The third building block is the skinning and theming functionality.
You can manage one or more themes which can have CSS and javascript descriptions. The same thig here too. There are infinite possibilities for customizing your mobiscroll.
This is a major change for mobiscroll. It opens new possibilities. It’s not just about a date and time picker for touch devices, but a fully customizable scroller.

The changelog for the 2.0 RC1

Structural changes

Mobiscroll has now a modular structure. The core contains the wheel generation and scrolling logic. The core can be extended by presets. Presets are basically a collection of predefined settings, which are passed to the core, but may contain other initialization logic, which is executed when the scroller instance is created.

Currently you can include the ‘date’, ‘time’, ‘datetime’ and ‘select’ presets.

Themes are now also modular, css styles are in separate files for each theme. Themes may have an optional javascript file, where default settings can be set, and an optional init function as well.

Removed

  • Removed: beforeShow event is now removed
  • Removed: showValue option is now removed, use the headerText option instead
  • Removed: btnClass option is now removed, button style can be changed by adding css rules to the .dwb class

Bugfixes

  • Fixed: Android ICS Light skin fix (small +/- appeared above/under arrows)
  • Fixed: onSelect and onCancel events are now called after the popup is closed and all the form elements on the page are re-enabled, making possible to submit the form in these events.
  • Fixed: In custom events this refers to the original HTML DOM element instead of the settings object

Enhancements

  • Changed: The visibility of year, month and day wheels is now controlled by dateOrder option, e.g. use ‘mmyy’ to display month and year wheels only
  • Added: display option, which can be ‘inline’ or ‘modal’ (default)
  • Added: headerText option to specify a custom string which appears in the popup header. If the string contains ‘{value}’ substring, it is replaced with the formatted value of the scroller. If headerText is set to false, the header is hidden.
  • Added: onShow event
  • Added: delay option to specify the speed in milliseconds to change values in clickpick mode with tap & hold, default is 300 ( Issue 68 )
  • Added: jQuery Mobile theme, set theme option to ‘jqm’
  • Added: ‘select’ preset to enhance a regular HTML select. The original select is hidden, and a dummy input is visible instead. The value of the select is maintained by the preset
  • Added: minDate and maxDate options to specify a range which can be selected. Works for datetime as well.

 

We encourage everybody to play with it, and let us know if you find any bugs or if there are any issues!
You can grab the latest release from http://download.mobiscroll.com
Documentation is at http://docs.mobiscroll.com
Stay tuned for more info and make sure you subscribe to the blog.
Happy scrolling!
  • Mackie

    I wanted to start a JQM inline implementation today. You saved me so much time. Great work!
    Donation is on the way. :-) 

    • kovlex

      Cheers! If you’re using it with JQM, check out the theme integration.

  • http://appletite.tumblr.com/ Alex

    Your documentation is horrible. In no way shape or form do you make it clear how to implement this into a website. 

    I included the js file. I included the css file. I called the script with $(‘#scroller’).scroller();

    Now what? How the hell does this work?

    • kovlex

      By default the scroller is tied to an input. Create an input with id=”scroller”, and call the $(‘#scroller’).scroller(); in the document ready function. You should be good.

      • http://appletite.tumblr.com/ Alex

        Can I load the .scoller() function as part of a callback function on a .load() command? Or do both the input and the script have to be in the DOM at load time?

        Can the ID of the jQuery object be called whatever I want? Or does it have to be named “#scroller” for it to work with the default settings?

        • kovlex

          The scroller pops up in a modal box when clicked on the input. That’s the basic functionality.
          However it can be displayed inline (in a div) without an input.

          You can tie it to any input, with any ID, but you have to initialize the scroller for that ID.

          For examples see http://demo.mobiscroll.com (modal/inline mode…)

      • http://appletite.tumblr.com/ Alex

        You said by default it’s tied to an input. Could I easily tie it to a div without having to change any settings?

      • http://appletite.tumblr.com/ Alex

        I got it working. Thanks for your help! And sorry for my annoying questions! haha I am a n00b  :-P

    • K’shin

      @Alex, check out the source of the demo page, all will be revealed!

  • Dean

    What versions of jQuery is this compatible with?

    • Istvan Halmen

      Requires jQuery >= 1.6

  • downpour

    I’ve only had a quick look at this… but one addition I could see being useful, would be the day of the week displayed next to the selected day. Like this…

    Fri 27 Apr 2012

    The downside is you would have to automatically update the day when you changed the month or year.

    • downpour

      Never mind, I got round it by adding an onChange function to the list of options in the scroller’s initialisation. 

  • Christian Mölders

    A great plugin, thanks mates!

    However I have found an issue using the scroller and jQM. The scroller should  display inline on a new page. The initialization is when the pageinit-event fired.
    The wheels apears among each other instead of side by side.

    Have a look at http://jsfiddle.net/23DQQ/5/ and click the button below to change to the page with the scroller.

    Maybe you can post a solution.

  • Pingback: Mobiscroll 2.0 RC2 is out | Mobiscroll Blog