js移動端插件iosSelect.js之頁面中多次使用該插件的問題
iosselect是在webapp下的一個picker組件,可以輕松實現各類選擇器效果。比如地區選擇 時間選擇 日期選擇等。網上教程是很多的,github詳解:https://github.com/zhoushengmufc/iosselect ,好上手,兼容性也不錯,不過還是會有點小問題,這裏要說的是同一個頁面多次調用該插件時出現的問題。
頁面中可能會多次調用該插件,如下圖。
demo裏面有包含頁面中兩次調用該插件的寫法,但是兩次調用使用的數據是一個data。而通常我們兩次調用的數據肯定是不同的,所以就給修改了一下(僅限於一級選擇)。
頁面裏面調用需要修改this指向,另外在調用的數據bank.js裏面的data也要做修改,如下圖
原來是data只是一級數組,裏面包含n多個對象,修改後data數字裏面可以包含n多個數組,數組裏面的數據可以自己定義,和調用次數保持一致。
這樣在同一頁面裏就可以多次調用該插件了。
js移動端插件iosSelect.js之頁面中多次使用該插件的問題
相關推薦
js移動端插件iosSelect.js之頁面中多次使用該插件的問題
.cn 插件 sselect com 自己 his 但是 調用次數 select iosselect是在webapp下的一個picker組件,可以輕松實現各類選擇器效果。比如地區選擇 時間選擇 日期選擇等。網上教程是很多的,github詳解:https://github.
移動端手勢事件 hammer.JS插件
情況 star white tab nal 手指 專家 向上 描述 一、引入hammer.JS 1.下載地址:http://download.csdn.net/detail/webxiaoma/9872249 2.官網地址:http:
js移動端那些事之iosSelect.js
iosselect是在webapp下的一個picker元件,可以輕鬆實現各類選擇器效果。比如地區選擇 時間選擇 日期選擇等。網上教程是很多的,github詳解:https://github.com/zhoushengmufc/iosselect ,好上手,相容性也不錯,
js判斷是否是移動端自動跳轉到wap頁面代碼
lct regex windows port ams spice hone ron per <script type="text/javascript"> function is_mobile(){ var
11-移動端開發教程-zepto.js入門教程
container request net log 全局 鏈式 tag 優勢 實用 Zepto.js是一個輕量級的針對現代瀏覽器的JavaScript庫, 它與jquery有著類似的api。 如果你會用jquery,那麽你也會用zepto。 1. Why Zepto.js
移動端適配--flexible.js
port retina inner 適配 可能 doc event ref first 引言: H5適配一直是一個比較普遍的問題,很多文章都會講,最近開發了一個H5的項目使用了一下淘寶的 flexible.js,寫一篇文章自己總結一下。 一、背景介紹: Flexible.j
原生js移動端字體自適應方案
分辨 span 大小 AI 就是 淘寶二樓 介紹 移動 需要 自從進入新公司之後,就一直采用800的方案,也就是判斷屏幕尺寸,大於800px是一種html字體處理方案,另一種方案是小於800px的html字體處理方案, 代碼如下: 1 (function(doc,
js移動端左右滑動事件
edt efault nbsp ret rip chm width idt touchend 1 <div id="box" style="width:100%;height:100%;border:1px solid red;"></div>
移動端兼容 - faskclick.js
0ms 模塊化 att attach bubuko body fastclick image 分享 fasckclick為解決移動端300ms延遲而生 github地址為:https://github.com/ftlabs/fastclick 使用
vue.js移動端app
什麼是vue-cli? 官方的解釋是:A simple CLI for scaffolding Vue.js projects,簡單翻譯一下,就是: 用簡單的命令列來生成vue.js專案腳手架。 <!-- 全域性安裝vue-cli --> npm install -g vue-cli vu
JS移動端適配(自適應)
ger cti dde rect() ros nts var html fontsize var html = document.querySelector(‘html‘); changeRem(); window.addEventListene
eruda.js 移動端除錯神器使用教程(eruda)
在日常的移動端開發時,一般都是試用chrome瀏覽器的移動端模式進行開發和除錯,只有在chrome除錯完成,沒有問題了才會上到真機測試,移動端開發的一大問題就在於此, 各種品牌各種型號手機,手機中各種型別的瀏覽器APP........還好移動端的相對一致點,但是往往都會有一些各種各
Vux 一個湊合的 Vue.js 移動端 UI 元件庫——Vux示例
在上三篇文章中,提到的都是mint-ui,是因為我第一個用到的就是它,所以就把它先寫出來了。 在工作之餘,發現了vux-ui也是很不錯的,就研究了一下,它的功能和mint-ui差不多,不過在vux-ui裡面多了語言的翻譯,所以弄得很是頭疼,最後花了兩天時間算是弄出來了,但是在語言的切換上還是有點小
什麼是flexible.js 移動端自適應方案
什麼是rem 這個單位代表根元素的 font-size 大小(例如 元素的font-size)。當用在根元素的font-size上面時 ,它代表了它的初始值(譯者注:預設的初始值是html的預設的font-size大小,比如當未在根元素上面設定font-size大小的時候,
重寫移動端滾動條[iScroll.js核心程式碼]
最近寫元件庫的時後,發現這個滾動條是真的醜啊,決定重新擼一個滾動條: 首先咱們回顧一下移動端瀏覽器滾動條特性: 滾動條在開始滾動時漸顯,滾動結束後漸隱 滾動條不佔內容區寬度,懸浮固定 滾動條高度(深灰)和滾動區可視高度(淺灰)比等於滾動區可視高度和滾動目標的高度 當滾動目標的高度小於滾動區
fastclick.js移動端WEB開發,click,touch,tap事件淺析
一、click 和 tap 比較兩者都會在點選時觸發,但是在手機WEB端,click會有 200~300 ms,所以請用tap代替click作為點選事件。singleTap和doubleTap 分別代表單次點選和雙次點選。二、關於tap的點透處理在使用zepto框架的
flexible js 移動端自適應框架
;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewpor
iscroll.js 移動端上拉載入,下拉重新整理功能實現
如下圖所示,我需要做一個上拉載入,下拉重新整理的功能: 首先在 html 中引用這個外掛: <script src="/js/common/iscroll.js"></script> 然後插入我們的資料: <d
【移動端適配方案二 彈性佈局】Flex彈性佈局+rem實現移動端適配(JS+rem+viewport)
前端開發工程師根據UI設計師給的設計稿進行開發。為了保證在各種螢幕上的不失真,就要根據實際螢幕寬度做等比例換算,才能寫進CSS實現如下:1、設定width=device-width 也就是將layout viewport(佈局視口)的寬度設定 為ideal viewport(
移動端rem配置(js動態改變和css @media配置)
一:js動態改變rem(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange'