@author: Ruoyi Chen
E-mail: [email protected]
Please check out the latest version here: https://github.com/NeptunKid/store-locator
DEMO: https://neptunkid.github.io/store-locator/
Repo: https://github.com/NeptunKid/store-locator
History: https://github.com/NeptunKid/store-locator/commits/gh-pages
- Responsive design
- Auto-adjustment when viewing on pc/tablet/mobile browser.
- Search button is shown on pc & larger screens but hidden on tablet and mobile device.
- Show map with markers and list of stores at the same time using toggable tabs.
- Pure css styling: no images were used (except the logo and marker icon :p).
- Dynamic loading of javascript lib of baidu map.
- Ajax (simulated) in store/city/province data pulling.
- Smart draw:
- No drawing of cities haven’t been selected.
- No re-drawing of cities that have already been drawn before.
- Asynchronous loading of multiple js files separates visual and control stages and maximized the overall experience when network is not stable.
- PC Browsers:
- Firefox (latest)
- Google Chrome (latest)
- Safari (latest)
- Opera (latest)
- Internet Explorer 8 and higher
- Others:
- Android Chrome, Firefox
- iOS Safari, Chrome, Wechat embedded browser
- Android Wechat embedded browser (Positioning bugs to be fixed.)
- Editor: VIM - Vi IMproved 7.3
- Environment: iTerm 2.0.0 + Mac OS X Yosemite 10.10.2
- Debug tool: Chrome Developer Tools
- Remote debugging: Real Device. … - -|
- Bootstrap 3 (customized ) Bootstrap css & components & js plugin for grid system layout, dropdown menu.
- jQuery 1.11
- Baidu Map Api 2.0 (大众版)
- Nothing more.
- Refactor js code. Use asynchronous loading for multiple js files and separate dom creation process from event handler binding.
- Fix the bug of positioning on Android Wechat browser (which is evil): dropdown button & menu list & scroll bar not correctly positioned.
- Add shadowed triangles to the bottom of tabs
- Shorten mobile page to fit phone screens (able to be viewed within a single viewport on iPhone6).
- Further polish ui style.
- Dynamically load mobile version of Baidu Map api when detecting useragent to be mobile device.