仿ios侧滑删除插件
2015-10-11 16:56:56 u014074418 阅读数 317


https://github.com/baoyongzhang/SwipeMenuListView


2017-09-20 21:40:08 LosingCarryJie 阅读数 201

今天要介绍的这个库叫做 SwipeDelMenuLayout

1 史上最简单侧滑菜单,0耦合,支持任意ViewGroup

2 一步集成侧滑(删除)菜单,高仿QQ、IOS

首先看下效果

这里写图片描述

侧滑删除库github地址

使用方法如下:

1 导入依赖库

allprojects {
    repositories {
       ....
        maven { url "https://jitpack.io" }  //根目录build.gradle
    }
}
dependencies {
    ...
    compile 'com.github.mcxtzhang:SwipeDelMenuLayout:V1.2.5'//目前最新版本是1.2.5,主项目目录build.gradle
}

2 布局引用

因为一般删除都是侧滑Item,所以需要找到你的item布局文件,举例:

<?xml version="1.0" encoding="utf-8"?>
<!--注意根布局是SwipeMenuLayout -->
<com.mcxtzhang.swipemenulib.SwipeMenuLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <ImageView
            android:id="@+id/icon_in"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>
        <TextView
            android:id="@+id/text_in"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我是艾克"
            android:gravity="center"
            android:textSize="15sp"/>
    </LinearLayout>
    <!--上面是你的item原本的内容-->
<!--下面是你侧滑之后要显示的内容,比如置顶,标记未读,删除等等-->
    <Button
        android:id="@+id/btnDelete"
        android:layout_width="80dp"
        android:layout_height="50dp"
        android:background="#ff0000"
        android:text="删除"
        android:textColor="@android:color/white"/>

</com.mcxtzhang.swipemenulib.SwipeMenuLayout>

剩下的就是写你的删除按钮的逻辑了,这个很简单,就不赘述啦,希望大家喜欢这个库~

2017-06-03 17:38:19 qq_31915745 阅读数 2953

插件库有很多日历插件,但是觉得还是ios自带的样式看着顺眼一些,这里分享一个代码代码及其简洁的日历插件。

直接贴代码啦。


一、效果:     


二、代码:

<body>
点击输入框触发
<input id="demo1">
<script>
    var calendar = new datePicker();
    calendar.init({
        'trigger': '#demo1', /*按钮选择器,用于触发弹出插件*/
        'type': 'date',/*模式:date日期;datetime日期时间;time时间;ym年月;*/
        'minDate':'1900-1-1',/*最小日期*/
        'maxDate':'2100-12-31',/*最大日期*/
        'onSubmit':function(){/*确认时触发事件*/
            var theSelectData=calendar.value;
        },
        'onClose':function(){/*取消时触发事件*/
        }
    });/*这里需要下载一个js包在头部导入即可运行。已经放到我的github上了。
地址:https://github.com/TroubleSeven/app-calendarPlugin*/
</script>

2017-02-17 21:51:54 a525390802 阅读数 780

这款弹出框插件是本人自己模仿IOS原生弹出框写的一个自定义插件,包括Alert弹出框和Confirm确认框,支持标题,内容,按钮文字以及按钮回调函数自定义,使用非常简单,可以进行扩展,下面是插件使用方法,一看就懂:


  • 首先导入jquery库和插件库以及css文件
<script src="./jquery-1.8.3.min.js"></script>
<script src="./jquery.confirm-1.1.js"></script>
<link href="./jquery.confirm-1.1.css" rel='stylesheet' type='text/css' />
  • Alert弹出框快速使用
$.alert('Are you sure to continue?'); --内容支持html代码

$.alert({
    title: 'Alert弹出框!',  --标题 默认标题(温馨提示)
    content: 'Are you sure to continue?',  --内容
});
  • Alert回调弹出框使用
$.alert({
    title: 'Alert回调弹出框!',
    content: 'alert带回调函数,点击确定按钮触发回调函数',
    buttons: {
        ok: {
            text: '好',   --按钮标题
            action: function () {   --回调事件
                 alert("按钮回调函数被执行");
            }
        }
    }
});
  • Confirm确认框使用
$.confirm('Are you sure to continue?');

$.confirm({
    title: 'Confirm确认框!', 
    content: 'Are you sure to continue?', 
});
  • Confirm回调确认框使用
$.alert({
    title: 'Confirm回调确认框!',
    content: 'Confirm确认框,点击按钮触发回调函数',
    buttons: {
        ok: {   --确定按钮
            text: '确定',
            action: function () {
                 alert("确定按钮回调函数被执行");
            }
        },
        close: {   --关闭按钮
            text: '关闭',
            action: function () {
                 alert("关闭按钮回调函数被执行");
            }
        }
    }
});
确认框按钮可以放置多个
  • 效果展示
    弹出窗口效果图

确认弹出框效果图

是不是使用起来非常简单 -_-


下载链接: https://pan.baidu.com/s/1b9Ka9C 提取码: nvp7


2016-08-12 04:29:06 weixin_34318956 阅读数 22

写了个简单的弹窗插件Prompt.js, 效果图如下

clipboard.png

功能: 仿iOS弹出效果, 背景模糊, 可传入的确定和取消回调函数等.

用法:

不带参数调用:
Prompt()

会按照默认参数和回调函数调用

带参数调用:

clipboard.png

目前有四个参数 - 标题(str), 内容(str), 确定回调(function), 取消回调(function). 其中取消回调和标题是可选的, 而内容和确定回调必填.

javascript
Prompt({content: '<span></span>确定取消关注达人?', okCallback:function(){void(0)}, cancelCallback:function(){void(0)}})
按参数自动重载

当没有传入取消回调函数时, 只会显示'确定'按钮.

代码

module.exports = window.Prompt = function(options){
    var cancelFlag = false; 
    var titleFlag = false; 
    if(options){
        options.content||(options.content = 'default content'); 
        options.okCallback||(options.okCallback = function(){
            console.log('ok chosen!'); 
        }); 
        if(options.cancelCallback){
            cancelFlag = true; 
        }; 
        if(options.title){
            titleFlag = true; 
        }; 
    }else{
        var options={
            title:'this is default title', 
            content: 'this is default content', 
            okCallback: function(){
                console.log('ok clicked!'); 
            },
            cancelCallback: function(){
                console.log('cancel clicked!'); 
            }
        }
        cancelFlag = true; 
        titleFlag = true; 
    }; 
    // debugger; 
    var shade = document.createElement('div'); 
    shade.setAttribute('style', 'background-color:rgba(0,0,0,0.6); width:100%; height: 100%; position:absolute; left:0; top:0; z-index:1024;')
    shade.classList.add('shade'); 
    var prompt = document.createElement('div'); 
    prompt.setAttribute('style', 'position:absolute; margin:auto; left:0; right:0; top:0; bottom:0; width:6rem; height:4rem; background-color:#fff; z-index:1025; transition: all .3s ease; box-sizing: content-box; padding: 0.2rem; border-radius: 10px; opacity: 0; '); 
    var innerPrompt = document.createElement('div'); 
    innerPrompt.setAttribute('style', 'height:100%; width:100%; text-align: center; font-size: 0.3rem; '); 
    innerPrompt.classList.add('innerPrompt'); 
    
    if(titleFlag){
        var title = document.createElement('p'); 
        title.innerHTML = options.title; 
        innerPrompt.appendChild(title); 
    }; 
    
    var content = document.createElement('p'); 
    content.innerHTML = options.content; 
    innerPrompt.appendChild(content); 
    
    function modualRemoval(){
        document.body.removeChild(shade); 
        var others = document.querySelectorAll('body > *'); 
        [].forEach.call(others, function(elem){
            if(elem.nodeName != 'SCRIPT'){
                elem.style.webkitFilter = ''; 
            }
        }); 
    }; 

    var buttonWrapper = document.createElement('div'); 
    
    var okBtn = document.createElement('button'); 
    okBtn.innerHTML = '确定'; 
    okBtn.addEventListener('click', function(event){
        options.okCallback(); 
        modualRemoval(); 
        event.stopPropagation(); 
    }); 
    buttonWrapper.appendChild(okBtn); 
    
    if(cancelFlag){
        var cancelBtn = document.createElement('button'); 
        cancelBtn.innerHTML = '取消'; 
        cancelBtn.addEventListener('click', function(event){
            options.cancelCallback();
            modualRemoval(); 
            event.stopPropagation(); 
        }); 
        buttonWrapper.appendChild(cancelBtn); 
    }
    innerPrompt.appendChild(buttonWrapper); 
    
    prompt.appendChild(innerPrompt); 
    shade.appendChild(prompt); 
    document.body.appendChild(shade); 
    setTimeout(function(){
        var others = document.querySelectorAll('body > *:not(.shade)'); 
        [].forEach.call(others, function(elem){
            if(elem.nodeName != 'SCRIPT'){
                elem.style.webkitFilter = 'blur(6px)'; 
            }
        })
        prompt.style.opacity = 1; 
        prompt.style.padding = 0; 
    }, 50); 
    prompt.addEventListener('click', function(event){
        event.stopPropagation(); 
    }); 
    shade.addEventListener('click', function(event){
        modualRemoval(); 
    }); 
}
div.innerPrompt{
    padding: 0.2rem; 
}
div.innerPrompt > p:first-of-type{
    margin-top: 20%; 
}
div.innerPrompt > div{
    position: absolute;
    left:0; 
    bottom: 0; 
    display: -webkit-box; 
    width: 100%; 
    border-bottom-right-radius: 10px; 

}
div.innerPrompt > div > button{
    display: block; 
    -webkit-box-flex: 1; 
    background-color: #fff; 
    border-top: 1px solid #bbb; 
    height: 0.8rem; 
}
div.innerPrompt > div > button:last-child{
    border-bottom-right-radius: 10px; 
    color: #777; 
}
div.innerPrompt > div > button:first-child{
    border-bottom-left-radius: 10px; 
    border-right: 1px solid #bbb; 
    color: red; 
}

你也可以根据你的喜好定制CSS

-EOF-

没有更多推荐了,返回首页