diff options
| author | Chi Cheng <cloudream@gmail.com> | 2008-08-16 14:37:44 +0000 |
|---|---|---|
| committer | Chi Cheng <cloudream@gmail.com> | 2008-08-16 14:37:44 +0000 |
| commit | 4f55751d8ac2c0cf24dd89790e2f53cd1c96a571 (patch) | |
| tree | 73d38996c294db99a4f40c2daf37345bffb3ef96 /demos/real-world | |
| parent | dab4c2b56419ec704dfafda34c73d9c526fafdfa (diff) | |
| download | jquery-ui-4f55751d8ac2c0cf24dd89790e2f53cd1c96a571.tar.gz jquery-ui-4f55751d8ac2c0cf24dd89790e2f53cd1c96a571.zip | |
demo: #3185
Diffstat (limited to 'demos/real-world')
| -rw-r--r-- | demos/real-world/photo-manager/img/slider-bg-2.png | bin | 0 -> 326 bytes | |||
| -rw-r--r-- | demos/real-world/photo-manager/img/slider-handle.gif | bin | 0 -> 176 bytes | |||
| -rw-r--r-- | demos/real-world/photo-manager/index.html | 19 | ||||
| -rw-r--r-- | demos/real-world/photo-manager/js/demo.js | 20 | ||||
| -rw-r--r-- | demos/real-world/photo-manager/theme/css/screen.css | 4 |
5 files changed, 41 insertions, 2 deletions
diff --git a/demos/real-world/photo-manager/img/slider-bg-2.png b/demos/real-world/photo-manager/img/slider-bg-2.png Binary files differnew file mode 100644 index 000000000..8b24cf091 --- /dev/null +++ b/demos/real-world/photo-manager/img/slider-bg-2.png diff --git a/demos/real-world/photo-manager/img/slider-handle.gif b/demos/real-world/photo-manager/img/slider-handle.gif Binary files differnew file mode 100644 index 000000000..9b89f2664 --- /dev/null +++ b/demos/real-world/photo-manager/img/slider-handle.gif diff --git a/demos/real-world/photo-manager/index.html b/demos/real-world/photo-manager/index.html index de2fc0893..889f0fce0 100644 --- a/demos/real-world/photo-manager/index.html +++ b/demos/real-world/photo-manager/index.html @@ -15,9 +15,20 @@ <script type="text/javascript" src="../../../ui/ui.core.js"></script> <script type="text/javascript" src="../../../ui/ui.draggable.js"></script> <script type="text/javascript" src="../../../ui/ui.droppable.js"></script> + <script type="text/javascript" src="../../../ui/ui.slider.js"></script> <script type="text/javascript" src="./js/demo.js"></script> + <style type="text/css" media="all"> + .ui-slider { width: 200px; height: 23px; position: relative; background-repeat: no-repeat; background-position: center center; } + .ui-slider-handle { position: absolute; z-index: 1; height: 23px; width: 12px; top: 0px; left: 0px; background-image: url(img/slider-handle.gif); } + .ui-slider-handle-active { border: 1px dotted black; } + .ui-slider-disabled .ui-slider-handle { opacity: 0.5; filter: alpha(opacity=50); } + .ui-slider-range { position: absolute; background: #50A029; opacity: 0.3; filter: alpha(opacity=30); width: 100%; height: 100%; } + .ui-slider, .ui-slider-1 { background-image: url(img/slider-bg-1.png); } + .ui-slider-2 { background-image: url(img/slider-bg-2.png); clear:both} + .nominheight{min-height:20px;} + </style> <link rel="stylesheet" type="text/css" href="./theme/css/screen.css" media="screen, projection" /> </head> <body> @@ -109,6 +120,14 @@ </ul> </div> <div id="sidebar"> + <div class="box2" id="resize"> + <h2>Resize images</h2> + <div style="margin: 5px; padding: 5px;min-height:20px" class="ui-slider-2 ui-slider" id="sliderSize"> + <a style="cursor: default;" href="javascript:void(0)"> + <div class="ui-slider-handle" style="left: 150px;min-height:20px"></div> + </a> + </div> + </div> <div class="box" id="trash"> <h2>Trash (drag me back)</h2> <div></div> diff --git a/demos/real-world/photo-manager/js/demo.js b/demos/real-world/photo-manager/js/demo.js index fac91ca1c..9abc039bb 100644 --- a/demos/real-world/photo-manager/js/demo.js +++ b/demos/real-world/photo-manager/js/demo.js @@ -117,6 +117,26 @@ $(window).bind('load', function() { .displayBox(); return false; }); + + + var sliderChange = function(e, ui){ + $('.img_content').each(function(index, item){ + var _new = 1.44 * $('#sliderSize').slider("value"); + + $(this).css("width", _new+'px') + .parent().css("width", (_new+16)+'px'); + + }); + } + $('#sliderSize').slider({ + startValue : 100, + min : 50, + max : 100, + stepping : 5, + slide : sliderChange, + change : sliderChange + }); + }); function createGalleryItem(img) { diff --git a/demos/real-world/photo-manager/theme/css/screen.css b/demos/real-world/photo-manager/theme/css/screen.css index 3866beb8e..3a51f70e1 100644 --- a/demos/real-world/photo-manager/theme/css/screen.css +++ b/demos/real-world/photo-manager/theme/css/screen.css @@ -116,12 +116,12 @@ h1 { ---------------- =SIDEBAR ---------------- */ -.box { +.box, .box2 { margin: 18px; border: 1px solid #ccc; background: #fff; } -.box h2 { +.box h2, .box2 h2 { padding: 0 8px; margin: 0; font-size: 1.5em; |
