码迷,mamicode.com
首页 > Web开发 > 详细

基于jQuery带备忘录功能的日期选择器

时间:2015-01-30 08:56:24      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

今天给大家分享一款基于jQuery带备忘录功能的日期选择器。这款日期控制带有备记忘录功能。有备忘录的日期有一个圆圈,单击圆圈显示备忘录。该实例适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下:

技术分享

在线预览   源码下载

实现的代码。

html代码:

<div class="container">
        <header class="htmleaf-header">
            <h1>
                jQuery简单带备忘录功能的日期选择器插件</h1>
        </header>
        <div class="calendar-container">
            <div class="calendar">
                <header>
                    <h2 class="month">
                    </h2>
                    <a class="btn-prev fontawesome-angle-left" href="#"></a><a class="btn-next fontawesome-angle-right"
                        href="#"></a>
                </header>
                <table>
                    <thead>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td date-month="12" date-day="1">
                                1
                            </td>
                            <td date-month="12" date-day="2">
                                2
                            </td>
                            <td date-month="12" date-day="3">
                                3
                            </td>
                            <td date-month="12" date-day="4">
                                4
                            </td>
                            <td date-month="12" date-day="5">
                                5
                            </td>
                            <td date-month="12" date-day="6">
                                6
                            </td>
                            <td date-month="12" date-day="7">
                                7
                            </td>
                        </tr>
                        <tr>
                            <td date-month="12" date-day="8">
                                8
                            </td>
                            <td date-month="12" date-day="9">
                                9
                            </td>
                            <td date-month="12" date-day="10">
                                10
                            </td>
                            <td date-month="12" date-day="11">
                                11
                            </td>
                            <td date-month="12" date-day="12">
                                12
                            </td>
                            <td date-month="12" date-day="13">
                                13
                            </td>
                            <td date-month="12" date-day="14">
                                14
                            </td>
                        </tr>
                        <tr>
                            <td date-month="12" date-day="15">
                                15
                            </td>
                            <td date-month="12" date-day="16">
                                16
                            </td>
                            <td date-month="12" date-day="17">
                                17
                            </td>
                            <td date-month="12" date-day="18">
                                18
                            </td>
                            <td date-month="12" date-day="19">
                                19
                            </td>
                            <td date-month="12" date-day="20">
                                20
                            </td>
                            <td date-month="12" date-day="21">
                                21
                            </td>
                        </tr>
                        <tr>
                            <td date-month="12" date-day="22">
                                22
                            </td>
                            <td date-month="12" date-day="23">
                                23
                            </td>
                            <td date-month="12" date-day="24">
                                24
                            </td>
                            <td date-month="12" date-day="25">
                                25
                            </td>
                            <td date-month="12" date-day="26">
                                26
                            </td>
                            <td date-month="12" date-day="27">
                                27
                            </td>
                            <td date-month="12" date-day="28">
                                28
                            </td>
                        </tr>
                        <tr>
                            <td date-month="12" date-day="29">
                                29
                            </td>
                            <td date-month="12" date-day="30">
                                30
                            </td>
                            <td date-month="12" date-day="31">
                                31
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="list">
                    <div class="day-event" date-month="12" date-day="4">
                        <a href="#" class="close fontawesome-remove"></a>
                        <h2 class="title">
                            Lorem ipsum 1</h2>
                        <p class="date">
                            2015-01-23</p>
                        <p>
                            Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
                            varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
                            och blandade dem för att göra ett provexemplar av en bok.</p>
                        <label>
                            <span>Read more!</span>
                        </label>
                    </div>
                    <div class="day-event" date-month="12" date-day="13">
                        <a href="#" class="close fontawesome-remove"></a>
                        <h2 class="title">
                            Lorem ipsum 2</h2>
                        <p class="date">
                            2015-01-23</p>
                        <p>
                            Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
                            varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
                            och blandade dem för att göra ett provexemplar av en bok.</p>
                        <label>
                            <span>Read more!</span>
                        </label>
                    </div>
                    <div class="day-event" date-month="12" date-day="14">
                        <a href="#" class="close fontawesome-remove"></a>
                        <h2 class="title">
                            Lorem ipsum 3</h2>
                        <p class="date">
                            2015-01-23</p>
                        <p>
                            Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
                            varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
                            och blandade dem för att göra ett provexemplar av en bok.</p>
                        <label>
                            <span>Read more!</span>
                        </label>
                    </div>
                    <div class="day-event" date-month="12" date-day="16">
                        <a href="#" class="close fontawesome-remove"></a>
                        <h2 class="title">
                            Lorem ipsum 4</h2>
                        <p class="date">
                            2015-01-23</p>
                        <p>
                            Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
                            varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
                            och blandade dem för att göra ett provexemplar av en bok.</p>
                        <label>
                            <span>Read more!</span>
                        </label>
                    </div>
                    <div class="day-event" date-month="12" date-day="24">
                        <a href="#" class="close fontawesome-remove"></a>
                        <h2 class="title">
                            Lorem ipsum 5</h2>
                        <p class="date">
                            2015-01-23</p>
                        <p>
                            Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
                            varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
                            och blandade dem för att göra ett provexemplar av en bok.</p>
                        <label>
                            <span>Read more!</span>
                        </label>
                    </div>
                    <div class="day-event" date-month="12" date-day="31">
                        <a href="#" class="close fontawesome-remove"></a>
                        <h2 class="title">
                            Lorem ipsum 6</h2>
                        <p class="date">
                            2014-12-31</p>
                        <p>
                            Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
                            varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
                            och blandade dem för att göra ett provexemplar av en bok.</p>
                        <label>
                            <span>Read more!</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

via:http://www.w2bc.com/Article/19446

基于jQuery带备忘录功能的日期选择器

标签:

原文地址:http://www.cnblogs.com/liaohuolin/p/4261467.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!