GithubHelp home page GithubHelp logo

easyios / easyios-swift Goto Github PK

View Code? Open in Web Editor NEW
191.0 22.0 57.0 1.14 MB

Swift 2.0 version of EasyIOS,support HTML and FlexBox

License: MIT License

Swift 26.85% Ruby 0.20% C 56.62% Objective-C 16.32%

easyios-swift's Introduction

image

EasyIOS For Swift 2.0

Version License Platform qq

DEMO Video

ScreenShot

Features

flexBox

  • JavaScript and Native Bridge: We can declare the js function in native and call the js function in html
  • DataBinding : We can use the SwiftBond to Bind the data via swift,and use the EZViewModel to Bind the data via html.example {{title}}
  • Reflect Cocoa Touch : Reflect all the Cocoa Touch Api ,we can use the Cocoa Touch Api via HTML
  • AutoLayout : The HTML layout based on the AutoLayout
  • Live Load : Edit the HTML and the view in smulator will update automaticly without rebuild your app
  • Cryptographic HTML : To make the HTML be safety,we provide the AES Encryption to encrypt the HTML
  • URLManager : Push or Present the Controller by the custom URL
  • Elegant PullToRefresh : Add PullToRefresh or InfiniteScrolling by HTML

HTML To Native

  • UITableView With PullReflash
    • align,margin to control the AutoLayout of the UIView
    • pull-to-refresh="handlePullRefresh." ,infinite-scrolling="handleInfinite. PullFooter" to add the PullRefresh or InfiniteScrolling .
    • handlePullRefresh. handle the event by func handlePullRefresh (tableView:UITableView) ,you can define it by yourself.
    • PullFooter can load the custom PullReflashView
<body>
    <div id="tableview" align="64 0 0 0" content-inset="{0,0,0,0}" type="UITableView"  estimated-row-height="100"  separator-style="None" pull-to-refresh="handlePullRefresh()" infinite-scrolling="handleInfinite() PullFooter">
        <div align="0 0 0 0" type="cell" id="cell" ontap-bind="um.push('{{link}}',true)" >
            <img id="avatar" align="10 10 -10 *" clips-to-bounds="YES" width="45" height="45" layer_corner-radius="5" src="{{srcUrl}}" />
            <span align="top:2 avatar;right:-10" margin="left:12 avatar"  font="15 system" id="title">{{title}}</span>
            <span align="bottom:0 avatar;right:-10" margin="left:12 avatar" font="13 system" text-color="#ACACAC" id="subTitle" style="color:#ACACAC;" link-style="color:green;" >{{subTitle}}</span>
        </div>
        
        <div type="section" id="bgView" background-color="#F2F1F6" >
            <span align="left:15;center-y:0" font="14 system">{{title}}</span>
        </div>
    </div>
</body>
  • UIScrollView With CSS and JS
    • Use the CSS by @ for example @contentAlign.
<style>
    .contentAlign{
        edge:0 0 0 0;
    left:0 root;
        right:0 root;
    }
    .inputStyle{
        font-size:15;color:#999999;
    }
</style>
<body>
    <div align="0 0 0 0" type="UIScrollView" background-color="#F3F3F3">
        <div align="@contentAlign">
            <img id="logo" image="login-logo" user-interaction-enabled="YES" ontap="tap()" align="center-x:0;top:110;"/>
            <div id="username" layer_corner-radius="8" background-color="white" align="* 15 * -15" margin="top:30 logo" height="45">
                <input class="userTextField" id="userTextField" align="edge:10 10 -10 -10;" placeholder-style="@inputStyle" keyboard-type="EmailAddress" style="@inputStyle" placeholder="上面的logo可以被点击"/>
            </div>
            <div id="password" layer_corner-radius="8" background-color="white" align="* 15 * -15" margin="top:13 username" height="45">
                <input id="passwordTextField" secure-text-entry="YES" align="10 10 -10 -10" placeholder="密码" placeholder-style="@inputStyle" style="@inputStyle" />
            </div>
            <button id="submit" style="color:white;font-size:20;" background-color="#3FBCFB" align="* 15 -10 -15" margin="top:25 password" height="45" layer_corner-radius="8" onEvent="touch-up-inside:login()">Login</button>
        </div>
    </div>
</body>

<script>
    function tap(){
        um.present('demo://login',true);
    };
    
    function login(){
        var password = document.getElementById("passwordTextField");
        password.attrs({
            placeholder:"hello",
            secureTextEntry:"NO"
        });
        
<!--        var logo = document.getElementById("logo")-->
<!--        password.callWithObject("test:",logo);-->

        console.log(password.val("text"));
    }
</script>
  • HTML Label and reusable html
    • @import(LabelHtml) to import the LabelHtml.xml
    • When span set style="color:#ACACAC;font-size:18px;" node ,we can use the origin html inner the span tag.
<style>
    <!--支持css 样式设置,html中利用@的方式进行调用-->
    .contentAlign{
        edge:0 0 0 0;left:0 root;right:0 root;
    }
</style>

<body>
    <div align="0 0 0 0" type="UIScrollView" background-color="#F3F3F3">
        <div align="@contentAlign">
            <!--span标签设置了style属性则启用富文本模式,span内部可以支持原生HTML的所有属性,具体请看LabelHtml.xml文件-->
            <span align="64 0 0 0" style="color:#ACACAC;font-size:18px;" link-style="color:green;" number-of-lines="0">
                <!--import the xml -->
                    @import(LabelHtml)
            </span>
        </div>
    </div>
</body>
  • UICollectionView with FlowLayout
<body>
    <div id="collectionView" align="0 0 0 0" type="UICollectionView" flow-layout="scroll-direction:Vertical;item-size:{300,50};section-inset:{3,3,0,3};minimum-interitem-spacing:3;minimum-line-spacing:3" content-inset="{64,0,0,0}" background-color="white" pull-to-refresh="handlePullRefresh()" infinite-scrolling="handleInfinite()">
        <div align="0 0 0 0" type="cell"  id="cell"  background-color="red">
            <span align="10 10 -10 -10" font="10 system">{{name}}</span>
        </div>
    </div>
</body>

Declare JS funciton By Swfit

        //定义一个可以给JS调用的下拉刷新回调方法handlePullRefresh()
        define("handlePullRefresh"){
            let delayTime = dispatch_time(DISPATCH_TIME_NOW,
                Int64(3.0 * Double(NSEC_PER_SEC)))
            dispatch_after(delayTime, dispatch_get_main_queue()) {
                tableView?.pullToRefreshView?.stopAnimating()
            }
        }

MVVM

The MVVM based on the Swift binding framework SwiftBond

Bond is a Swift binding framework that takes binding concept to a whole new level - boils it down to just one operator. It's simple, powerful, type-safe and multi-paradigm - just like Swift.

Usage

To run the example project, clone the repo, and run pod install from the Demo directory first.

Requirements

  • Swift
  • IOS8

Installation

EasyIOS-Swift is available through CocoaPods. To install it, simply add the following line to your Podfile:

platform :ios, '8.0'
use_frameworks!
pod 'EasyIOS-Swift', '~> 2.0'

import the EasyIOS

import EasyIOS

Author

zhuchao, [email protected]

License

EasyIOS-Swift is available under the MIT license. See the LICENSE file for more info.

easyios-swift's People

Contributors

rocklau avatar zhuchaowe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

easyios-swift's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.