https://github.com/pedra/control-bar

Simple control bar (top bar) for mobile apps built under Cordova (PhoneGap) or mobile sites. [Português: Simples barra de controle (barra superior) para aplicações móveis construídas sob Cordova (PhoneGap) ou sites para mobile.]
https://github.com/pedra/control-bar

Last synced: 11 days ago
JSON representation

Simple control bar (top bar) for mobile apps built under Cordova (PhoneGap) or mobile sites. [Português: Simples barra de controle (barra superior) para aplicações móveis construídas sob Cordova (PhoneGap) ou sites para mobile.]

• Host: GitHub
• URL: https://github.com/pedra/control-bar
• Owner: pedra
• License: gpl-3.0
• Created: 2018-01-10T15:13:55.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-13T05:48:04.000Z (about 7 years ago)
• Last Synced: 2024-11-27T23:11:58.846Z (2 months ago)
• Language: HTML
• Homepage:
• Size: 53.7 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Control Bar

Simple control bar (top bar) for mobile apps built under Cordova (PhoneGrap) or mobile sites. 

Written in pure javascript (vanilla), no need for JQuery or other Libs, this component generates a bar at the top of the page (or Cordova/PhoneGap mobile app) that can be easily manipulated in javascript.

![Screenshot](https://github.com/pedra/control-bar/blob/master/sqm.png?raw=true)

The **demo.html** tested in:

* Microsoft Edge 41.16299.15.0 - Ok

* Google Chrome 63.0.3239.132 - Ok

* Firefox 57.0.4 - Ok

* Internet Explorer 11.192.162990 - Failed 

        

_The problem in IE is the ```window.scrollY``` (**in demo_more.html, only**) of does not exist, but the "theme change" and "to top" buttons are **Ok**_

## Commands

Defines a function to execute in the onclick action of a button or link:

    ex.: CTRLBAR.link(1,'Home', function(){...})

         CTRLBAR.button('bmn', function(){...})

**hide** / **show** Hide or show buttons or links

    ex.: CTRLBAR.show('nav') - to show ALL buttons.

         CTRLBAR.show('bhm') - to show 'home' button, only. 

The component is initialized with the following options:

```

CTRLBAR = new CTRLBAR([backgroud color], [text color]) 

-- Or --

CTRLBAR = new CTRLBAR 

```

The options *[background color] and [text color]* are default CSS color styles (eg: #FFF or rgba(0,0,0, .8)).