Coder Social home page Coder Social logo

itoolkit's Introduction

iToolkit

iToolkit are some Commonly used tools build on Riot Framework, you can only use data to create view, and have similar way to invoke them.
e.g:

<div id="test">
    <tree></tree>
</div>
<script>
    $.ajax({
        url: '/test',
        success: function(data) {
            riot.mount('#test tree', {data: data, root: true});
        }
    })
</script>

中文readme
中文文档
Demo

Table

Table generator:

Demo
HTML:

<table-view>
    <rcol name="city"><a href="<%= desc%>"><%= city%></a></rcol>
    <rcol name="desc" width="100px"></rcol>
    <rcol name="name" alias="姓名"></rcol>
</table-view>

JavaScript:

var tableOpts = {
    data: [
        {city: 'Beijing', name: 'Sherman', desc: 'hehehehehhe'},
        {city: 'Beijing', name: 'Sherman', desc: 'hehehehehhe'},
        {city: 'Beijing', name: 'Sherman', desc: 'hehehehehhe'}
    ]
}
riot.mount('table-view', tableOpts);
riot.mount('rcol');

Handle the table:

JavaScript:

var dom = document.querySelector('table-view');
dom.loadData([{city: 'LuoYang', name: 'mudan', desc: 'It is pretty'}]);  //load new data
dom.appendData({city: 'LuoYang', name: 'mudan', desc: 'It is pretty'}); //append data
dom.deleteData('city', 'LuoYang'); //delete data
dom.clearData();  //clear data
dom.orderData('city'); //order by 'city'
dom.reverseData('city'); //reverse by 'city'

Form

example code:

Demo
HTML:

<super-form action="/test">
    <input name="t1" value="{ data.a }" if="{ data.a==1 }">
    <input name="t2" value="{ data.b }" valid="email">
    <input name="t3" valid="url">
    <input name="t4" value="{ data.b }" max="10">
    <input type="submit" value="submit">
</super-form>

JavaScript:

var formOpts = {
    data: {
        a: 1,
        b: 'hehe'
    },
    callback: function() {
        alert('success');
    },
    errCallback: function(params) {
        alert("error, params:" + params);
    },
    valid: true,
    normalSubmit: false,  //true is normal submit,false is ajax submit.
    submitingText: "submiting..."
}
riot.mount('super-form', formOpts);

Paginate

example code:

Demo
HTML:

<paginate></paginate>

JavaScript:

var pageOpts = {
    count: 50,
    pagesize: 10,
    showNumber: 5,
    callback: function(index) {
        document.getElementById('page-number').innerHTML = index;
    }
}
riot.mount('paginate', pageOpts);

Tree

example code:

Demo
HTML:

<tree></tree>

JavaScript:

var treeOpts = {
    data: [
        {id: 1, pid: null, title: 'root'},
        {id: 2, pid: 1, title: 'item1'},
        {id: 3, pid: 1, title: 'item2'},
        {id: 4, pid: 2, title: 'item3'},
        {id: 5, pid: 1, title: 'item4'},
        {id: 6, pid: 3, title: 'item5'},
        {id: 7, pid: 2, title: 'item6'},
    ],
    root: true,              //must be true
    handleData: true,        //array use true,treeData use false
    name: 'title',           // item name in the data
    onLeftClick: function(item, target) {
        alert('This item\'s id is: ' + item.id);
    }                        //left click callback
}
riot.mount('tree', treeOpts);

Modal

####example code: Demo
HTML:

<modal id="modal-demo">
    <h1>welcome!</h1>
    <p>welcome, king under the montain!</p>
    <p>{ data.desc }</p>
</modal>
<button modal-open-target="modal-demo">open modal</button>

JavaScript:

var modalOpts = {
    height: 300,
    width: 300,
    title: 'Modal demo',
    data: {
        desc: 'My name is xieyu'
    }
}
riot.mount('modal', modalOpts);

###Div ####example code: HTML:

<super-div>
    <h4>{ data.title }</h4>
    <p>{ data.desc }</p>
    <ul>
        <li each="{ data.list }">{ name }</li>
    </ul>
</super-div>

JavaScript:

var divOpts = {
    data: {
        title: 'The Avengers',
        desc: 'The story of super hero save the world.',
        list: [{name: "iron man"},{name: "Hulk"},{name: "American Captain"},{name: "Black widow"},{name:"Eagle Eye"}]
    },
}
riot.mount('super-div', divOpts);

itoolkit's People

Contributors

xieyu33333 avatar

Watchers

 avatar  avatar  avatar

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.