按钮

按钮

按钮.btn，小按钮.btn-sm。

背景可选颜色：.bg_blue .bg_green .bg_red .bg_orange .bg_pink .bg_purple .bg_cyan .bg_teal .bg_indigo

文字可选颜色：.blue .green .red .orange .pink .purple .cyan .teal .indigo

按钮宽度：宽度自适应，取决于外层div的宽度。一般配合col-*使用，结构是.row -> .col-*，样式如下：

	<div class="page-content inset">
		<div class="row">
			<div class="cols-30">
				<a href="action.html" class="route btn bg_blue">action</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn bg_green">fsd</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn bg_red">fsd</a>
			</div>
		</div>
		<div class="row">
			<div class="cols-30">
				<a href="" class="btn bg_orange">fsd</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn bg_pink">fsd</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn bg_purple">fsd</a>
			</div>
		</div>
		<div class="row">
			<div class="cols-30">
				<a href="" class="btn bg_cyan">fsd</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn bg_teal">fsd</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn bg_indigo">fsd</a>
			</div>
		</div>
		<div class="row">
			<div class="cols-30">
				<a href="" class="btn red btn-border"><i class="icon btn-icon ion-android-add" style="top: 2px;"></i>fsd</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn green">fsd</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn blue">fsd</a>
			</div>
		</div>
		<div class="row">
			<div class="cols-30">
				<a href="" class="btn pink">fsd</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn orange">fsd</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn purple">fsd</a>
			</div>
		</div>
		<div class="row">
			<div class="cols-30">
				<a href="" class="btn cyan">fsd</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn teal">fsd</a>
			</div>
			<div class="cols-30">
				<a href="" class="btn indigo">fsd</a>
			</div>
		</div>
		<div class="row">
			<div class="cols-50">
				<a href="" class="btn bg_green">fsd</a>
			</div>
			<div class="cols-50">
				<a href="" class="btn bg_red">fsd</a>
			</div>
		</div>
		<div class="row">
			<div class="col-100">
				<a href="" class="btn bg_green">fsdss</a>
			</div>
		</div>
	</div>

同时也支持块状按钮

    <div class="page-content">
        <ul>
            <li>
                <a href="#" class="link_item">
                    <div class="item">
                        <div class="item_center">
                            <div class="item-content">tuiFramework</div>
                            <div class="item_btn bg_red middle">2016-3-12</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="link_item">
                    <div class="item">
                        <div class="item_center">
                            <div class="item-content">tuiFramework</div>
                            <div class="item_btn bg_green middle">2016-3-12</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="link_item">
                    <div class="item">
                        <div class="item_center">
                            <div class="item-content">tuiFramework</div>
                            <div class="item_btn bg_blue middle">2016-3-12</div>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>

actionsheet

actionsheet

actionsheet方法：t.popupAction(popup_id, function(obj){}) 参数1：要弹出的div的id。
参数2：处理弹出后点击按钮的事件，其中obj.action为按钮的名称，用来判断用户点击了哪个按钮。

样式1

    <a id="action1" href="" class="btn bg_teal">action1</a>
            
    <div id="action-modal1" class="popup-action">
        <div class="action-title">
            <div class="center" style="width: 100%">tui framework</div>
        </div>
        <div class="action-btn middle modal-btn">alert</div>
        <div class="action-btn middle modal-btn">cancel</div>
        <div class="action-btn middle modal-btn">config</div>
    </div>
    
    <script>
        t("#action1").click(function(){
            t.popupAction("action-modal1");
            return false;
        });
    </script>

样式2

    <a id="action2" href="" class="btn bg_blue">action2</a>
            
    <div id="action-modal2" class="popup-action">
        <div class="action-title">
            <div class="blue title-btn action-btn middle">取消</div>
            <div class="center">tui framework</div>
            <div class="title-btn blue action-btn middle">完成</div>
        </div>
        <div class="action-content">
            <p>
                fdsajfdsafkjlsdalfkslafjdfdjaslkfd;safdlasjfdsafdsalkfdsafj;dsafjdls;afkdslafdasklf;dsjafjklsafjldsa;jfkldsa;fjdksla;fds123123</p>
            <p>
                fdsajfdsafkjlsdalfkslafjd
                fdjaslkfd;safdlasjfdsa
                fdsalkfdsafj;dsafjdls;afkdsla
                fdasklf;dsjafjklsafjldsa;
                jfkldsa;fjdksla;fds
            </p>
            <p>
                fdsajfdsafkjlsdalfkslafjd
                fdjaslkfd;safdlasjfdsa
                fdsalkfdsafj;dsafjdls;afkdsla
                fdasklf;dsjafjklsafjldsa;
                jfkldsa;fjdksla;fds
            </p>
        </div>
    </div>
    
    <script>
        t("#action2").click(function(){
            t.popupAction("action-modal2");
            return false;
        });
    </script>

样式3

    <a id="action3" href="" class="btn bg_cyan">action3</a>
    
    <div id="action-modal3" class="popup-action">
        <div class="action-title">
            <div class="blue title-btn action-btn middle">取消</div>
            <div class="center">tui framework</div>
            <div class="title-btn blue action-btn middle">完成</div>
        </div>
        <div class="action-select">
            <div class="select-item">
                <ul id="u1">
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                </ul>
            </div>
            <div class="select-item">
                <ul id="u2">
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                </ul>
            </div>
            <div class="select-item">
                <ul id="u3">
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                    <li>fdsafsa</li>
                </ul>
            </div>
        </div>
    </div>
    
    <script>
        t("#action3").click(function(){
            t.popupAction("action-modal3");
            return false;
        });
    </script>

样式4

    <a id="action4" href="" class="btn bg_cyan">透明</a>
    
    <div id="action-4" class="popup-action popup-action-op">
        <div class="action-btn middle modal-btn">alert</div>
        <div class="action-btn middle modal-btn">cancel</div>
        <div class="action-btn middle modal-btn">config</div>
    </div>
    
    <script>
        t("#action4").click(function(){
            t.popupAction("action-4");
            return false;
        });
    </script>

通知

通知

系统通知方法：t.notice(message, onNoticeClick)
参数1：通知内容。
参数2：处理通知点击事件。

    t("#notice").click(function () {
        t.notice("您有新的订单，请查看！", function () {

        });
        return false;
    });

打开应用通知：t.appNoticeOpen (message, noticeClickCallback)
参数1：message通知内容
参数2：通知点击事件
返回：通知的div节点 关闭应用通知：t.appNoticeClose (notice)
参数：notice通知的div节点

    var app_notice = null;
    t("#noticeShow").click(function () {
        app_notice = t.appNoticeOpen("您有新的订单，请注意查看！！！");
        return false;
    });
    t("#noticeHide").click(function () {
        t.appNoticeClose(app_notice);
        return false;
    });

©2018 . Powered by Jekyll, theme by Scott Emmons under Creative Commons Attribution