javascript and jQuery tricks

Selectors

如果頁面寬度小於1024就隱藏同時屬於.navigation.post-navigation這兩個類的元素:

if(jQuery(window).width()<1024){jQuery("#aa").show();jQuery('.navigation.post-navigation').hide();}else{jQuery("#leftShare").show();}
});&#91;/code&#93;
<p>根據時間觸發事件:</p>

        //默認30秒
        var timeWaitSec=30000;
        //檢查用戶在文章中是否設置了新的執行時間
        if((typeof timeWaitSecNew!='undefined') && (timeWaitSecNew>1)){
          timeWaitSec = timeWaitSecNew;
        }
        setTimeout("do_sth()", timeWaitSec);

根據頁面滾動百分比觸發一次性事件,:

var done = false;
jQuery(window).scroll(function(){

    var wintop = jQuery(window).scrollTop(), docheight = jQuery(document).height(), winheight = jQuery(window).height();
    var  scrolltrigger = 0.65;
	if(jQuery(window).width()<1024){scrolltrigger = 0.45;}else{scrolltrigger = 0.65;}

    //console.log('%scrolled='+(wintop/(docheight-winheight))*100);

    if  (((wintop/(docheight-winheight)) > scrolltrigger)&&(!done)) {
       do_sth();
       done = true;
    }
});

有時找到到js中中文string如\u8d70\u4e00\u6b65這樣的,是被轉換成了Unicode,可以用站長工具的Unicode轉換工具轉換回來。

如果找到的js文件是minified的,而又需要修改其中內容的化,可以用在線unminify工具進行還原。

倒計時

var wait=5;
timeOut();
function timeOut(){
	if(wait==0){
		feedbackObj.fadeOut(100,function(){
			feedbackObj.remove();					
		});
		$('#opacity-mask').fadeOut(100);	
	}else{					
		setTimeout(function(){
			wait--;
			$('.close-seconds>b').text(wait);
			timeOut();
		},1000)
	}
}

使用谷歌的jQueryCDN,如果CDN失敗則用自己服務器上的

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    window.jQuery || document.write('<script type="text/javascript" src="/common/js/jquery.min.js"><\/script>')
</script>

WordPress與Facebook常用代碼

在文章模板中使用jquery調用facebook總share數,用到jquery解析facebook的json數據:

<script>jQuery(document).ready(function($){
  $.getJSON("https://graph.facebook.com/?id=<?php the_permalink(); ?>", function(data){
    $('#fbCount').text(data.shares);
  });
});
</script>

關閉標籤頁的提醒彈窗(火狐下無效,Chrome下可以):

$(window).bind("beforeunload",function(event) {
    return "Don\'t forget to Like us!";
  });

給post中所有圖片註冊一次性onclick事件:

jQuery(".entry-content img").one("click",function() {fbs_click2();});

自定義按鈕實現點擊後彈出facebook分享彈框

<!--按鈕圖片,圖片採用鏈接背景的方式-->
<a onclick="javascript:fbs_click1();" href="javascript:void(0);" style="background: rgba(0, 0, 0, 0) url('https://ft.wupo.info/wp-content/uploads/2015/11/btn-fblogin.png') no-repeat scroll left center;border-radius: 5px;
color: #fff;display: inline-block;font-size: 1.3em;height: 45px;line-height: 45px;padding: 0 0 0 45px;text-align: left;">分享到FB</a>
<!--彈框js代碼-->
<script>
function fbs_click1() { u = "http://yourdomin.com/yourpage"; t = document.title; window.open('https://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t), 'sharer', 'toolbar=0,status=0,width=626,height=600'); return false; };
</script>
<!--在body關閉標籤前引入facebook代碼-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=1111828692192135";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

用.htaccess實現二級域名網站

RewriteEngine On

RewriteCond %{HTTP_HOST} ^(test.)?domin.com$
RewriteCond %{REQUEST_URI} !^/testFolder/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /testFolder/$1
RewriteCond %{HTTP_HOST} ^(test.)?domin.com$
RewriteRule ^(/)?$ testFolder/index.php [L]

萬網的輕雲服務器不推薦大家購買,說是服務器,文件只能通過ftp傳,而且還自動刪.htaccess。雖然.htaccess上傳後就不見了,運氣好的話規則還是起作用的,爲什麼這麼說呢,因爲他們的輕雲服務器有獨特的.htaccess語法,真是坑。上面的代碼經過測試是可用的。爲什麼這麼不好還要用呢,備案啊,穩定性啊當然還有很便宜的價格。

wordpress建立企業站常用函數和插件

1,常用主題函數

//移除后台默认小控件
add_action('wp_before_admin_bar_render', 'my_admin_bar_remove', 0);

function my_admin_bar_remove()
{
    global $wp_admin_bar;
    global $wp_meta_boxes;
    
    /* Remove their stuff */
    $wp_admin_bar->remove_menu('wp-logo');
    // 以下这一行代码将删除 "快速发布" 模块
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
    // 以下这一行代码将删除 "引入链接" 模块
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
    // 以下这一行代码将删除 "插件" 模块
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
    // 以下这一行代码将删除 "近期评论" 模块
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
    // 以下这一行代码将删除 "近期草稿" 模块
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);
    // 以下这一行代码将删除 "WordPress 开发日志" 模块
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
    // 以下这一行代码将删除 "其它 WordPress 新闻" 模块
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
    // 以下这一行代码将删除 "概况" 模块
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
    // 以下这一行代码将删除 "活动" 模块
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_activity']);
}


// 添加后台小控件
add_action('wp_dashboard_setup', 'my_add_dashboard_widgets');

function my_add_dashboard_widgets()
{
    wp_add_dashboard_widget('my_dashboard_widget', // Widget slug.
'welcome', // Title.
'dashboard_widget_function') // Display function.
;
}

//Create the function to output the contents of our Dashboard Widget.
function dashboard_widget_function()
{
    echo "欢迎!<br/>请点击左侧菜单进行相应操作。";
}

// 去除后台标题中的“—— WordPress”
add_filter('admin_title', 'wpdx_custom_admin_title', 10, 2);

function wpdx_custom_admin_title($admin_title, $title)
{
    return $title . ' &lsaquo; ' . get_bloginfo('name');
}


// 去除后台的谷歌自体
add_action('init', 'remove_open_sans_from_wp_core');

function remove_open_sans_from_wp_core()
{
    wp_deregister_style('open-sans');
    wp_register_style('open-sans', false);
    wp_enqueue_style('open-sans', '');
}

// 自定义WordPress后台底部信息
add_filter('admin_footer_text', 'left_admin_footer_text');

function left_admin_footer_text($text)
{
    // 修改左侧信息
    $text = '感谢使用OKMILK销量查询系统';
    return $text;
}
add_filter('update_footer', 'right_admin_footer_text', 11);

function right_admin_footer_text($text)
{
    // 修改右侧信息
    $text = "4.6.1版本";
    return $text;
}

// 去除右上角帮助
add_filter('contextual_help', 'wpse50723_remove_help', 999, 3);

function wpse50723_remove_help($old_help, $screen_id, $screen)
{
    $screen->remove_help_tabs();
    return $old_help;
}

// 去除一般用户升级提醒
if (! current_user_can('manage_options'))
{
    // Disable Theme Updates
    remove_action('load-update-core.php', 'wp_update_themes');
    add_filter('pre_site_transient_update_themes', create_function('$a', "return null;"));
    wp_clear_scheduled_hook('wp_update_themes');
    
    // Disable Plugin Updates
    remove_action('load-update-core.php', 'wp_update_plugins');
    add_filter('pre_site_transient_update_plugins', create_function('$a', "return null;"));
    wp_clear_scheduled_hook('wp_update_plugins');
    
    // Diasable Core Updates
    add_filter('pre_site_transient_update_core', create_function('$a', "return null;"));
    wp_clear_scheduled_hook('wp_version_check' );
}

2,插件

查看當前模板文件:安裝插件Show Current Template

修改登陸頁logo:安裝插件Custom Login Logo

去除wp頭部版本號:安裝插件Remove WP version and shortlink

维护模式:安裝插件Maintenance Mode

寬屏圖片居中的兩種方法

現在有些網站比較流行用100%寬度的圖片(div)佔滿屏幕,來營造出比較整體或是大氣的感覺。如果直接放一張大圖進去並禁止縮放,會發現瀏覽器是從圖片左側開始展示圖片,而我們想要的是主要顯示中間重要部分。有兩種方法可以做到,一種是利用CSS的背景居中,另一種是用js調整圖片的位置。Talking is cheap, here comes the code:

<style>
.wideBanner {background: rgba(0, 0, 0, 0) url("../images/bg.jpg") no-repeat scroll center center;height: 19px;}
</style>
<div id="wideBanner"></div>
<script type="text/javascript"> 
    $(document).ready(function(){
        var offset=($(window).width()-$("#wideBanner").css("width"))/2;
        $("#wideBanner").css("left",offset);
});
</script>
<div id="wideBanner"></div>

未知寬度div居中https://github.com/simaQ/cssfun/issues/3

     .container{width:500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}
     .center{display:inline-block;border:2px solid #fff;}
     .center{_display:inline;} /*针对ie6 hack*/
     .center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration:none;}
     <div class="container">
     <div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
     <div style="clear:both"></div></div> 

把Laravel5產品放到阿里輕雲

阿里的輕雲服務器滿足Laravel5的基本要求(PHP >= 5.4,Mcrypt PHP Extension,OpenSSL PHP Extension,Mbstring PHP Extension,Tokenizer PHP Extension),於是嘗試着部署了下。首先我是切換到Linux系統的,不知道Win下是什麼狀況。然後在高級環境設置中把php版本設置爲5.5,php.ini全部打開(未測試關閉情況)。然後用FTP上傳文件到服務器。

把除public文件夾外的所有文件上傳到/cgi-bin中,修改storage文件夾及其子文件夾爲可寫權限。把public中所有文件上傳到/htdocs中。修改/htdocs/index.php中如下兩行:

// require __DIR__.'/../bootstrap/autoload.php';
require __DIR__.'/../cgi-bin/bootstrap/autoload.php';

// $app = require_once __DIR__.'/../bootstrap/app.php';
$app = require_once __DIR__.'/../cgi-bin/bootstrap/app.php';

正常情況下,此時應該能正常訪問無數據庫操作的頁面。這裏也是我比較困惑的地方,配置文件.env無法被讀取,感覺是上傳後就遭到服務器刪除了。之前測試.htaccess也怪怪的,還懷疑是不是沒開mod_rewrite。但是我在子文件夾裝wordpress測試就正常,所以.htaccess和mod_rewrite都是正常的。但是.env始終讀取不到,我還試圖修改vendor\vlucas\phpdotenv\src\Dotenv.php也不行,最後直接把數據庫信息寫config/database.php裏了。這樣數據庫就能正常使用了。.env中的其他設置也都可以在config中各個文件單獨設置,當然了如果.env可用還是用.env的好。

使用laravel5自帶的用戶授權系統

我這個不是教程,只是記錄。目標是修改laravel5默認的用戶系統,使之能迅速使用。註冊時在原有信息基礎上添加手機號。至於搭建laravel看參見:在ubuntu上部署apache和laravel5

首先修改數據庫,添加phone列。由於我數據庫還是空的所以就先php artisan migrate:rollback,然後在database/migrations/2014_10_12_000000_create_users_table.php up函數中添加一行

$table->string('phone')->unique();

然後執行php artisan migrate這樣用戶數據庫就有phone了,而且phone還是唯一的。然後修改app/Http/Controllers/Auth/AuthController.php,主要是重載postRegister和postLogin兩個函數。原函數可從vendor/laravel/framework/src/Illuminate/Foundation/Auth/AuthenticatesAndRegistersUsers.php中複製過來,修改後是這樣的:

//app/Http/Controllers/Auth/AuthController.php
<?php namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Contracts\Auth\Guard;
use Illuminate\Contracts\Auth\Registrar;
use Illuminate\Foundation\Auth\AuthenticatesAndRegistersUsers;
use Illuminate\Http\Request;

class AuthController extends Controller {



	use AuthenticatesAndRegistersUsers;
        //修改跳轉地址
        protected $redirectTo = '/';


	public function __construct(Guard $auth, Registrar $registrar)
	{
		$this->auth = $auth;
		$this->registrar = $registrar;

		$this->middleware('guest', ['except' => 'getLogout']);
	}

	public function postRegister(Request $request)
	{       
                //數據驗證
                $this->validate($request, ['phone'=>'required|numeric|unique:users',);
		$validator = $this->registrar->validator($request->all());

		if ($validator->fails())
		{
			$this->throwValidationException(
				$request, $validator
			);
		}

		$this->auth->login($this->registrar->create($request->all()));

		return redirect($this->redirectPath());
	}
        
        //這裏修改爲可以通過郵箱或手機登陸
        public function postLogin(Request $request)
	{
		
                $field = filter_var($request->input('login'), FILTER_VALIDATE_EMAIL) ? 'email' : 'phone';
                $request->merge([$field => $request->input('login')]);
                $this->validate($request, [
			'login' => 'required', 'password' => 'required',
		]);

		$credentials = $request->only($field, 'password');

		if ($this->auth->attempt($credentials, $request->has('remember')))
		{
			return redirect()->intended($this->redirectPath());
		}

		return redirect($this->redirectPath())
					->withInput($request->only('email', 'remember'))
					->withErrors([
						'email' => $this->getFailedLoginMessage(),
					]);
	}
	protected function getFailedLoginMessage()
	{
		return '郵箱或手機與密碼不匹配。';
	}

}

然後修改下位於/home/zenggl/case1/resources/views/auth下的登陸和註冊的表單,登錄表單修改一下email輸入框的name爲login,註冊表單添加一個name爲phone的輸入框。

密碼重置功能laravel5中也是實現好的,只用配置一下郵件發送就好了,我以QQ企業郵箱爲例配置。首先在.env中填入郵件服務器信息,然後設置config中的mail就好了:

//.env
MAIL_DRIVER=smtp
MAIL_HOST=smtp.exmail.qq.com
MAIL_PORT=465
MAIL_USERNAME=yourname@yourmail.com
MAIL_PASSWORD=yourPassword
//config/mail.php
//視郵箱服務器而定,QQ郵箱要用ssl加密,且發信人要和發信帳號一致
'from' => ['address' => 'yourname@yourmail.com', 'name' => null],
'encryption' => 'ssl',

修改提示語言爲簡體中文。首先修改config/app.index中的locale值爲zh-cmn-Hans,然後複製一份resources/lang/en並重命名爲zh-cmn-Hans,最後修改validation.php就可以了。