`
liss
  • 浏览: 842897 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

YUI-Calendar

    博客分类：
  • YUI
YUICSSYahooJavaScriptMyeclipse 
阅读更多

一共分为三块，
第一块导入依赖的JS文件和CSS文件；
第二块控件实现的JS代码；
第三块插入到<body>当中的控件，实际就是<div>。
一、首先建立一个工程，导入需要的js文件和css文件,放的地方你自己定。
文件分别为：
yahoo.js
event.js
dom.js
calendar.js
calendar.css
代码如下：

1 <script type="text/javascript" src="js/yahoo.js"></script>
2         <script type="text/javascript" src="js/event.js"></script>
3         <script type="text/javascript" src="js/dom.js"></script>
4         <script type="text/javascript" src="js/calendar.js"></script>
5         <link type="text/css" rel="stylesheet" href="js/calendar.css" />
6         <script>   


二，写控制实现的JS代码
代码如下：

1     <script>    
2         YAHOO.namespace("example.calendar");    
3         function init() {  
4         YAHOO.example.calendar.cal = new YAHOO.widget.Calendar("cal","calendar");    
5         YAHOO.example.calendar.cal.render();
6          }    
7         YAHOO.util.Event.addListener(window, "load", init);    
8       </script>

说明：
    （1）这段代码放首部或body都可以。
     第二行 这里面大家首先看到一个namespce这里必须要的，不是后面的东西找不到。第二行
     第四行    cal和calendar参数的值随便自己取，第二个参数值将要用到第三个模块中。
    第七行 load窗口事件并调用init方法.
三、在body中加入代码

1<div id="calendar"></div>

    我用的是myeclipse,所以点一下文档左下角的preview，日历就出来了！

分享到：
| ExtJS 分页数据表
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    yui-hotel-calendar.rar

    #酒店价格日历 ####基于YUI3开发的价格日历组件 @name：Y.PriceCalendar @requires：['node', 'base-base', 'event-mouseenter']

    yui_2.6.0r2

    - Calendar：日历组件，可以方便地集成到网页中，用于日期选择。 - Drag and Drop：拖放功能，使得用户可以通过鼠标操作移动元素。 - Container：容器组件，用于创建可自定义的容器，如面板、对话框等。 四、性能...

    日历 插件，很丰富的可以随意更改的日历插件，

    现代前端框架如React、Vue或Angular也有专门的库和组件可以方便地集成日历功能，例如`yui-hotel-calendar`可能就是一个基于YUI（Yahoo User Interface Library）的酒店预订日历组件。 `yui-hotel-calendar`可能包含...

    yahoo3.0 YUI　Ｅxamples

    4. **Widget系统**：YUI 3的Widget系统是一套强大的UI组件，包括了如AutoComplete（自动完成）、Calendar（日历）、Accordion（手风琴菜单）等，方便快速构建复杂用户界面。 5. **响应式设计支持**：YUI 3支持响应...

    Yahoo YUI 插件库

    4. **日期和时间选择器**：YUI Calendar组件提供了一个用户友好的日历界面，可以用于日期输入和选择，简化了日期相关的用户交互。 5. **表单验证**：YUI FormValidator插件可以帮助开发者快速实现表单验证，确保...

    yui.zip_YUI aj_ajax_ajax java_javascript_javascript YUI Ajax

    6. **calendar**：日历组件，为Web应用提供日期选择功能。 7. **dragdrop**：拖放模块，让用户能够通过鼠标拖拽元素在网页上移动。 8. **treeview**：树视图组件，用于展示层次结构的数据，常见于导航菜单或文件...

    Yahoo JavaScript库 YUI源码

    8. **Calendar（日历）**：创建交互式日历组件。 9. **DataTable（表格）**：创建可排序、可搜索的表格。 10. **Resize（缩放）**：拖动调整元素大小的组件。 **三、YUI的使用方法** 使用YUI通常包括以下步骤： ...

    yahoo yui控件

    例如，`YUI.Button` 提供了创建和操作按钮的功能，而`YUI.Calendar`则用于创建交互式的日历组件。 3. **事件处理**：YUI的事件系统允许开发者监听和处理DOM元素上的事件，如点击、鼠标移动等，使得用户交互更加流畅...

    jQuery制作简洁漂亮日期日历控件包含多选日期等

    "yui-min.js"可能是一个压缩过的YUI（Yahoo! User Interface Library）库，这是一个全面的前端开发工具集，尽管在本例中，我们主要依赖jQuery，但YUI可能被用作辅助工具，提供额外的功能，如事件处理或DOM操作。 ...

    Jquery Easyui日历组件Calender使用详解（23）

    ”box” class=”easyui-calendar” xss=removed&gt; JS调用加载 &lt;div id=box&gt;&lt;/div&gt; [removed] $(function () { //JS 加载调用 $('#box').calendar({ }); }); [removed] 属性列表 [removed] $(function ()...

    YahooUI Library

    - **Calendar**：日期选择器控件。 - **Charts**：图表绘制工具，支持条形图、折线图和饼图等。 - **Color Picker**：颜色选择器。 - **Container**：一系列窗口样式控件，如 Tooltip、Panel、Dialog 等。 - **...

    javascript实现的淘宝旅行通用日历组件用法实例

    - 需要配合下载`trip-calendar.js`与`trip-calendar.css`文件进行实例演示。 7. 样式定制 - 通过CSS可以定制日历组件的样式，确保其在网页中与现有设计风格一致。 8. 扩展性与兼容性 - 日历组件具有一定的扩展...

    YAHOO UI工具库及使用说明

    6. **用户界面组件**：YUI提供了各种UI组件，如日历（Calendar）、菜单（Menu）、对话框（Dialog）、按钮（Button）、滑块（Slider）等，这些组件可以方便地集成到网页中，提升用户体验。 **二、YUI的模块化特性** ...

    Practical JavaScript, DOM Scripting and Ajax Projects

    Theres something for everyone herea utility library, a validation framework, a GUI widget framework, a dynamic event calendar application, a drag-and-drop shopping cart, and more! Over the course of...

    前端技术之路阿里同学分享

    - **UI组件**: 提供了一套完整的UI解决方案，包括switchable、dialog、overlay、calendar、popup、xbox、validator、select、tab和slide等组件。 #### 五、Widget的设计和实现 在Arale中，Widget被设计成具有清晰...

    AspMaker 8.0 Extensions

    4. **jscalendar.xml**：JSCalendar可能是一个JavaScript日历控件，为Web表单添加日期选择功能，提供用户友好的界面，增加输入数据的便利性。 5. **graphical.xml**：这个名字暗示着一个与图形或图表相关的插件，...

    21个强大的javascript框架.doc

    YUI是Yahoo推出的一系列Web UI控件和工具集合，涵盖了AutoComplete、Button、Calendar、Charts、ColorPicker等多种组件。这些控件不仅功能丰富，而且高度可定制，适用于创建复杂且互动性高的Web应用。此外，YUI还...

    java开源包1

    Spring4GWT GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单，提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏，可在线玩。 public class JVMine extends java...

    java开源包10

    Spring4GWT GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单，提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏，可在线玩。 public class JVMine extends java...

    JAVA上百实例源码以及开源项目源代码

    Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件，EJB来模拟银行ATM机的流程及操作：获取系统属性，初始化JNDI，取得Home对象的引用，创建EJB对象，并将当前的计数器初始化，调用每一个...

Magicbox
Global site tag (gtag.js) - Google Analytics