jQuery日历签到插件葡京签到送彩金

插件相比不难,先来看DEMO吧,http://codepen.io/jonechen/pen/bZWdXq; 

开篇

出人意外发现以来也只有值班才能写东西了,中间更新了两篇其他的断了下商城相关的稿子,仔细看了看此前认为干货太少,前日写点实际的啊,闲说少说商城相关的更新后天勇往直前吧,哈哈。前两篇作品:iOS走近商城APP(一)
,iOS走近商城APP(二
购物车常用控件)
(今日值勤整座楼房一如既往的清静,胆小怪笔者咯-_-、)。

CSS部分:

重点内容

  • 使用WKWebView替换Webview
    WKWebView的html网页的加载方法
    WKWebView突显网页的base页面的包装,点击页面的阻碍方法
    商品详情页页面的自适应布局
  • 货物规格选取框架
    依照内容宽度自适应的框架封装,优化从前介绍的第三方框架带来的标题
*{margin:0;padding:0;font:14px/1.8 "Helvetica Neue","microsoft yahei";}
ul,li{list-style:none;}
body{background: #fff; }
.checkin{margin: auto auto auto auto; }
.clear {clear:both; height:0; overflow:hidden; display:block; line-height:0}
.clearfix:after {clear:both;font-size:0; height:0; display:block; visibility:hidden; content:" "; line-height:0}
.clearfix {zoom:1}/* for IE6 IE7 */
.title{height: 36px;line-height: 36px;font-size: 16px;margin-bottom: 10px;}
.title p{float: left;width: 80%;height: 36px;line-height: 36px;font-size: 16px;}
.title a{display: inline-block;width: 20%;height: 36px;line-height: 36px;text-align: center;background: #42941a;border-radius: 5px;color: #fff;text-decoration: none;font-size: 16px;}
.checkin li{background: #fee684; float: left;padding: 10px;text-align: center;}
li.able-qiandao{background: #e9c530; }
li.checked{background:#fee684 url(http://i2.piimg.com/508767/a9576b09fc014d6e.png) no-repeat center;}
.mask{ width: 100%;height: 100%;position: absolute;top: 0;left: 0; background-color: rgba(0,0,0,0.55);visibility: hidden;transition: all 0.25s ease}
.modal{background:#fff;width: 450px;height: 400px;border-radius: 10px;position: absolute;margin-top: -200px;margin-left:-225px;left: 50%;top: 50%;border:5px solid #42941a;box-sizing:border-box;overflow: hidden;transform: translateY(-200%);transition: all 0.25s ease}
a.closeBtn{display: block;position: absolute;right: 10px;top: 5px;font-family: 'simsun';font-size: 18px;text-decoration: none;font-weight: bolder;color: #333}
.title_h1{text-align: center;font-size: 40px;font-weight: normal;padding-top: 80px;display: block;width: 100%}
.title_h1 span{display: inline-block;width: 40px;height: 40px;border-radius: 100%;background: #42941a;color: #fff;position: relative;float: left;margin-left: 30%;margin-top: 7px;}
.title_h1 span::before{width: 10px;height: 2px;background: #fff;position: absolute;left: 8px;top: 23px;display: block;line-height: 0;font-size: 0;content: ""; transform: rotate(52deg);}
.title_h1 span::after{width: 24px;height: 2px;background: #fff;position: absolute;left: 12px;top: 20px;display: block;line-height: 0;font-size: 0;content: "";transform: rotate(-45deg);}
.title_h1 em{display: inline-block;font-size: 30px;float: left;margin-left: 10px;}
.title_h1 i{display: inline-block;font-size: 16px;float: left;margin: 14px 0 0 10px;}
.title_h2{text-align: center;font-size: 16px;display: block;padding-top: 20px;}
.title_h2 span{font-size: 36px;color: #b25d06;}
.trf{visibility: visible;}
.trf .modal{transform: translateY(0);}

使用WKWebView替换Webview

在杂货店中,使用html网页做彰显页面,商品详情,活动页面再常见不过,往往有不少,可是
Webview大量使用会设有内存暴增,即使用WKWebView就能大大裁减内存,上边就实际介绍一下施用进度,至于WKWebView的法则以及着力的代理那里就不一一列举了,实战出发,哈哈。

  • 活动页Webview的替换

签到页面.png
如图我们点击立即登录和当下签钱,会接触不一样的点击事件,当然在很多其他页面,大家点击网页上的情节还要跳转到软件自身的界面,我们的怎么处理他啊?在老的Webview中大家遵从UIWebViewDelegate的代办方法,然后处理方式如下

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
}

阻挡点击事件,然后再方法中做出处理

  NSString* urlString=[[request URL] absoluteString];
    NSLog(@"%@",urlString);
    NSArray* actionArray=[urlString componentsSeparatedByString:@"-"];
    for (NSString* actionStr in actionArray) {
        if ([actionStr isEqualToString:@"SignNew.StartSign"]) {//跳转签到页面-action
            [webView stopLoading];
            [self gotoSignIn];
        }else if([actionStr isEqualToString:@"Task.TaskDetail"]){//跳转界面

....代码原理同上

        }else if([actionStr isEqualToString:@"Task.TaskList"]){//跳转页面

...代码原理同上

        }

规律就是大家截取到点击事件然后依照后台再次回到的网址举办拍卖,依据网址中差其余字段跳转到大家想要跳转的页面。
在WKWebView中咱们的处理形式如下坚守WKNavigationDelegate代理方法,然后调用方法

#pragma mark - WKWebviewDelegate
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
}

在这些办法中举行上述的拍卖,

   NSString *urlString = [navigationAction.request.URL.absoluteString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

    NSLog(@"%@",urlString);
    NSArray* actionArray=[urlString componentsSeparatedByString:@"-"];
    for (NSString* actionStr in actionArray) {
        if ([actionStr isEqualToString:@"SignNew.StartSign"]) {//跳转页面-action
            [webView stopLoading];

...

        }else if([actionStr isEqualToString:@"Task.TaskDetail"]){//跳转界面

...

        }

在拍卖完跳转逻辑之后记得加上那句代码

    decisionHandler(WKNavigationActionPolicyAllow);//允许跳转

下边再放多少个加载时的合计章程

// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.05 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [SVProgressHUD dismiss];
    });
}
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation
{
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.05 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [SVProgressHUD dismiss];
    });
}
  • WKWebView 商品详情页的自适应布局

货物详情页.png

如图所示,商品详情的时候大家要依照种种商品详情的不比来对她展开自适应的图文布局,他并不像我们的移位页面那么简单,由于数量相比多,内容不稳定由此大家在加载页面的时候要做拍卖(可是那么些一般就不需求做点击交互处理了,哈哈),代码如下

-(WKWebView *)webView{
    if (_webView==nil) {
        NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

        WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:NO];
        WKUserContentController *wkUController = [[WKUserContentController alloc] init];
        [wkUController addUserScript:wkUScript];

        WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
        wkWebConfig.userContentController = wkUController;

        _webView=[[WKWebView alloc] initWithFrame:CGRectZero configuration:wkWebConfig];
        _webView.navigationDelegate = self;
        NSURLRequest* request=[NSURLRequest requestWithURL:[NSURL URLWithString:url]];
        [_webView loadRequest:request];

    }
    return _webView;
}

进入一段JS代码对页面进行布局处理。

HTML部分:

货物详情的框架封装

iOS走近商城APP(二
购物车常用控件)
小说中,大家介绍了一个货品详情布局的控件,纵然有可取,然则也有他的局限性,因为一旦在货物规格相比较单一,且长度较短恐怕固定的时候,是很赏心悦目的,可是一旦大家想要依据差别的基准长度进行自适应,难题就来了,就应运而生了货物浮现不完全的气象,明天放一个在老大版本的基本功上团结又重新打包过的框架吧。效果图如下

端详页布局.png
重点的操作就是优化了依据规则不一,对标签长度以及换行的盘算标准愈来愈的趋向于实际利用。
标签的自适应统计主要代码如下(具体可以看git中的源码):
率先创设系统的函数如下,其功效类似于for in遍历

- (void)enumerateObjectsUsingBlock:(void (NS_NOESCAPE ^)(ObjectType obj, NSUInteger idx, BOOL *stop))block NS_AVAILABLE(10_6, 4_0);

下一场再函数中的处理

  [_filterData.elements enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {

        Btnx += btnGap;

        CGFloat btnWidth = [self WidthWithString:obj fontSize:14 height:BtnHeight];
        btnWidth += 10;//让文字两端留出间距

        if(btnWidth<minBtnLength)
            btnWidth = minBtnLength;

        if(btnWidth>maxBtnLength)
            btnWidth = maxBtnLength;


        if(Btnx + btnWidth > oneLineBtnWidtnLimit)
        {
            BtnlineNum ++;//长度超出换到下一行
            Btnx = btnGap;
        }

        UIButton *button = [[UIButton alloc] init];

        //Y坐标
        CGFloat height = btnGapY+ (BtnlineNum*(BtnHeight+btnGapY));

//        NSLog(@"Y坐标-------------%f",height);

        button.frame = CGRectMake(Btnx, height,
                               btnWidth,BtnHeight );


//此处省略按钮的具体属性的设置

        [button addTarget:self action:@selector(buttonSelected:)
         forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:button];
        [_buttons addObject:button];

        Btnx = button.frame.origin.x + button.frame.size.width + btnGap;

        totalHeight = height; //行高为最大的Y坐标加高度

上边放上一个详实举例的gif效果图。

介绍图2.gif

代码传送门GSFilterView,有用的可以点个星哦。

<div class="checkin"></div>
<div class="mask">
    <div class="modal">
        <a href="#" class="closeBtn">×</a>
        <h1 class="title_h1 clearfix"><em>已签到</em> <i>您已签到2天</i></h1>
        <h2 class="title_h2">您获得现金0.88元</h2>
    </div>
</div>

后记

常规闲扯时间,哈哈,下一篇将写一下runloop在订单列表中的实际行使,获取通信录手机号码以及iOS9与iOS8下的处理等,督促协调一波哈哈。

JS插件部分:

;
(function($) {
    var Checkin = function(ele, options) {
        this.ele = ele;
        this.opt = options;
        this.defaults = {
            width: 450,
            height: 'auto',
            background: '#f90',
            radius: 10,
            color: '#fff',
            padding: 10,
            dateArray: [1, 2, 4, 6], // 假设已签到的天数+1
        };
        this.obj = $.extend({}, this.defaults, this.opt);
    }
    Checkin.prototype.init = function() {
        var _self = this.ele,
            html = '',
            myDate = new Date(),
            year = myDate.getFullYear(),
            month = myDate.getMonth(),
            day = myDate.getDate(),
            weekText = ['日', '一', '二', '三', '四', '五', '六'];
        _self.css({
            width: this.obj.width + 'px',
            height: this.obj.height,
            background: this.obj.background,
            borderRadius: this.obj.radius,
            color: this.obj.color,
            padding: this.obj.padding
        }).append("<div class='title'><p>" + year + '年' + (month + 1) + '月' + day + '日' + "</p><a class=\'checkBtn\' href=\"javascript:;\">签到</a></div>");
        $("<ul class='week clearfix'></ul><ul class='calendarList clearfix'></ul>").appendTo(_self);
        for (var i = 0; i < 7; i++) {
            _self.find(".week").append("<li>" + weekText[i] + "</li>")
        };
        for (var i = 0; i < 42; i++) {
            html += "<li></li>"
        };
        _self.find(".calendarList").append(html);
        var $li = _self.find(".calendarList").find("li");
        _self.find(".week li").css({
            width: (_self.width() / 7) + 'px',
            height: 50 + 'px',
            borderRight: '1px solid #f90',
            boxSizing: 'border-box',
            background: '#b25d06'
        });
        $li.css({
            width: (_self.width() / 7) + 'px',
            height: 50 + 'px',
            borderRight: '1px solid #f90',
            borderBottom: '1px solid #f90',
            boxSizing: 'border-box',
            color: "#b25d06"
        });
        _self.find(".calendarList").find("li:nth-child(7n)").css('borderRight', 'none');
        _self.find(".week li:nth-child(7n)").css('borderRight', 'none');
        var monthFirst = new Date(year, month, 1).getDay();
        var d = new Date(year, (month + 1), 0)
        var totalDay = d.getDate(); //获取当前月的天数
        for (var i = 0; i < totalDay; i++) {
            $li.eq(i + monthFirst).html(i + 1);
            $li.eq(i + monthFirst).addClass('data' + (i + 1))
            if (isArray(this.obj.dateArray)) {
                for (var j = 0; j < this.obj.dateArray.length; j++) {
                    if (i == this.obj.dateArray[j]) {
                        // 假设已经签到的
                        $li.eq(i + monthFirst).addClass('checked');
                    }
                }
            }
        }
        //$li.eq(monthFirst+day-1).css('background','#f7ca8e')
        _self.find($(".data" + day)).addClass('able-qiandao');
    }
    var isChecked = false;
    Checkin.prototype.events = function() {
        var _self = this.ele;
        var $li = _self.find(".calendarList").find("li");
        $li.on('click', function(event) {
            event.preventDefault();
            /* Act on the event */
            if ($(this).hasClass('able-qiandao')) {
                $(this).addClass('checked');
                modal(_self);
                isChecked = true;
            }
        });
        var checkBtn = _self.find(".checkBtn");
        checkBtn.click(function(event) {
            modal(_self);
            _self.find('.able-qiandao').addClass('checked');
            isChecked = true;
        });
    }
    var modal = function(e) {
        var mask = e.parents().find(".mask");
        var close = e.parents().find(".closeBtn");
        if (mask && !isChecked) {
            mask.addClass('trf');
        } else {
            return
        };
        close.click(function(event) {
            event.preventDefault();
            mask.removeClass('trf')
        });
        e.parents().find('.checkBtn').text("已签到");
    }
    $.fn.Checkin = function(options) {
        var checkin = new Checkin(this, options);
        var obj = [checkin.init(), checkin.events()]
        return obj
    }
    var isArray = function(arg) {
        return Object.prototype.toString.call(arg) === '[object Array]';
    };
})(jQuery);
// 插件调用
$(".checkin").Checkin();
// 元素居中显示,与插件无关,根本自己需要修改;
$(".checkin").css('marginTop',parseInt(($(window).innerHeight()-$(".checkin").outerHeight())/2)+'px');