2013-05-29 / JSN / 0 Comments / 2,586 次瀏覽
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$("a").click(function() {
console.log($(this).attr("href"))
var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
$body.animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});
</script>
<div>
<a href="#footer">HELLOW</a>
<div id="footer" style="margin-top:10000px;"> FOOTER </div>
</div>
2013-05-20 / JSN / 0 Comments / 12,750 次瀏覽
var string = "你說這樣好不好?"; //字串
var target = "你|好"; //準備替代的文字, 可用 | 代表or
var myRegExp = new RegExp(target, 'g'); //轉換成正規表示
var replaceText = "O"; //準備替換成的文字
var new_string = string.replace(myRegExp, replaceText); //開始替換
alert(new_string);
如果需要取代具有符號的字串,例如我要把 『$title』 替換成 『標題』,那要這麼寫
// 搜尋符號需要使用『\』加上你要尋找的符號
// 但因為有『\』開頭,所以還要再加一個『\』來跳脫字元。
var key = "title";
var val = "標題";
var re = new RegExp("\\$" + key, "g");
console.log("<div>$title</div>".replace(re, val));
//輸出
<div>標題</div>
關於正規表達式,可以參考這裡
2013-05-08 / JSN / 0 Comments / 1,012 次瀏覽
利用sortable()來做排序效果
網頁a.php是使用者端,使用者可自行排序後按下按鈕,儲存排序的結果
網頁ajax.php是用來儲存的伺服器端
很簡單,好上手!
a.php
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{ margin : 0; padding : 0; }
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size : 100%; }
/* Removes list-style from lists */
ol,ul { list-style : none; }
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }
/* Removes list-style from lists */
table { border-collapse : collapse; border-spacing : 0; }
/* Removes border from fieldset and img */
fieldset,img { border : 0; }
/* Left-aligns text in caption and th */
caption,th { text-align : left; }
/* Removes quotation marks from q */
q:before, q:after { content :''; }
ul { float:left; width:300px; height:}
li { background:#CCC; padding:10px; margin:10px; width:50px; float:left;}
</style>
<script>
$(function (){
// 儲存排序
//
// @selector 指定要排序的父元素
// @child_selector 要排序的子元素
// @send_selector綁定的送出元素
// @ajaxurl AJAX送出的網址
// AJAX 成功後會呼叫 success_sequence_table(data)
function sequence_table(selector, child_selector, send_selector, ajaxurl) {
$(selector).sortable();
$(send_selector).on("click", function (){
var urstring = "";
$(child_selector).each(function(index, element) {
//唯一編號
var id = $(this).attr("data-id");
//目前的排序
var seq = index + 1;
urstring = urstring + "&" + id + "=" + seq;
});
console.log(urstring);
$.post(ajaxurl, {
'querystring' : urstring
}, function (data) {
success_sequence_table(data)
})
});
}
//可自行定義
function success_sequence_table(data) {
alert(data)
}
sequence_table("ul", "li", "button", "ajax.php");
})
</script>
<ul>
<li data-id="1">1.美語</li>
<li data-id="2">2.日文</li>
<li data-id="3">3.俄文</li>
<li data-id="4">4.德文</li>
<li data-id="5">5.法文</li>
<li data-id="6">6.奧文</li>
<li data-id="7">7.義文</li>
<li data-id="8">8.英文</li>
<li data-id="9">9.中文</li>
</ul>
<button type="button">GO</button>
ajax.php
<?
/*
*
* 如 2=1&1=2&3=3
* 代表 編號2的排序是1
* 編號1的排序是2
* 編號3的排序是3
*
*/
//過濾前後符號
$querystring = $_POST['querystring'];
$querystring = trim($querystring, "? ");
$querystring = trim($querystring, "& ");
parse_str($querystring, $data);
print_r($data);
?>
2013-05-08 / JSN / 0 Comments / 1,335 次瀏覽
使用jquery imgAreaSelect選取要裁切的範圍
網址:http://odyniec.net/projects/imgareaselect/
並且可以設定最大範圍與最小範圍或是不限制範圍~~
以下是範例,我寫在同一張PHP,實做的時候建議分開來吧!
<?
if (isset($_POST['submit']))
{
//裁切圖片
function cutimg($fromimgname, $fromimg_startx, $fromimg_starty, $newimg_width, $newimg_height)
{
//取得目標檔案的長寬
$fromimg = imagecreatefromjpeg($fromimgname);
$fromimg_info = getimagesize($fromimgname);
$fromimg_width = $fromimg_info[0];
$fromimg_height = $fromimg_info[1];
//新檔案的寬高
$newimg = imagecreatetruecolor($newimg_width, $newimg_height); // 超過256色改用這個
//進行裁切
imagecopy($newimg, $fromimg, 0,0,$fromimg_startx,$fromimg_starty,$newimg_width,$newimg_height);
return $newimg;
}
$newimg = cutimg($_POST['imgfile'], $_POST['x1'], $_POST['y1'], $_POST['width'], $_POST['height']);
header("Content-Type: image/jpg");
mb_http_output("pass");
imagejpeg($newimg); //直接顯示來TEST, 增加第2個參數可以存成圖片
die;
}
?>
<link rel="stylesheet" type="text/css" href="jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" />
<script type="text/javascript" src="jquery.imgareaselect-0.9.10/scripts/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>
<script>
$(function (){
$('img#photo').imgAreaSelect({
handles: true,
aspectRatio : "4:3", //比例
fadeSpeed : 200,
maxWidth : 200,
maxHeight : 200,
minWidth : 100,
minHeight: 100,
outerOpacity : 0.9, //指定透明度
onSelectChange: function (img, selection){
//x1, y1 為左上角座標
//x2, y2 為右下表座標
$("[name=x1]").val(selection.x1)
$("[name=y1]").val(selection.y1)
$("[name=x2]").val(selection.x2)
$("[name=y2]").val(selection.y2)
$("[name=width]").val(selection.width)
$("[name=height]").val(selection.height)
}
});
})
</script>
<img id="photo" src="Koala.jpg">
<form action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="x1" value="" />
<input type="hidden" name="y1" value="" />
<input type="hidden" name="x2" value="" />
<input type="hidden" name="y2" value="" />
<input type="hidden" name="width" value="">
<input type="hidden" name="height" value="">
<input type="hidden" name="imgfile" value="Koala.jpg">
<input type="submit" name="submit" value="Submit" />
</form>
2013-03-07 / JSN / 0 Comments / 204 次瀏覽
使用方法如下:
[html]
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<style>
/* 替換原始 CSS 設定 end */
.jspVerticalBar {
/*整列*/
}
.jspTrack {
/* 剩餘區塊 */
}
.jspDrag {
/* 目前可拉動的區塊 */
}
/* 替換原始 CSS 設定 end */
.demo{
width:500px;
height:100px;
float:left;
}
</style>
<script>
$(function (){
$(‘.demo’).jScrollPane();
})
</script>
<div class="demo">
<ul>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
</ul>
</div>
<div>
其他區塊
</div>
[/html]