suchen

Heim  >  Artikel  >  Web-Frontend  >  Jquery imitiert IGoogle, um den Beispielcode_jquery für ein ziehbares Fenster zu implementieren

Jquery imitiert IGoogle, um den Beispielcode_jquery für ein ziehbares Fenster zu implementieren

WBOY
WBOYOriginal
2016-05-16 16:38:501190Durchsuche

Man kann sagen, dass Google die Spezialeffekte von Ajax am effektivsten nutzt, z. B. Google Suggest, Google Map, iGoogle Draggable Windows usw. Heute möchte ich eine Website mit ähnlichen Effekten erstellen, und ich habe eine einfache erstellt kleine Demo, die iGoogle nachahmt.

Diese Demo basiert direkt auf einem Jquery-Framework: easywidgets. Dieses Framework steht zum kostenlosen Download unter http://plugins.jquery.com/project/easywidgets zur Verfügung.

Kein Unsinn mehr, posten Sie einfach den Quellcode, damit jeder es lernen kann!
html

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" media="screen" href="css/my.css" rel="external nofollow" rel="external nofollow" mce_href="css/my.css" rel="external nofollow" rel="external nofollow" />
<script type="text/javascript" src="js/jquery.min.js"></script><br /><script type="text/javascript" src="js/jquery-ui.min.js"></script><br /><script type="text/javascript" src="js/jquery.easywidgets.js"></script> <br /><script src="js/example.js" type="text/javascript"></script><br /></head>

<body>
<!--left-->
<div id="left" class="widget-place column1">
<div id="ldiv1" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div> 
</div>

<div id="ldiv2" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div>
</div>
<div id="ldiv3" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div>
</div>
</div>

<!--middle-->
<div id="middle" class="widget-place column2"> 
<div id="mdiv1" class="widget movable collapsable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div class="widget-editbox" style="background:#CC6699" mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼，我加了背景</div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
<div id="mdiv2" class="widget movable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
<div id="mdiv3" class="widget movable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
</div>

<!--right-->
<div id="right" class="widget-place column3">
<div id="rdiv1" class="widget movable"> 
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
<div id="rdiv2" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
<div id="rdiv3" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
</div>
</body>
</html>

CSS

body{
margin: 0;
padding: 0;
background-color: silver;
font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; 
color: #666; 
font-size:20px; 
line-height:150%; 
}
#left{
width: 380px;
height: 100%;
padding: 10px;
position: absolute;
top: 10px;
left: 10px;
border: solid red 2px; 
}
#left .widget {
width: 340px;
height: 150px;
padding; 10px;
margin: 20px;
border: solid red 2px;
background-color: white;
}
#left .widget .widget-header {
width: 340px;
height: 30px;
padding: 0;
margin: 0;
color: red;
position: static;
background-color: gray;
}
#middle{
width: 400px;
height: 100%;
position: absolute;
top:10px;
left: 435px;
padding: 10px;
margin: 0 30px 0; 

border: solid red 2px; 
}
#middle .widget {
width: 360px;
height: 150px;
padding; 10px;
margin: 20px;
border: solid red 2px;
background-color: white;
}
#middle .widget .widget-header {
width: 360px;
height: 30px;
padding: 0;
margin: 0;
color: red;
position: static;
background-color: gray;
}
#right{
width: 380px;
height: 100%;
padding: 10px;
position: absolute;
top: 10px;
right: 10px;
border: solid red 2px; 
}
#right .widget {
width: 340px;
height: 150px;
padding; 10px;
margin: 20px;
border: solid red 2px;
background-color: white;
}
#right .widget .widget-header {
width: 340px;
height: 30px;
padding: 0;
margin: 0;
color: red;
position: static;
background-color: gray;
}

Javascript-Code

$(document).ready(function(){ 
$.fn.EasyWidgets({
i18n : { 
editText : '编辑', 
closeText : '关闭', 
extendText : '展开', 
collapseText : '折叠', 
cancelEditText : '取消' 
}
});
});

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Tipps zum Einfügen von Elementen an bestimmten Positionen an bestimmten Indizes in JS-Arrays_Javascript-TippsNächster Artikel：Tipps zum Einfügen von Elementen an bestimmten Positionen an bestimmten Indizes in JS-Arrays_Javascript-Tipps

In Verbindung stehende Artikel

Mehr sehen