index.html

来自「jquery插件。像iGOOGLE主页一样布局自己的网页。很好用」· HTML 代码 · 共 144 行

HTML
144 行
字号 
<!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 4</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>
   This example show the widgets with some style additions. Also show the
   movable, collapsable, removable and editable options in action. Also you
   can mainly view here the plugin callbacks in actions too. See the example.js
   of this example for details.
  </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 removable editable closeconfirm">
    <div class="widget-head">
     <strong>Title</strong>
    </div>
    <div class="widget-editbox">
      Edit the widget here
    </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 class="widget movable collapsable removable editable collapse">
    <div class="widget-head">
     <strong>Title</strong>
    </div>
    <div class="widget-editbox">
      Edit the widget here
    </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 removable editable collapse">
    <div class="widget-head">
     <strong>Title</strong>
    </div>
    <div class="widget-editbox">
      Edit the widget here
    </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 removable editable collapse">
    <div class="widget-head">
     <strong>Title</strong>
    </div>
    <div class="widget-editbox">
      Edit the widget here
    </div>
    <div class="widget-content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Ut accumsan fringilla turpis. Lorem ipsum dolor.
    </div>
   </div>    
  </div>
  <!-- /column2 -->

  <div class="widget-column">
   <div class="widget movable collapsable removable editable">
    <div class="widget-head">
     <strong>Title</strong>
    </div>
    <div class="widget-editbox">
      Edit the widget here
    </div>
    <div class="widget-content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Ut accumsan fringilla turpis. Lorem ipsum dolor.
    </div>
   </div>
  </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>

index.html - 源码说明

本页面展示了「jquery插件。像iGOOGLE主页一样布局自己的网页。很好用」中的 index.html 源码文件，采用 HTML 编程语言编写，共 144 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫开发者社区收录了大量与jQuery相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?