利用jQuery实现CLNDR日历插件



38 149 50



特效描述:利用jQuery实现 CLNDR 日历插件,利用jQuery实现CLNDR日历插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="styles/clndr.css">

2. 引入JS

<script src="js/json2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src= "js/moment-2.2.1.js"></script>
<script src="js/clndr.js"></script>
<script src="js/site.js"></script>

3. HTML代码

  <div class="container">
    <div class="cal1">
    </div>
    <div class="cal2">
      <script type="text/template" id="template-calendar">
        <div class="clndr-controls">
          <div class="clndr-previous-button">&lsaquo;</div>
          <div class="month"><%= month %></div>
          <div class="clndr-next-button">&rsaquo;</div>
        </div>
        <div class="clndr-grid">
          <div class="days-of-the-week">
            <% _.each(daysOfTheWeek, function(day) { %>
              <div class="header-day"><%= day %></div>
            <% }); %>
            <div class="days">
              <% _.each(days, function(day) { %>
                <div class="<%= day.classes %>"><%= day.day %></div>
              <% }); %>
            </div>
          </div>
        </div>
        <div class="clndr-today-button">Today</div>
      </script>
    </div>
  </div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动星星打分 切换按钮 日期时间 时钟 日历 时间 日历插件 时间日期插件 表单 表单美化 表单插件 表单美化插件 其他 时间日期插件 时间日期 按钮控制 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到