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

artDialog简单用法

artDialog使用方法jsjavascript弹出层 
阅读更多
今天在网上找了一个弹出层的js工具，感觉这个效果做的很漂亮，而且使用也简单，

刚使用的时候，看了半天demo，也不知道杂用，后来，在网上找了一篇文章，大悟，

然后才明白，如何使用，

顺便贴下那位朋友的博客地址：http://imshare.iteye.com/blog/823859

官网地址：http://www.planeart.cn/demo/artDialog/index.html

我只是说下大致怎么使用，里面有很多用法和效果，请参考下官方的api文档

先说下目录结构吧
我的目录结构是：
dialog
      ---artDialog.js
      ---test.html
      skin
           ---default.css
           ---green.css
           --- ......

然后，在head里引入js文件 
<script src="artDialog.js?skin=default"></script>  
//后面的是指使用default皮肤，当前目录下的skin目录下面



function test(){
    art.dialog({
    content: 'Test artDialog'
});
}



<a href="javascript:" onclick="test();">测试</a>


全文： 
<html>
<head>
<title>test artdialog</title>
<script src="artDialog.js?skin=default"></script>
<script type="text/javascript">
function test(){
   art.dialog({
    content: 'Test artDialog'
});
}
  </script>
</head>
<body>
<a href="javascript:" onclick="test();">测试</a>
</body>
</html>

大家试下效果吧。
分享到：
| Parameter 2 to mysqli_stmt::bind_param() ...
评论
2 楼 w156445045 2012-12-11  
博主，您好，请问为什么我这样做没效果啊？
1 楼 dandelion.yzm 2011-12-29  
<a href="javascript:" onclick="test();">测试</a>   
发表评论

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

相关推荐

    artDialog.js的demo

    这个"artDialog.js的demo"包含了4.15版本的资源，旨在帮助开发者了解和使用artDialog的各种功能。 在提供的文件列表中，我们可以看到以下几个关键文件： 1. **index.html** - 这是示例页面，展示了artDialog的不同...

    artDialog的js,css与事例

    在"artDialog-master"压缩包中的示例文件，通常会包含各种使用场景的实例，比如简单的提示对话框、确认对话框、自定义内容对话框等，这些都是学习和理解ArtDialog功能的好资源。通过阅读和运行这些示例，开发者可以...

    ArtDialog弹窗与API

    本文将深入探讨ArtDialog的核心功能、API用法以及如何在项目中有效地集成和应用。 **1. ArtDialog基本概念** ArtDialog是基于jQuery的一个轻量级弹窗插件，它的主要特点包括响应式设计、多主题支持、丰富的API接口...

    artDialog插件和API详解

    ### 使用方法 基本使用通常包括以下几个步骤： 1. **引入资源**：在HTML页面中引入`artDialog`的JS文件，如`artDialog.source.js`或`jquery.artDialog.js`，以及相应的CSS文件。 2. **调用插件**：通过JavaScript...

    artDialog经典优雅的网页对话框控件

    - **提示信息**：当需要向用户显示警告、错误或成功消息时，可以使用artDialog快速创建一个简单的提示框。 - **确认操作**：在执行可能改变数据的操作前，可以使用对话框询问用户是否确认。 - **表单提交**：在...

    jquery 弹出框插件artDialog

    在实际应用中，ArtDialog的使用步骤通常包括以下几个部分： 1. **引入依赖**：首先需要在页面中引入jQuery库和ArtDialog的JavaScript及CSS文件。 2. **初始化插件**：通过JavaScript代码调用`$.dialog()`方法创建...

    artDialog源码

    3. `demo/`：示例代码，展示了artDialog的各种用法和配置，帮助用户快速理解和使用。 4. `docs/`：文档目录，包含了API介绍和使用指南。 5. `test/`：测试目录，用于验证和确保artDialog的功能正确无误。 **三、...

    artDialog4.1.6

    **使用方法：** 在项目中引入artDialog，通常需要两个文件：JavaScript库（如`artdialog.min.js`）和CSS样式表（如`aui.css`）。然后，可以通过JavaScript调用artDialog的API来创建对话框，例如： ```javascript ...

    artDialog4.1.7

    1. **易用性**：artDialog提供了简洁的API接口，开发者可以快速地创建和配置对话框，无论是简单的提示还是复杂的表单，都能够轻松实现。 2. **可定制化**：组件支持多种皮肤和布局，允许开发者根据网站风格自定义...

    artDialog_Demo

    1. **基本对话框**: `artDialog` 提供了简单的对话框创建方法，可以快速创建带有标题、内容和按钮的基本对话框。例如，通过一行代码`art.dialog({content: 'Hello, artDialog!'})` 就能创建一个包含"Hello, ...

    artDialog例子

    通过`artDialog_Demo`这个压缩包文件，你可以找到这些功能的具体实现示例，通过学习和实践，能够更好地理解和掌握`artDialog`的使用方法。记住，实践是最好的老师，尝试在自己的项目中应用这些知识，以提升用户体验...

    artDialog4.1.5.rar

    **三、使用方法** 1. **引入文件**：首先在页面中引入artDialog的JS和CSS文件，通常包括`artDialog.js`和`skin/artDialog.css`。 2. **初始化对话框**：通过JavaScript调用`art.dialog`方法，传入必要的参数如内容...

    artDialog4.0.4

    1. **index.html**：这是示例或测试页，展示了artDialog的使用方法和效果。 2. **artDialog.source.js** 和 **jquery.artDialog.source.js**：分别是源代码文件，包含了完整的功能实现，对于开发者调试和理解插件...

    artDialog对话框

    本篇文章将深入探讨`artDialog`的核心特性、使用方法以及如何通过提供的资源进行实际应用。 首先，`artDialog`提供了多种皮肤，这使得开发者可以根据项目需求轻松地调整对话框的外观，以满足不同设计风格的需求。...

    artDialog-master

    artDialog的使用方法 在使用artDialog时，首先需要在HTML页面中引入必要的CSS和JavaScript文件，然后通过JavaScript调用artDialog接口创建对话框。基本用法如下： ```html &lt;!DOCTYPE html&gt; ...

    artdialog弹出层

    4. **文档**：可能包含使用指南、API文档或开发者笔记，帮助理解`artDialog`的用法和扩展方法。 通过阅读源码和文档，我们可以学习到`artDialog`的内部结构，例如它是如何管理DOM元素、如何处理用户交互、如何优化...

    弹窗插件artDialog4.1.3

    **使用方法** 使用artDialog4.1.3通常包括以下几个步骤： 1. 引入必要的JS和CSS文件。 2. 初始化对话框，设置标题、内容、宽高等属性。 3. 添加事件监听，如关闭按钮点击事件等。 4. 可选：使用插件或自定义皮肤...

    漂亮的对话框artDialog5 具有10种风格，使用简单

    以下将详细介绍 `artDialog5` 的核心特点、使用方法及应用场景。 1. **自适应内容**： `artDialog5` 支持自适应内容大小，意味着无论对话框内的内容如何变化，它都能自动调整布局，保持良好的显示效果。这在处理...

    artDialog2.0.6，一个漂亮的可以代替alert（）的js特效

    4. **示例丰富**：_demo目录下包含多个示例代码，帮助开发者了解和掌握artDialog的各种用法。 5. **皮肤系统**：skin目录下的皮肤文件，允许开发者轻松更换对话框的外观。 6. **处理IE透明PNG问题**：iepngfix文件...

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