📄 index.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Easy Widgets jQuery plugin - Example 7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Require basic Easy Widgets style -->
<link rel="stylesheet" type="text/css" media="screen" href="../../styles/jquery.easywidgets.css" />
<!-- Require Easy Widgets style for this sample -->
<link rel="stylesheet" type="text/css" media="screen" href="./example.css" />
<!-- Require jQuery -->
<script src="../../jscripts/jquery.min.js" type="text/javascript"></script>
<!-- Require jQuery UI width draggable stuff -->
<script src="../../jscripts/jquery-ui.min.js" type="text/javascript"></script>
<!-- Require Easy Widgets plugin -->
<script src="../../jscripts/jquery.easywidgets.js" type="text/javascript"></script>
<!-- Require the Javascript for this example -->
<script src="./example.js" type="text/javascript"></script>
</head>
<body>
<h1>
Easy Widgets jQuery plugin - Example 4
</h1>
<p>
A simple widgets style variation. Also note the disposition of the widgets:
firts in one column, but can use the other columns too. Also note that some
widgets can be edit and not others, and some can be removable and not others,
etc. and all appear collapsed by default.
</p>
<!-- Above code not is part of the Easy Widgets plugin HTML markup -->
<!-- Begin Easy Widgets plugin HTML markup -->
<div class="widget-column">
<div class="widget movable collapsable collapse">
<div class="widget-head">
<strong>Title</strong>
</div>
<div class="widget-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut accumsan fringilla turpis. Lorem ipsum dolor.
</div>
</div>
<div class="widget movable collapsable collapse">
<div class="widget-head">
<strong>Title</strong>
</div>
<div class="widget-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut accumsan fringilla turpis. Lorem ipsum dolor.
</div>
</div>
<div class="widget editable collapsable collapse">
<div class="widget-head">
<strong>Title</strong>
</div>
<div class="widget-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut accumsan fringilla turpis. Lorem ipsum dolor.
</div>
<div class="widget-editbox">
Edit the widget here
</div>
</div>
<div class="widget movable removable editable closeconfirm collapsable collapse">
<div class="widget-head">
<strong>Title</strong>
</div>
<div class="widget-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut accumsan fringilla turpis. Lorem ipsum dolor.
</div>
<div class="widget-editbox">
Edit the widget here
</div>
</div>
<div class="widget collapsable removable collapse">
<div class="widget-head">
<strong>Title</strong>
</div>
<div class="widget-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut accumsan fringilla turpis. Lorem ipsum dolor.
</div>
</div>
</div>
<!-- /column1 -->
<div class="widget-column">
</div>
<!-- /column2 -->
<div class="widget-column">
</div>
<!-- /column3 -->
<!-- End Easy Widgets plugin HTML markup -->
<!-- Bellow code not is part of the Easy Widgets plugin HTML markup -->
<div style="clear:both">
<strong>
<a href="../../" title="Back to the examples index">Back to the examples index</a>
</strong>
</div>
<hr />
<div>
Copyrights 2008 <a href="http://www.bitacora.davidesperalta.com/jquery-easywidgets" title="This plugin in my weblog">Easy Widgets jQuery plugin</a> by
<a href="http://www.bitacora.davidesperalta.com/"
title="David Esperalta blog">David Esperalta</a>
</div>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -