2. 程式人生 > >WEUI應用，用JS封裝常用資訊—ActionSheet

WEUI應用，用JS封裝常用資訊—ActionSheet

阿新 • • 發佈：2019-01-24
$(document).on("click","#showActionSheet",function(){ actionSheetMenu({id:'aa',text:'選單一'},{id:'bb',text:'選單二'},{id:'cc',text:'選單三'}); $('body').on('click','#aa',function(){ alert('選單一'); $('#actionsheet_cancel').trigger('click'); }); $('body').on('click'
,'#bb',function(){ alert('選單二'); }); $('body').on('click','#cc',function(){ location.href="http://www.baidu.com"; }); }); function actionSheetMenu(){ if(!arguments.length){ return; } var menuHtml = ''; for(i=0;i<arguments
.length;i++){ if(typeof(arguments[i]) != 'object' || !arguments[i].id || !arguments[i].text){ continue; } menuHtml += '<div class="weui_actionsheet_cell" id="' + arguments[i].id + '">' + arguments[i].text + '</div>'; } if(!menuHtml){ return
; } var actionSheetMenuStr; actionSheetMenuStr = '\ <div id="actionSheet_wrap">\ <div class="weui_mask_transition" id="mask"></div>\ <div class="weui_actionsheet" id="weui_actionsheet">\ <div class="weui_actionsheet_menu">\ </div>\ <div class="weui_actionsheet_action">\ <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>\ </div>\ </div>\ </div>\ '; if(!$('#actionSheet_wrap').length){ $('body').append(actionSheetMenuStr); } $('.weui_actionsheet_menu').html(menuHtml); $('#mask').show().addClass('weui_fade_toggle'); $('#weui_actionsheet').addClass('weui_actionsheet_toggle'); $('#mask').unbind('transitionend').unbind('webkitTransitionEnd'); $('#mask , #actionsheet_cancel').on('click',function(){ $('#mask').removeClass('weui_fade_toggle'); $('#weui_actionsheet').removeClass('weui_actionsheet_toggle'); $('#mask').on('transitionend webkitTransitionEnd',function(e){ $('#mask').hide(); }); }); }

相關推薦

WEUI應用，用JS封裝常用資訊—ActionSheet

$(document).on("click","#showActionSheet",function(){ actionSheetMenu({id:'aa',text:'選單一'},{id:'bb',text:'選單二'},{id:'cc',text:'選單三'});

weUI應用，用JS封裝了幾個常用的資訊提示的彈層

weUI應用，自己用JS封裝了幾個常用的資訊提示的彈層 測試頁面的程式碼在後面有貼出 幾個彈層如下圖 HTML頁面程式碼： <!DOCTYPE html> <html> <head> <title>weUI-test<

用js驗證輸入資訊，不使用alert,而使提示錯誤的資訊直接出現在輸入框後？在同一行上

在輸入框後新增一個提示資訊標籤。比如 <input type="text" name="username" /><span id="tipun" style="color:red"></span> JS驗證時，把alert部分替換。比如：

怎麽點擊一個按鈕顯示當前的時間，用js 實現

按鈕 點擊 asc utf script doctype tex 當前 一個 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

C++使用libcurl做HttpClient（業務觀摩，用C++封裝過程式代碼，post和get的數據,最好url編碼，否則+會變成空格）good

com 如果 msvc 是否 out tle source rac 無需 當使用C++做HTTP客戶端時，目前通用的做法就是使用libcurl。其官方網站的地址是http://curl.haxx.se/，該網站主要提供了Curl和libcurl。Curl是命令行

jquery.validate不用submit提交，用js提交的怎麽觸發驗證

div content function rep reply validate ida val cli 用 button.click提交 舉例看看 $("#form").validate();$("#btn).click(function(){

前端html列表載入更多效果（預設取出所有資料，用js控制顯示數量，也可以用分頁的形式進行ajax請求，這種暫時木有寫）

程式碼說明，頁面是用freemarker寫的，newsModel.list  是所有的資料；  <ul class="affair_list" pagesize="3">  這句是關鍵 <#if type=='news'> &nbs

動手造輪子，用DownLoadManage封裝一個App的更新元件（相容android 6、7、8）

前言 android app的更新是我們在平時開發的時候常常需要遇到的問題。通常的情況是我們用第三方的網路載入庫去進行地址的下載，然後進行更新。例如okHttp、volley等，都具備了下載的功能。 但是我們在用這些第三方庫進行下載的時候可能需要做很多之外的處理，比如更新的時候處理進度。寫一個notifi

vue專案用js封裝的md5

第一步：封裝好js檔案 export default { md5 (string) { function md5RotateLeft (lValue, iShiftBits) { return (lValue << iShiftBits)

css設定height：100%，用js獲取不到高度值問題

工作中用到的amaze ui的popup中的heigh：100%;在專案中我需要獲取大屏popup的高的具體的畫素值，然而我要說的是，總共有兩點：一、用純js獲取obj.style.height、obg.innerHeight和obj.offsetHeight獲取，    c

載入完頁面後，用js對介面控制元件進行隱藏

方法1：js寫在在head裡的$(function(){});函式裡，會在頁面完全顯示後，再執行此函式，對控制元件進行隱藏，會先看到控制元件，然後再對控制元件進行隱藏。不推薦此方法。方法2：js寫在</body><script type="text/java

不用gif圖，用js+css實現loading效果

   要理解loading的原理，即在文件載入完成之前顯示loading效果，隱藏主文件內容，而在文件載入完成之後，隱藏loading效果，顯示主文件內容。 <!DOCTYPE html> <html lang="zh_CN"> <head&g

h5(H5)下載功能，用JS在瀏覽器中建立下載檔案

轉載：http://www.jb51.net/article/47723.htm 但受限於瀏覽器，很多情況下我們都只能給出個連結，讓使用者點選開啟-》另存為。如下面這個連結： 複製程式碼程式碼如下: <a href=”file.js”>file.js&

王爽 組合語言 實驗7 定址方式在結構化資料訪問中的應用，用棧實現

assume cs:codesg data segment db '1975','1976','1977','1978','1979','1980','1981','1982','1983' db

用js把圖片做的富有動態感，並對以後需要用著的屬性進行封裝

進行 display div lin 圖片 doc 移除 win next 首先我們先要導入幾張圖片（我已導入完畢）： ； 好，我們先寫一個 <div ></div>, 定義一個 class="contair", 在這<div>

使用原生JS封裝Tap事件，解決移動端300ms延遲

itl dia can 開發 閉包 tcl type 移動端 com 為了防止誤操作，移動端iOS操作系統針對原生click事件做了300ms的延遲，這在一定程度上影響了我們的使用體驗。 GitHub項目地址：https://github.com/Simon

原生js實現outerWidth()方法，用到getComputedStyle

turn left func ltview wid nts dst fault 方法 function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[at

更好的實現js數組連接，用到的知識apply.

講解 ber array 方便 this var 但是 ken 兩個 最近做的萬達的一個能源管理平臺中用到了數據連接，當時想都沒想直接寫了一個a.concat(b)。今天在掘金看到了一個優化的方案。是這樣：a.push.apply(a,b);其中a，b分別為兩個數組。仔細一

go語言使用go-sciter創建桌面應用(七) view對象常用方法，文件選擇，窗口彈出，請求

問題 adf img function jquery stdout view type 改變 view對象的詳細文檔請看： https://sciter.com/docs/content/sciter/View.htm demo9.html代碼如下： &l

用vue開發一個app（2，main.js）

.html 第一次用 courier ace 第一次 router -s 提示 新建 昨天跟著vue的官網搭建了vue的一個腳手架，我也是第一次用VUE一切都在摸索階段。 今天試著看下裏面腳手架裏面有點什麽東西 先看看main.js